方法 : ListView の行の背景色を変更する
この例では、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 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;
}
}
次の例では、必要なレイアウトを提供するために、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
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 が定義されている対応するアセンブリにマップされます。詳細については、「XAML 名前空間および WPF 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();