方法: テンプレートを使用して、GridView を使用する ListView のスタイルを設定する

  • [アーティクル]

この例からは、DataTemplate オブジェクトと Style オブジェクトを使用することで、GridView 表示モードを使用する ListView コントロールの外観を指定する方法がわかります。

例

次の例では、GridViewColumn の列ヘッダーの外観をカスタマイズする Style オブジェクトと DataTemplate オブジェクトを示します。

<Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
  <Setter Property="Background" Value="LightBlue"/>
</Style>

<DataTemplate x:Key="myHeaderTemplate">
  <DockPanel>
    <CheckBox/>
    <TextBlock FontSize="16" Foreground="DarkBlue">
      <TextBlock.Text>
        <Binding/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

次の例では、これらの Style オブジェクトと DataTemplate オブジェクトを使用し、GridViewColumn の HeaderContainerStyle プロパティと HeaderTemplate プロパティを設定する方法を示します。 DisplayMemberBinding プロパティによって列セルの内容が定義されます。

<GridViewColumn Header="Month" Width="80"
      HeaderContainerStyle="{StaticResource myHeaderStyle}"
      HeaderTemplate="{StaticResource myHeaderTemplate}"
      DisplayMemberBinding="{Binding Path=Month}"/>

HeaderContainerStyle と HeaderTemplate は、GridView コントロールの列ヘッダーの外観をカスタマイズできるいくつかのプロパティのうちの 2 つにすぎません。 詳細については、GridView の列ヘッダーのスタイルとテンプレートの概要を参照してください。

次の例では、GridViewColumn 内のセルの外観をカスタマイズする DataTemplate を定義する方法を示します。

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

次の例では、この DataTemplate を使用し、GridViewColumn セルのコンテンツを定義する方法を示します。 このテンプレートは、前の GridViewColumn の例に含まれる DisplayMemberBinding プロパティの代わりに使用されています。

<GridViewColumn Header="Month" Width="80"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

関連項目