如何：改变 ListView 中各行的背景色

项目
05/17/2010

此示例演示您可用于使 ListView 中各行的 Background 颜色产生交替效果的三种方法。

示例

以下各节提供了三种方法，用于创建各行的 Background 颜色具有交替效果的 ListView。该示例还论述用于在添加或移除行时更新视图的方法。

方法 1：定义使用 IValueConverter 来使背景色产生交替效果的样式

下面的示例显示如何为将 Background 属性的值绑定到 IValueConverter 的 ListViewItem 控件定义 Style。

<Style x:Key="myItemStyle" TargetType="{x:Type ListViewItem}">
  <Setter Property="Background">
    <Setter.Value>
      <Binding RelativeSource="{RelativeSource Self}" 
               Converter="{StaticResource myConverter}"/>
    </Setter.Value>
  </Setter>
</Style>

下面的示例为 IValueConverter 定义 ResourceKey。

<namespc:BackgroundConverter x:Key="myConverter"/>

下面的示例显示依据行索引设置 Background 属性的 IValueConverter 的定义。

    Public NotInheritable Class BackgroundConverter
        Implements IValueConverter
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
            Dim item As ListViewItem = CType(value, ListViewItem)
            Dim listView As ListView = TryCast(ItemsControl.ItemsControlFromItemContainer(item), ListView)
            ' Get the index of a ListViewItem
            Dim index As Integer = listView.ItemContainerGenerator.IndexFromContainer(item)

            If index Mod 2 = 0 Then
                Return Brushes.LightBlue
            Else
                Return Brushes.Beige
            End If
        End Function

public sealed class BackgroundConverter : 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.Beige;
        }
    }

下面的示例演示如何定义使用 Style 作为其 ItemContainerStyle 以便提供所需布局的 ListView。

<ListView Name="theListView" 
          ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}"
          ItemContainerStyle="{StaticResource myItemStyle}" >
  <ListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </ListView.View>
</ListView>

方法 2：从 ListView 中派生一个新类以使背景色产生交替效果

下面的示例演示如何定义从 ListView 中派生的类。此类将重写 PrepareContainerForItemOverride 方法，以便创建具有交替 Background 颜色的行。

    Public Class SubListView
        Inherits ListView
        Protected Overrides Sub PrepareContainerForItemOverride(ByVal element As DependencyObject, ByVal item As Object)
            MyBase.PrepareContainerForItemOverride(element, item)
            If TypeOf View Is GridView Then
                Dim index As Integer = ItemContainerGenerator.IndexFromContainer(element)
                Dim lvi As ListViewItem = TryCast(element, ListViewItem)
                If index Mod 2 = 0 Then
                    lvi.Background = Brushes.LightBlue
                Else
                    lvi.Background = Brushes.Beige
                End If
            End If
        End Sub
    End Class

public class SubListView : ListView
{
    protected override void
        PrepareContainerForItemOverride(DependencyObject element,
        object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        if (View is GridView)
        {
            int index = ItemContainerGenerator.IndexFromContainer(element);
            ListViewItem lvi = element as ListViewItem;
            if (index % 2 == 0)
            {
                lvi.Background = Brushes.LightBlue;
            }
            else
            {
                lvi.Background = Brushes.Beige;
            }
        }
    }
}

下面的示例演示如何创建此类的实例。namespc 前缀映射到公共语言运行时 (CLR) 命名空间和其中定义了 StyleSelector 的对应程序集。

<namespc:SubListView
      ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}">
  <namespc:SubListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </namespc:SubListView.View>
</namespc:SubListView>

方法 3：使用 StyleSelector 使背景色产生交替效果

下面的示例演示如何定义一个为行定义 Style 的 StyleSelector。此示例依据行索引定义 Background 颜色。

    Public Class ListViewItemStyleSelector
        Inherits StyleSelector
        Public Overrides Function SelectStyle(ByVal item As Object, ByVal container As DependencyObject) As Style
            Dim st As New Style()
            st.TargetType = GetType(ListViewItem)
            Dim backGroundSetter As New Setter()
            backGroundSetter.Property = ListViewItem.BackgroundProperty
            Dim listView As ListView = TryCast(ItemsControl.ItemsControlFromItemContainer(container), ListView)
            Dim index As Integer = listView.ItemContainerGenerator.IndexFromContainer(container)
            If index Mod 2 = 0 Then
                backGroundSetter.Value = Brushes.LightBlue
            Else
                backGroundSetter.Value = Brushes.Beige
            End If
            st.Setters.Add(backGroundSetter)
            Return st
        End Function
    End Class

public class ListViewItemStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, 
        DependencyObject container)
    {
        Style st = new Style();
        st.TargetType = typeof(ListViewItem);
        Setter backGroundSetter = new Setter();
        backGroundSetter.Property = ListViewItem.BackgroundProperty;
        ListView listView = 
            ItemsControl.ItemsControlFromItemContainer(container) 
              as ListView;
        int index = 
            listView.ItemContainerGenerator.IndexFromContainer(container);
        if (index % 2 == 0)
        {
            backGroundSetter.Value = Brushes.LightBlue;
        }
        else
        {
            backGroundSetter.Value = Brushes.Beige;
        }
        st.Setters.Add(backGroundSetter);
        return st;
    }
}

下面的示例演示如何为 StyleSelector 定义 ResourceKey。namespc 前缀映射到 CLR 命名空间和其中定义了 StyleSelector 的对应程序集。有关更多信息，请参见 WPF XAML 的 XAML 命名空间和命名空间映射。

<namespc:ListViewItemStyleSelector x:Key="myStyleSelector"/>

下面的示例演示如何将 ListView 的 ItemContainerStyleSelector 属性设置为此 StyleSelector 资源。

<ListView 
      ItemsSource="{Binding Source={StaticResource EmployeeData}, 
                                        XPath=Employee}"
      ItemContainerStyleSelector="{DynamicResource myStyleSelector}" >      
  <ListView.View>
    <GridView>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}" 
                      Header="First Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}" 
                      Header="Last Name" Width="120"/>
      <GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}" 
                      Header="Favorite City" Width="120"/>
    </GridView>
  </ListView.View>
</ListView>

在 ListViewItem 集合中进行更改后更新 ListView

如果从 ListView 控件中添加或移除 ListViewItem，您必须更新 ListViewItem 控件以便重新创建交替的 Background 颜色。下面的示例演示如何更新 ListViewItem 控件。

          Dim dataView As ICollectionView = CollectionViewSource.GetDefaultView(theListView.ItemsSource)
          dataView.Refresh()

ICollectionView dataView =
  CollectionViewSource.GetDefaultView(theListView.ItemsSource);
dataView.Refresh();

请参见

如何：改变 ListView 中各行的背景色

示例

请参见

参考

概念

其他资源

其他资源