Change the background color of listview items

Question

I want to change the background color of listview alternate rows. I am binding values to listview through ObservableCollection. So that I can't iterate through listview items. It shows:

`System.InvalidCastException: 'Unable to cast object of type 'xx.StudentClass' to type 'Windows.UI.Xaml.Controls.ListViewItem'.'

ObservableCollection<StudentClass> StudentData = new ObservableCollection<StudentClass>();
var statement = connection.Prepare("SELECT name,ID from student_details");

while (!(SQLiteResult.DONE == statement.Step()))
{
    if (statement[0] != null)
    {                     
        StudentClass c1 = new StudentClass() { studentName= statement[0].ToString, studentID= statement[1].ToString};
        StudentData.Add(c1);
    }
}

StudentListview.ItemsSource = StudentData;
ChangeBgColor();

private void ChangeBgColor()
{
    int counter = 1;

    foreach (ListViewItem item in this.StudentListview.Items)
    {
        if (counter % 2 == 0)
        {
            item.Background = new SolidColorBrush(Colors.Orange);
        }
        else
        {
            item.Background = new SolidColorBrush(Colors.OrangeRed);
        }
        counter++;
    }
}

<ListView x:Name="StudentListview" Visibility="Collapsed"    VerticalAlignment="Top" HorizontalAlignment="Right" Height="250px"  Width="550px">
  <ListView.ItemTemplate >
    <DataTemplate>
      <Grid>
        <StackPanel Orientation="Vertical" >
          <StackPanel Orientation="Horizontal">
            <TextBlock Foreground="Black" Text="{Binding studentName}"  FontSize="20"  Width="350px" TextWrapping="Wrap"></TextBlock>
          </StackPanel>
          <StackPanel Orientation="Horizontal">                                                              
            <TextBlock Foreground="Black" Text="{Binding  studentID}"  FontSize="20" Width="350px" TextWrapping="Wrap" ></TextBlock>
          </StackPanel>
      </Grid>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Answer 1

If you want this to tackle in a future proof way, I would suggest creating a new ListView control that can handle this...

Here is how I did this, first define the new control with following properties

public class AlternatingListView : ListView
{
    public static readonly DependencyProperty OddRowBackgroundProperty = DependencyProperty.Register(
        nameof(OddRowBackground),
        typeof(Brush),
        typeof(AlternatingListView),
        new PropertyMetadata(null));

    public static readonly DependencyProperty EvenRowBackgroundProperty = DependencyProperty.Register(
        nameof(EvenRowBackground),
        typeof(Brush),
        typeof(AlternatingListView),
        new PropertyMetadata(null));

    public Brush OddRowBackground
    {
        get { return (Brush)GetValue(OddRowBackgroundProperty); }
        set { SetValue(OddRowBackgroundProperty, (Brush)value); }
    }

    public Brush EvenRowBackground
    {
        get { return (Brush)GetValue(EvenRowBackgroundProperty); }
        set { SetValue(EvenRowBackgroundProperty, (Brush)value); }
    }

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        ListViewItem listViewItem = element as ListViewItem;

        if (listViewItem == null)
        {
            return;
        }

        int index = IndexFromContainer(element);
        listViewItem.Background = (index + 1) % 2 == 1 ? OddRowBackground : EvenRowBackground;
    }
}

With all this in place you can add that control your XAML and define the needed colors.

  <controls:AlternatingListView x:Name="ListView"
                                ItemsSource="{x:Bind Items}"
                                EvenRowBackground="SlateGray"
                                OddRowBackground="White" />