共用方式為


HOW TO:在 ListView 中變更資料列的背景色彩

更新:2007 年 11 月

本範例說明三種方法來變更 ListView 資料列的 Background 色彩。

範例

下列章節提供三種方法來建立 ListView,其資料列會變更 Background 色彩。這個範例也說明新增或移除資料列時,更新檢視的方法。

方法 1:定義使用 IValueConverter 的樣式來變更背景色彩

下列範例顯示如何定義 ListViewItem 控制項的 Style,將 Background 屬性的值繫結至 IValueConverter

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

下列範例會定義 IValueConverterResourceKey

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

下列範例顯示 IValueConverter 的定義,它會根據資料列索引設定 Background 屬性。

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;
        }
    }

下列範例顯示如何定義 ListView,其使用 Style 做為它的 ItemContainerStyle 以提供所需的版面配置。

<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 : 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 前置詞會對應至 Common Language Runtime (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 變更背景色彩

下列範例顯示如何定義 StyleSelector,它會定義資料列的 Style。這個範例會根據資料列索引定義 Background 色彩。

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;
    }
}    

下列範例顯示如何定義 StyleSelectorResourceKey。namespc 前置詞會對應至 CLR 命名空間以及定義 StyleSelector 所在的對應組件。如需詳細資訊,請參閱 XAML 命名空間和命名空間對應

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

下列範例顯示如何將 ListViewItemContainerStyleSelector 屬性設為這個 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 控制項。

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

請參閱

概念

ListView 概觀

GridView 概觀

參考

GridView

ListView

其他資源

ListView 範例

ListView HOW TO 主題