항목 컨테이너 및 템플릿

ListView 및 GridView 컨트롤은 항목이 정렬되는 방식(가로, 세로, 래핑 등)과 사용자가 항목과 상호 작용하는 방식을 관리하지만 개별 항목이 화면에 표시되는 방식은 관리하지 않습니다. 항목 시각화는 항목 컨테이너에 의해 관리됩니다. 목록 보기에 항목을 추가하면 자동으로 컨테이너에 배치됩니다. ListView의 기본 항목 컨테이너는 ListViewItem입니다. GridView의 경우 GridViewItem입니다.

중요 API: ListView 클래스, GridView 클래스, ListViewItem 클래스, GridViewItem 클래스, ItemTemplate 속성, ItemContainerStyle 속성

ListView 항목 및 GridView 항목

위에서 설명한 대로 ListView 항목은 ListViewItem 컨테이너에 자동으로 배치되고 GridView 항목은 GridViewItem 컨테이너에 배치됩니다. 이러한 항목 컨테이너는 고유한 기본 제공 스타일 지정 및 상호 작용이 있는 컨트롤이지만 고도로 사용자 지정할 수도 있습니다. 그러나 사용자 지정하기 전에 ListViewItem 및 GridViewItem에 대한 권장 스타일 및 지침을 숙지해야 합니다.

• ListViewItems - 항목은 주로 텍스트 중심이며 모양이 길어집니다. 아이콘 또는 이미지가 텍스트 왼쪽에 나타날 수 있습니다.
• GridViewItems - 항목은 일반적으로 정사각형 모양이거나 덜 길쭉한 직사각형 모양입니다. 항목은 이미지에 중점을 두고 이미지 주위에 표시되거나 이미지에 겹쳐진 텍스트가 있을 수 있습니다.

사용자 지정 소개

컨테이너 컨트롤(예: ListViewItem 및 GridViewItem)은 항목에 대해 표시되는 최종 시각적 개체인 데이터 템플릿 과 컨트롤 템플릿을 만들기 위해 결합되는 두 가지 중요한 부분으로 구성됩니다.

• 데이터 템플릿 - 목록 보기의 ItemTemplate 속성에 DataTemplate을 할당하여 개별 데이터 항목이 표시되는 방식을 지정합니다.
• 컨트롤 템플릿 - 컨트롤 템플릿은 시각적 상태와 같이 프레임워크가 담당하는 항목 시각화의 일부를 제공합니다. ItemContainerStyle 속성을 사용하여 컨트롤 템플릿을 수정할 수 있습니다. 일반적으로 이 작업을 수행하여 브랜딩과 일치하도록 목록 보기 색을 수정하거나 선택한 항목이 표시되는 방식을 변경합니다.

이 이미지는 컨트롤 템플릿과 데이터 템플릿을 결합하여 항목에 대한 최종 시각적 개체를 만드는 방법을 보여줍니다.

이 항목을 만드는 XAML은 다음과 같습니다. 나중에 템플릿에 대해 설명합니다.

<ListView Width="220" SelectionMode="Multiple">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="Assets/placeholder.png" Width="44" Height="44"
                       HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind}" Foreground="Black"
                           FontSize="14" Grid.Column="1"
                           VerticalAlignment="Center"
                           Padding="0,0,54,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen"/>
        </Style>
    </ListView.ItemContainerStyle>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

필수 조건

• 목록 보기 컨트롤을 사용하는 방법을 알고 있다고 가정합니다. 자세한 내용은 ListView 및 GridView 문서를 참조하세요.
• 또한 스타일을 인라인으로 또는 리소스로 사용하는 방법을 포함하여 컨트롤 스타일과 템플릿을 이해하고 있다고 가정합니다. 자세한 내용은 스타일 지정 컨트롤 및컨트롤 템플릿을 참조하세요.

데이터

목록 보기에서 데이터 항목을 표시하는 방법을 자세히 살펴보기 전에 표시할 데이터를 이해해야 합니다. 이 예제에서는 .라는 NamedColor데이터 형식을 만듭니다. 색 이름과 색 값, 그리고 를 결합하여 색을 나타내는 3개의 속성Name, Color, Brush으로 노출합니다.

그런 다음 Colors 클래스에서 명명된 각 색에 대한 개체로 NamedColorList를 채웁다. 목록은 목록 보기에 대한 ItemsSource 로 설정됩니다.

클래스를 정의하고 목록을 채우는 코드는 NamedColors 다음과 같습니다.

C#

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace ColorsListApp
{
    public sealed partial class MainPage : Page
    {
        // The list of colors won't change after it's populated, so we use List<T>. 
        // If the data can change, we should use an ObservableCollection<T> intead.
        List<NamedColor> NamedColors = new List<NamedColor>();

        public MainPage()
        {
            this.InitializeComponent();

            // Use reflection to get all the properties of the Colors class.
            IEnumerable<PropertyInfo> propertyInfos = typeof(Colors).GetRuntimeProperties();

            // For each property, create a NamedColor with the property name (color name),
            // and property value (color value). Add it the NamedColors list.
            for (int i = 0; i < propertyInfos.Count(); i++)
            {
                NamedColors.Add(new NamedColor(propertyInfos.ElementAt(i).Name,
                                    (Color)propertyInfos.ElementAt(i).GetValue(null)));
            }

            colorsListView.ItemsSource = NamedColors;
        }
    }

    class NamedColor
    {
        public NamedColor(string colorName, Color colorValue)
        {
            Name = colorName;
            Color = colorValue;
        }

        public string Name { get; set; }

        public Color Color { get; set; }

        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(Color); }
        }
    }
}

데이터 템플릿

데이터 템플릿을 지정하여 데이터 항목을 표시하는 방법을 목록 보기에 알립니다.

기본적으로 데이터 항목은 바운딩된 데이터 개체의 문자열 표현으로 목록 보기에 표시됩니다. 목록 보기에 표시되는 모양을 알리지 않고 목록 보기에 'NamedColors' 데이터를 표시하면 ToString 메서드가 반환하는 항목이 다음과 같이 표시됩니다.

XAML

<ListView x:Name="colorsListView"/>

DisplayMemberPath를 해당 속성으로 설정하여 데이터 항목의 특정 속성에 대한 문자열 표현을 표시할 수 있습니다. 여기서 DisplayMemberPath를 항목의 속성으로 NameNamedColor 설정합니다.

XAML

<ListView x:Name="colorsListView" DisplayMemberPath="Name" />

목록 보기는 이제 다음과 같이 이름으로 항목을 표시합니다. 그것은 더 유용하지만, 그것은 매우 흥미롭지 않으며 많은 정보를 숨깁니다.

일반적으로 데이터를 보다 다양하게 표시하려는 경우가 많습니다. 목록 보기의 항목이 표시되는 방식을 정확하게 지정하려면 DataTemplate을 만듭니다. DataTemplate의 XAML은 개별 항목을 표시하는 데 사용되는 컨트롤의 레이아웃 및 모양을 정의합니다. 레이아웃의 컨트롤은 데이터 개체의 속성에 바운딩되거나 정적 콘텐츠 정의 인라인을 가질 수 있습니다. 목록 컨트롤의 ItemTemplate 속성에 DataTemplate 을 할당합니다.

여기서는 색 이름 및 RGB 값과 함께 항목 색의 사각형 을 표시하는 DataTemplate을 정의합니다.

XAML

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:NamedColor">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="54"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Width="44" Height="44" Fill="{x:Bind Brush}" Grid.RowSpan="2"/>
                <TextBlock Text="{x:Bind Name}" Grid.Column="1" Grid.ColumnSpan="4"/>
                <TextBlock Text="{x:Bind Color.R}" Grid.Column="1" Grid.Row="1" Foreground="Red"/>
                <TextBlock Text="{x:Bind Color.G}" Grid.Column="2" Grid.Row="1" Foreground="Green"/>
                <TextBlock Text="{x:Bind Color.B}" Grid.Column="3" Grid.Row="1" Foreground="Blue"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

데이터 항목이 이 데이터 템플릿과 함께 표시될 때의 모양은 다음과 같습니다.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

GridView에 데이터를 표시할 수 있습니다. 다음은 그리드 레이아웃에 더 적합한 방식으로 데이터를 표시하는 또 다른 데이터 템플릿입니다. 이번에는 데이터 템플릿이 GridView에 대한 XAML과 인라인이 아닌 리소스로 정의됩니다.

XAML

<Page.Resources>
    <DataTemplate x:Key="namedColorItemGridTemplate" x:DataType="local:NamedColor">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="96"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
    
            <Rectangle Width="96" Height="96" Fill="{x:Bind Brush}" Grid.ColumnSpan="3" />
            <!-- Name -->
            <Border Background="#AAFFFFFF" Grid.ColumnSpan="3" Height="40" VerticalAlignment="Top">
                <TextBlock Text="{x:Bind Name}" TextWrapping="Wrap" Margin="4,0,0,0"/>
            </Border>
            <!-- RGB -->
            <Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
            <TextBlock Text="{x:Bind Color.R}" Foreground="Red"
                   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.G}" Foreground="Green"
                   Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
                   Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
            <!-- HEX -->
            <Border Background="Gray" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock Text="{x:Bind Color}" Foreground="White" Margin="4,0,0,0"/>
            </Border>
        </Grid>
    </DataTemplate>
</Page.Resources>

...

<GridView x:Name="colorsGridView" 
          ItemTemplate="{StaticResource namedColorItemGridTemplate}"/>

이 데이터 템플릿을 사용하여 데이터가 그리드에 표시되면 다음과 같습니다.

성능 고려 사항

데이터 템플릿은 목록 보기의 모양을 정의하는 기본 방법입니다. 목록에 많은 수의 항목이 표시되는 경우에도 성능에 큰 영향을 미칠 수 있습니다.

데이터 템플릿의 모든 XAML 요소 인스턴스는 목록 보기의 각 항목에 대해 만들어집니다. 예를 들어 이전 예제의 그리드 템플릿에는 10개의 XAML 요소(그리드 1개, 사각형 1개, 테두리 3개, TextBlock 5개)가 있습니다. 이 데이터 템플릿을 사용하여 화면에 20개 항목을 표시하는 GridView는 200개 이상의 요소(20*10=200)를 만듭니다. 데이터 템플릿의 요소 수를 줄이면 목록 보기에 대해 생성된 총 요소 수를 크게 줄일 수 있습니다. 자세한 내용은 ListView 및 GridView UI 최적화: 항목당 요소 수 감소를 참조하세요.

그리드 데이터 템플릿의 이 섹션을 고려합니다. 요소 수를 줄이는 몇 가지 사항을 살펴보겠습니다.

XAML

<!-- RGB -->
<Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
<TextBlock Text="{x:Bind Color.R}" Foreground="Red"
           Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.G}" Foreground="Green"
           Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
           Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>

• 먼저 레이아웃은 단일 그리드를 사용합니다. 단일 열 눈금이 있고 이러한 3개의 TextBlock을 StackPanel에 배치할 수 있지만 여러 번 생성되는 데이터 템플릿에서는 다른 레이아웃 패널 내에 레이아웃 패널을 포함하지 않도록 하는 방법을 찾아야 합니다.
• 둘째, Border 컨트롤을 사용하여 실제로 Border 요소 내에 항목을 배치하지 않고 배경을 렌더링할 수 있습니다. Border 요소에는 자식 요소가 하나만 있을 수 있으므로 XAML의 Border 요소 내에서 3개의 TextBlock 요소를 호스트하는 추가 레이아웃 패널을 추가해야 합니다. TextBlocks을 Border의 자식으로 만들지 않으면, 패널이 TextBlocks을 보유할 필요가 없습니다.
• 마지막으로 TextBlocks를 StackPanel 내부에 배치하고 명시적 Border 요소를 사용하는 대신 StackPanel에서 테두리 속성을 설정할 수 있습니다. 그러나 Border 요소는 StackPanel보다 더 간단한 컨트롤이므로 여러 번 렌더링할 때 성능에 미치는 영향이 적습니다.

다른 항목에 다른 레이아웃 사용

컨트롤 템플릿

항목의 컨트롤 템플릿에는 선택, 포인터 및 포커스와 같은 상태를 표시하는 시각적 개체가 포함되어 있습니다. 이러한 시각적 개체는 데이터 템플릿의 위쪽 또는 아래에 렌더링됩니다. ListView 컨트롤 템플릿에서 그린 일반적인 기본 시각적 개체 중 일부는 여기에 표시됩니다.

• 가리키기 – 데이터 템플릿 아래에 그려진 연한 회색 사각형입니다.
• 선택 – 데이터 템플릿 아래에 그려진 연한 파란색 사각형입니다.
• 키보드 포커스 - 항목 템플릿 위에 그려진 높은 가시성 포커스 시각적 개체 입니다.

목록 보기는 데이터 템플릿과 컨트롤 템플릿의 요소를 결합하여 화면에 렌더링된 최종 시각적 개체를 만듭니다. 여기서 상태 시각화는 목록 보기로 표시됩니다.

ListViewItemPresenter

이전에 데이터 템플릿에 대해 설명한 것처럼 각 항목에 대해 생성된 XAML 요소의 수는 목록 보기의 성능에 큰 영향을 미칠 수 있습니다. 데이터 템플릿과 컨트롤 템플릿이 결합되어 각 항목을 표시하기 때문에 항목을 표시하는 데 필요한 실제 요소 수에는 두 템플릿의 요소가 모두 포함됩니다.

ListView 및 GridView 컨트롤은 항목당 생성된 XAML 요소 수를 줄이기 위해 최적화됩니다. ListViewItem 시각적 개체는 다양한 UIElements의 오버헤드 없이 포커스, 선택 및 기타 시각적 상태에 대한 복잡한 시각적 개체를 표시하는 특수 XAML 요소인 ListViewItemPresenter에 의해 생성됩니다.

항목 컨테이너의 모양을 수정하려면 ItemContainerStyle 속성을 사용하고 TargetType이 ListViewItem 또는 GridViewItem으로 설정된 Style을 제공합니다.

이 예제에서는 ListViewItem에 안쪽 여백을 추가하여 목록의 항목 사이에 공백을 만듭니다.

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <!-- DataTemplate XAML shown in previous ListView example -->
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0,4"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

이제 목록 보기는 항목 사이에 공백이 있는 것처럼 보입니다.

ListViewItem 기본 스타일에서 ListViewItemPresenter ContentMargin 속성에는 ListViewItem Padding 속성()에 대한 <ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>이 있습니다. Padding 속성을 설정하면 해당 값이 실제로 ListViewItemPresenter ContentMargin 속성에 전달됩니다.

ListViewItems 속성에 바인딩되지 않은 다른 ListViewItemPresenter 속성을 수정하려면 속성을 수정할 수 있는 새 ListViewItemPresenter로 ListViewItem을 재구성해야 합니다.

Visual Studio에서 기본 템플릿의 복사본을 만들려면

1. 문서 개요 창을 엽니다(다른 Windows > 문서 개요 보기>).
2. 수정할 목록 또는 그리드 요소를 선택합니다. 이 예제에서는 요소를 수정합니다 colorsGridView .
3. 마우스 오른쪽 단추를 클릭하고 추가 템플릿 > 편집 생성된 항목 컨테이너 편집(ItemContainerStyle) > 복사본 편집을 선택합니다.
4. 스타일 리소스 만들기 대화 상자에서 스타일 이름을 입력합니다. 이 예제에서는 .를 사용합니다 colorsGridViewItemStyle.

기본 스타일의 복사본이 앱에 리소스로 추가되고 이 XAML에 표시된 것처럼 GridView.ItemContainerStyle 속성이 해당 리소스로 설정됩니다.

<Style x:Key="colorsGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="Overlay" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                    SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

<GridView x:Name="colorsGridView" ItemContainerStyle="{StaticResource colorsGridViewItemStyle}"/>

이제 ListViewItemPresenter의 속성을 수정하여 시각적 상태에 대한 선택 확인란, 항목 위치 및 브러시 색을 제어할 수 있습니다.

인라인 및 오버레이 선택 시각적 요소

ListView 및 GridView는 컨트롤 및 SelectionMode에 따라 선택한 항목을 다양한 방식으로 나타냅니다. 목록 보기 선택에 대한 자세한 내용은 ListView 및 GridView를 참조하세요.

SelectionMode를 Multiple로 설정하면 선택 확인란이 항목의 컨트롤 템플릿의 일부로 표시됩니다. SelectionCheckMarkVisualEnabled 속성을 사용하여 다중 선택 모드에서 선택 확인란을 끌 수 있습니다. 그러나 이 속성은 다른 선택 모드에서 무시되므로 확장 또는 단일 선택 모드에서는 확인란을 켤 수 없습니다.

CheckMode 속성을 설정하여 인라인 스타일 또는 오버레이 스타일을 사용하여 확인란을 표시할지 여부를 지정할 수 있습니다.

• 인라인: 이 스타일은 콘텐츠 왼쪽의 확인란을 표시하고 항목 컨테이너의 배경에 색을 지정하여 선택을 나타냅니다. ListView의 기본 스타일입니다.
• 오버레이: 이 스타일은 콘텐츠 맨 위에 확인란을 표시하고 항목 컨테이너의 테두리에만 색을 지정하여 선택을 나타냅니다. GridView의 기본 스타일입니다.

이 표에서는 선택을 나타내는 데 사용되는 기본 시각적 개체를 보여 줍니다.

선택 모드:	단일/확장	Multiple
인라인
오버레이

확인란의 색을 변경하는 몇 가지 브러시 속성도 있습니다. 다음으로 다른 브러시 속성과 함께 살펴보겠습니다.

브러시

대부분의 속성은 다양한 시각적 상태에 사용되는 브러시를 지정합니다. 브랜드 색과 일치하도록 수정할 수 있습니다.

이 표에서는 ListViewItem에 대한 공통 및 선택 시각적 상태와 각 상태에 대한 시각적 개체를 렌더링하는 데 사용되는 브러시를 보여 줍니다. 이미지는 인라인 및 오버레이 선택 시각적 스타일 모두에 브러시의 효과를 보여 줍니다.

상태/브러시 이름	인라인 스타일	오버레이 스타일
표준 CheckBoxBrush="Red"
PointerOver (포인터오버) PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="빨간색"
누름 PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="빨간색"
선택한 SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="녹색" CheckBoxBrush="Red"(인라인에만 해당)
PointerOverSelected SelectedPointerOverBackground="라벤더" SelectedForeground="Navy" SelectedBackground="Khaki"(오버레이에만 해당) CheckBrush="녹색" CheckBoxBrush="Red"(인라인에만 해당)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki"(오버레이에만 해당) CheckBrush="녹색" CheckBoxBrush="Red"(인라인에만 해당)
집중 FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="빨간색"

ListViewItemPresenter에는 데이터 자리 표시자 및 끌기 상태에 대한 다른 브러시 속성이 있습니다. 목록 보기에서 증분 로드 또는 끌어서 놓기를 사용하는 경우 이러한 추가 브러시 속성도 수정해야 하는지 여부를 고려해야 합니다. 수정할 수 있는 속성의 전체 목록은 ListViewItemPresenter 클래스를 참조하세요.

확장된 XAML 항목 템플릿

ListViewItemPresenter 속성에서 허용하는 것보다 더 많은 수정을 수행해야 하는 경우(예: 확인란의 위치를 변경해야 하는 경우) ListViewItemExpanded 또는 GridViewItemExpanded 템플릿을 사용할 수 있습니다. 이러한 템플릿은 generic.xaml의 기본 스타일에 포함됩니다. 개별 UIElements에서 모든 시각적 개체를 빌드하는 표준 XAML 패턴을 따릅니다.

앞에서 설명한 것처럼 항목 템플릿의 UIElement 수는 목록 보기의 성능에 큰 영향을 줍니다. ListViewItemPresenter를 확장된 XAML 템플릿으로 바꿔면 요소 수가 크게 증가하며 목록 보기에 많은 수의 항목이 표시되거나 성능이 중요한 경우에는 사용하지 않는 것이 좋습니다.

확장된 XAML 템플릿을 사용자 지정하려면 앱에서 해당 템플릿의 복사본을 만들고 ItemContainerStyle 속성을 복사본으로 설정해야 합니다.

확장된 템플릿을 복사하려면

1. ListView 또는 GridView에 대해 여기에 표시된 대로 ItemContainerStyle 속성을 설정합니다.

   <ListView ItemContainerStyle="{StaticResource ListViewItemExpanded}"/>
   <GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"/>
   

2. Visual Studio 속성 창에서 기타 섹션을 확장하고 ItemContainerStyle 속성을 찾습니다. (ListView 또는 GridView가 선택되어 있는지 확인합니다.)

3. ItemContainerStyle 속성의 속성 표식을 클릭합니다. TextBox 옆에 있는 작은 상자입니다. StaticResource로 설정된 것을 표시하기 위해 녹색으로 표시됩니다.) 속성 메뉴가 열립니다.

4. 속성 메뉴에서 [새 리소스로 변환]을 클릭합니다.

   

5. 스타일 리소스 만들기 대화 상자에서 리소스의 이름을 입력하고 확인을 클릭합니다.

generic.xaml에서 확장된 템플릿의 복사본이 귀하의 앱에 생성되며, 필요에 따라 수정할 수 있습니다.

관련 문서

• 목록
• ListView 및 GridView