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

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

Arizona

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>

Gentle

Where exactly should i place the user control code block in the page. – Arizona

dont put usercontrol in your page just add the converter to the page – Gentle

I don't know how to add the converter to xaml page – Arizona

Hi Ashok, could you please explain in detail because i'm new to windows phone development. I have done 1st step only i.e created a new class AlternateRowColour in the project. After that i don't know exactly how to do. – Arizona

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;

Colettacolette

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>

Dart

TargetType="{x:Type ...}" is not supported in Silverlight for Windows Phone. – Friseur