How to add different background colors to alternat

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

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 2

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>

Answer 3

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>