方法 : ListView の行の背景色を変更する

2008-09-17

更新 : 2007 年 11 月

この例では、ListView の行の Background の色を変更するために使用できる 3 つの方法を示します。

使用例

以下のセクションでは、Background の色を変更する行がある ListView を作成する 3 つの方法を示します。また、行を追加または削除したときにビューを更新する方法も説明します。

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

次の例では、必要なレイアウトを提供するために、ItemContainerStyle として Style を使用する 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 : 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 : 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 が定義されている対応するアセンブリにマップされます。詳細については、「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 コントロールを更新する方法を示します。

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

参照

次の方法で共有

方法 : ListView の行の背景色を変更する

使用例

参照

概念

参照

その他の技術情報

その他のリソース