Share via

방법: 템플릿을 사용하여 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 컨트롤에 대한 열 헤더 모양을 사용자 지정하는 데 사용할 수 있는 몇 가지 속성 중 두 가지일 뿐입니다. 자세한 내용은 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}"/>

참고 항목