方法 : GridView を実装する ListView で行のスタイルを設定する

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>

参照

参照

ListView

GridView

概念

ListView の概要

スタイルとテンプレート

その他の技術情報

ListView に関する「方法」トピック