nakamuraさんも同じことをされていたけど、違うアプローチから縞々をしてみようと思う。
Nakamura Blog:ListViewを縞々にする
やり方は基本的に前にやったListBoxの時と同じ。
さくっとしてみよう。
ListViewに表示するデータの準備
まず、表示するデータがないと話しにならない。いつもどおりのPersonクラスを作成する。
namespace WpfApplication4
{
public class Person
{
public int No { get; set; }
public string Name { get; set; }
}
}
これをWindowのコンストラクタでDataContextに設定する。
using System.Windows;
namespace WpfApplication4
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
DataContext = new[]
{
new Person { No = 1, Name = "田中 太郎" },
new Person { No = 2, Name = "鈴木 太郎" },
new Person { No = 3, Name = "田中 次郎" },
new Person { No = 4, Name = "田中 三郎" },
new Person { No = 5, Name = "田中 四郎" },
new Person { No = 6, Name = "田中 五郎" },
new Person { No = 7, Name = "田中 六郎" },
new Person { No = 8, Name = "木村さん" },
};
}
}
}
これで準備完了。
ListViewにデータを表示する
表示のさせ方自体は前にもしてるから、さくっとXAMLだけ紹介。
<Window x:Class="WpfApplication4.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<ListView ItemsSource="{Binding}" AlternationCount="2">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="No" DisplayMemberBinding="{Binding No}" />
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>
普通にデータが表示されるようになった。いい感じ。
ついに縞々
縞々にするため？に.NET Framework 3.5 SP1から追加されたAlternationCountプロパティをListViewに追加する。縞々なので2を指定した。
<ListView ItemsSource="{Binding}" AlternationCount="2">
そしてListViewのItemContainerStyleでItemsControl.AlternationIndexでTriggerをかけて背景色を変えるようにする。
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<!-- 奇数行だけ金色！ -->
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Gold" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
実行すると縞々にはなってるが…
No3の田中 次郎さんの行をマウスで選択しているのにハイライトが非常にわかりにくい。 選択されてるときは、背景色を指定しないように改良してみよう。
やりたいこととしては、ItemsControl.AlternationIndexが0で、選択されてない行だけ色を変えたいということなのでMultiTriggerを使ってやってみた。
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<MultiTrigger>
<!-- 奇数行で、選択されてない行は金色!! -->
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="0" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Gold" />
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
こうすると、選択行の色は変わらない。でも、これはこれでイマイチかな…。
選択されてる行でAlternationIndexが0の行にそれっぽい色をつける様なMultiTriggerを設定すれば良さそうだ。早速やってみよう。
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<!-- 選択されてない奇数行は紫色っぽい色で -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="0" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#ffee00ff" />
</MultiTrigger>
<!-- 選択されてる奇数行は透明っぽい紫色で -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="0" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#44ee00ff"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
これで実行するとそれっぽくなってる。
