How to add different background colors to alternate rows to list box items windows phone 8 - listbox

Question

I'm new to windows phone development.
I'm showing data in list box. For for all rows in the list box the back ground color is same.
But I want to add two different colors for alternate rows to list box items.
Below is the code for list view.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,10,0,0" Background="White">
<ListBox Margin="6,6,-6,6" Name="itemslb" SelectionChanged="itemList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="listItem">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Height="100" Margin="0,10,0,0">
<StackPanel Width="85" Height="100" >
<StackPanel.Background>
<ImageBrush x:Name="defImage" ImageSource="/DailyFeeds;component/Images/default.png" Stretch="None"></ImageBrush>
</StackPanel.Background>
<Image Source="{Binding ImageUrl}" VerticalAlignment="Top" Height="90" Width="85" Margin="0,0,10,0" Stretch="Fill" />
</StackPanel>
<StackPanel Width="370">
<TextBlock Text="{Binding Title}" Foreground="SlateBlue" FontSize="25" TextWrapping="Wrap" />
<TextBlock Text="{Binding Date}" Foreground="#FFC8AB14" FontSize="20"/>
</StackPanel>
</StackPanel>
<Image x:Name="line" Grid.Row="1" Width="460" HorizontalAlignment="Center" Margin="0,5,0,0" Source="/DailyFeeds;component/Images/separator.png" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
How can we do that.
Thanks

Answer 1

create a converter class
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();
}
}
add converter to the page
<UserControl
xmlns:conv="clr-namespace:MyApplication.Converters"
<UserControl.Resources>
<conv:AlternateRowColour x:Key="RowColour" />
</UserControl.Resources>
</UserControl>
ur listBox
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="{Binding Converter={StaticResource RowColour}}"> // your stackPanel
<!-- layout XAML -->
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Answer 2

Define a Class
public class RowData
{
public string text { get; set; }
public Brush brush { get; set; }
}
XAML Code
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="60" Width="480" Background="{Binding brush}">
<TextBlock VerticalAlignment="Center" Margin="12,0" Text="{Binding text}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
C# code
ObservableCollection<RowData> items = new ObservableCollection<RowData>();
items.Add(new RowData() { text = "Text 1", brush = new SolidColorBrush(Colors.Red) });
items.Add(new RowData() { text = "Text 2", brush = new SolidColorBrush(Colors.Green) });
items.Add(new RowData() { text = "Text 3", brush = new SolidColorBrush(Colors.Red) });
items.Add(new RowData() { text = "Text 4", brush = new SolidColorBrush(Colors.Green) });
items.Add(new RowData() { text = "Text 5", brush = new SolidColorBrush(Colors.Red) });
listBox.ItemsSource = items;

Answer 3

or:
<Grid>
<Grid.Resources>
<AlternationConverter x:Key="BackgroundConverter">
<SolidColorBrush>Blue</SolidColorBrush>
<SolidColorBrush>CornflowerBlue</SolidColorBrush>
<SolidColorBrush>LightBlue</SolidColorBrush>
</AlternationConverter>
<AlternationConverter x:Key="AlternateForegroundConverter">
<SolidColorBrush>White</SolidColorBrush>
<SolidColorBrush>Black</SolidColorBrush>
<SolidColorBrush>Navy</SolidColorBrush>
</AlternationConverter>
<Style x:Key="alternatingWithBinding" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource BackgroundConverter}}"/>
<Setter Property="Foreground"
Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource AlternateForegroundConverter}}"/>
</Style>
</Grid.Resources>
<ListBox AlternationCount="3" ItemsSource="{StaticResource data}"
ItemContainerStyle="{StaticResource alternatingWithBinding}"/>
</Grid>