Alternate Background for ListViewItems

This sample shows how to create a ListView control that uses a GridView to display a list of dates that are defined as DateTime objects. Items in this example have alternate background.

 

Key Step 1. Restyle ListViewItem, and set its Background by converter in the new style.

 

    <l:BackgroundConvertor x:Key="myConverter"/>

    <Style x:Key="myItemStyle" TargetType="{x:Type ListViewItem}">

      <Setter Property="Background">

        <Setter.Value>

          <Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource myConverter}"/>

        </Setter.Value>

      </Setter>

</Style>

<ListView Name="lv" ItemContainerStyle="{StaticResource myItemStyle}" />

Key Step 2 . Implement BackgroundConvertor. We need the index of a ListViewItem to determine its background. int ItemContainerGenerator.IndexFromContainer(DependencyObject container) method can tell the index of a ListViewItem.

 

public sealed class BackgroundConvertor : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

    {

        ListViewItem item = (ListViewItem)value;

        ListView listView = ItemsControl.ItemsControlFromItemContainer(item) as ListView;

        // Get the index of a ListViewItem

        int index = listView.ItemContainerGenerator.IndexFromContainer(item);

        if (index % 2 == 0)

        {

            return Brushes.LightBlue;

        }

        else

        {

            return Brushes.White;

        }

    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

    {

        throw new NotSupportedException();

    }

}

Key Step 3. We’ve almost finished the sample, and it works well in sorting/grouping. However, when one item is removed from the ListView, you may find two adjacent rows have the same background color. That's because the background of all the other items will not be updated automatically after removing/inserting. Therefore, some extra code is needed to refresh the items after the inserting/removing operation.

 

private void Remove(object sender, RoutedEventArgs e)

{

    _data.RemoveAt(3);

    // Must refresh all the items to update the background

    ICollectionView dataView =

      CollectionViewSource.GetDefaultView(lv.ItemsSource);

    dataView.Refresh();

}

This sample is based on the February CTP.

AlternateBackground.zip

Comments

• Anonymous
  March 27, 2006
  Great samples - keep them coming.
  
  Can you shed any light on what happened to the DatePicker and Month Calendar controls.  If they've gone for good, is there any chance you can come up with a sample DatePicker?
  
  Keep up the good work.
  
  Michael
• Anonymous
  July 26, 2007
  PingBack from http://ligao101.wordpress.com/2007/07/27/customizing-listview-in-wpf-part-i/