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

この例では、ListViewGridView モードを使用するView コントロールで行のスタイルを設定する方法を示します。

例

ListView コントロールにItemContainerStyleを設定することで、ListView コントロール内の行のスタイルを設定できます。 アイテムをオブジェクトとして表現するためのスタイルを設定します。ListViewItem ItemContainerStyleは、行の内容を表示するために使用されるControlTemplate オブジェクトを参照します。

次の例から抽出された完全なサンプルでは、XML データベースに格納されている曲情報のコレクションが表示されます。 データベース内の各曲には評価フィールドがあり、このフィールドの値は曲情報の行を表示する方法を指定します。

次の例は、曲コレクション内の曲を表すItemContainerStyle オブジェクトのListViewItemを定義する方法を示しています。 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>

次の例は、テキスト文字列ControlTemplateを行に追加する"Strongly Recommended"を示しています。 このテンプレートは ItemContainerStyle で参照され、曲の評価の値が 5 (5) の場合に表示されます。 ControlTemplateには、GridViewRowPresenter ビュー モードで定義されている列の行の内容をレイアウトするGridView オブジェクトが含まれています。

<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 の概要
• スタイリングとテンプレート作成