I had a requirement today to implement alternating row colours in a Windows Phone 7 ListBox. After a bit of frustration with searching and only finding answers tht said “You can’t do it”, or that you need to add a property on the model to bind the background to, I eventually hit upon a nugget of common sense on this page.
Basically you need to create a converter class that will handle the alternation of backgrounds for you. It is ridiculously simple once you see it in action.
Step 1 : Create the converter.
public class AlternateRowColour : IValueConverter { bool isAlternate; SolidColorBrush even = new SolidColorBrush(Colors.Transparent); // Set these two brushes to your alternating background colours. SolidColorBrush odd = new SolidColorBrush(Color.FromArgb(255, 241, 241, 241)); public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { isAlternate = !isAlternate; return isAlternate ? even : odd ; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }
Step 2 : Add the converter to the page
<UserControl ...snip... xmlns:conv="clr-namespace:MyApplication.Converters" ...snip... > <UserControl.Resources> <conv:AlternateRowColour x:Key="RowColour" /> </UserControl.Resources> ...snip... </UserControl>
Step 3 : Bind to the ListBox
<ListBox ItemsSource="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <Grid Background="{Binding Converter={StaticResource RowColour}}"> <!-- layout XAML --> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
And you’re done.