Delen via

Procedure: Sjablonen gebruiken om een ListView te stylen die gebruikmaakt van GridView

  • Artikel

In dit voorbeeld ziet u hoe u de DataTemplate- en Style-objecten gebruikt om het uiterlijk van een ListView besturingselement op te geven dat gebruikmaakt van een GridView weergavemodus.

Voorbeeld

In de volgende voorbeelden ziet u Style en DataTemplate objecten waarmee het uiterlijk van een kolomkop voor een GridViewColumnwordt aangepast.

<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>

In het volgende voorbeeld ziet u hoe u deze Style- en DataTemplate-objecten gebruikt om de eigenschappen HeaderContainerStyle en HeaderTemplate van een GridViewColumnin te stellen. De eigenschap DisplayMemberBinding definieert de inhoud van de kolomcellen.

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

De HeaderContainerStyle en HeaderTemplate zijn slechts twee van de verschillende eigenschappen die u kunt gebruiken om het uiterlijk van de kolomkop voor een GridView besturingselement aan te passen. Zie GridView Column Header Styles and Templates Overviewvoor meer informatie.

In het volgende voorbeeld ziet u hoe u een DataTemplate definieert waarmee het uiterlijk van de cellen in een GridViewColumnwordt aangepast.

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

In het volgende voorbeeld ziet u hoe u deze DataTemplate gebruikt om de inhoud van een GridViewColumn cel te definiëren. Deze sjabloon wordt gebruikt in plaats van de eigenschap DisplayMemberBinding die wordt weergegeven in het vorige GridViewColumn voorbeeld.

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

Zie ook