 |
|||||||||
|
|||||||||
|
|
When working on a demonstration application for CLINQ, I decided that I was going to use an alternating background color (commonly known as "ledger style") for a list of items. This is usually no big deal and I've seen a truckload of samples for doing it. One of the simplest and most common ways of doing it is to create an Item Container Style where the background property is data bound:
<Style x:Key="alternatingStyle" TargetType="{x:Type ListBoxItem}">In the code for the binding (the static resource called "myConverter" which is an IValueConverter , you then simply use code like this:
listBox.ItemsContainerGenerator.IndexFromContainer(item);
To generate the index. Then all you need to do is see if the index is odd or even and return the appropriate resource/brush accordingly. This is typically where a lot of the samples stop. What they don't tell you is that this only works on the first shot through. Once your data source becomes volatile (let's say your list box is bound to something like a ContinuousCollection), your results are going to be erratic. It will result in multiple adjacent rows with the same color because the background color of previously inserted rows is not being modified.
I personally prefer to use an ItemContainerStyleSelector instead of setting up the fixed container style with a databound property. That looks something like this:
<ListBox ... ItemContainerStyleSelector="{StaticResource ledgerStyleSelector}"/>
The code for the ledger style selector is very simple, and looks nearly identical to the code for a bound value converter that does the same task:
public class LedgerStyleSelector : StyleSelector
{
private int _rowCount = 0;
public override Style SelectStyle(object item, DependencyObject container)
{
string styleKey;
ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(container);
if (item == ic.Items[0])
{
_rowCount = 0;
}
if (_rowCount % 2 == 0)
{
styleKey = "whiteBackgroundStyle";
}
else
{
styleKey = "paleGoldenrodBackgroundStyle";
}
_rowCount++;
return (Style)(ic.FindResource(styleKey));
}
}
Again, this approach suffers from a similar problem as the first approach. Once the list to which your view/grid/listbox is bound starts churning with adds and removes, the existing rows are going to maintain their previous background style, screwing up your ledger style completely. The only way around this is to somehow refresh the style selector so that it will be re-run against the list when the collection changes.
Happily enough for us, ContinuousCollection is completely compliant with publishing collection changes because it derives from ObservableCollection<T>, so I was able to subscribe to the collection changed event (thanks for the tip from Bea Costa's blog! If you want anything data-binding related, check out Bea's Blog). Here's the code that runs every time the bound collection changes:
private void Restyle(object sender, NotifyCollectionChangedEventArgs args)
{
LedgerStyleSelector selector = askList.ItemContainerStyleSelector as LedgerStyleSelector;
selector.ResetRowCount();
askList.ItemContainerStyleSelector = null;
askList.ItemContainerStyleSelector = selector;
...
}
By setting the container style selector to null and then setting it back to the existing selector, it forces a re-evaluation of the style container for each item in the list. I also have a call to ResetRowCount() because there is a chance that this application could be running all day long with constantly changing data and if the row counter isn't reset to 0, at some point it will overflow.
So that's what I discovered when binding a continuously-updating data source to a WPF listbox - if you're going to do a ledger view there's a couple of details to remember, but it's not all that difficult at all.
Enjoy!