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

  • [アーティクル]

この例では、GridViewView モードを使用する 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>

関連項目