方法 : GridView を実装する ListView で行のスタイルを設定する
更新 : 2007 年 11 月
GridView の View モードを実装する ListView コントロールで行のスタイルを設定する方法を次の例に示します。
使用例
ListView コントロール内の行のスタイルは、ListView コントロールに ItemContainerStyle を設定することによって設定できます。ListViewItem オブジェクトとして表される項目のスタイルを設定します。ItemContainerStyle は、行のコンテンツの表示に使用する ControlTemplate オブジェクトを参照します。
次の例の抽出元であるサンプル全体では、XML データベースに格納されている曲情報のコレクションを表示します。データベースの各曲は評価フィールドを持ち、このフィールドの値で曲情報の行の表示方法が指定されます。
曲のコレクション内の曲を表す ListViewItem オブジェクトの ItemContainerStyle を定義する方法を次の例に示します。ItemContainerStyle は、曲情報の行の表示方法を指定する ControlTemplate オブジェクトを参照します。
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" >
<Setter Property="Template"
Value="{StaticResource Default}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding XPath=@Rating}" Value="5">
<Setter Property="Template"
Value="{StaticResource StronglyRecommended}"/>
</DataTrigger>
<DataTrigger Binding="{Binding XPath=@Rating}" Value="4">
<Setter Property="Template"
Value="{StaticResource Recommended}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
テキスト文字列 "Strongly Recommended" を行に追加する ControlTemplate の例を次に示します。このテンプレートは ItemContainerStyle で参照され、曲の評価の値が 5 の場合に表示されます。ControlTemplate には、GridView 表示モードで定義された列に行のコンテンツを配置する GridViewRowPresenter オブジェクトが含まれます。
<ControlTemplate x:Key="StronglyRecommended"
TargetType='{x:Type ListViewItem}'>
<StackPanel Background="Beige">
<GridViewRowPresenter Content="{TemplateBinding Content}"
Columns="{TemplateBinding GridView.ColumnCollection}"/>
<TextBlock Background="LightBlue" Text="Strongly Recommended" />
</StackPanel>
</ControlTemplate>
次の例では、GridView を定義しています。
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
<GridViewColumn Header="Name"
DisplayMemberBinding="{Binding XPath=@Name}"
Width="100"/>
<GridViewColumn Header="Time"
DisplayMemberBinding="{Binding XPath=@Time}"
Width="80"/>
<GridViewColumn Header="Artist"
DisplayMemberBinding="{Binding XPath=@Artist}"
Width="80" />
<GridViewColumn Header="Disk"
DisplayMemberBinding="{Binding XPath=@Disk}"
Width="100"/>
</GridView>
</ListView.View>
サンプル全体については、「スタイル設定された ListViewItem を持つ ListView のサンプル」を参照してください。