Контейнеры и шаблоны элементов

Элементы управления ListView и GridView управляют расположением своих элементов (горизонтальное и вертикальное выравнивание, обтекание и т. д.) и взаимодействием пользователя с этими элементами, но не тем, как отдельные элементы отображаются на экране. Визуализацией элементов управляют контейнеры элементов. При добавлении элементов в представление списка они автоматически помещаются в контейнер. Контейнер элементов по умолчанию для ListView — ListViewItem; для GridView— GridViewItem.

Важные API: класс ListView, класс GridView, класс ListViewItem, класс GridViewItem, свойство ItemTemplate, свойство ItemContainerStyle

Примечание.

Элементы управления ListView и GridView являются производными от класса ListViewBase, поэтому они имеют аналогичные функции, но отображают данные по-другому. В этой статье вся информация о представлении списка актуальна для обоих элементов управления (ListView и GridView), если не указано иное. Когда упоминаются классы ListView или ListViewItem, нужно помнить, что префикс List может быть заменен префиксом Grid для соответствующего эквивалента сетки (GridView или GridViewItem).

Элементы ListView и GridView

Как упоминалось выше, элементы ListView автоматически помещаются в контейнер ListViewItem, а элементы GridView — в контейнер GridViewItem. Эти контейнеры являются элементами управления, которые обладают собственными встроенными стилями и возможностями взаимодействия, но их также можно легко настроить. Однако перед настройкой обязательно ознакомьтесь с рекомендованными стилями и указаниями для ListViewItem и GridViewItem.

• Элементы ListViewItem имеют вытянутую форму и в основном предназначены для текста. Слева от текста могут отображаться значки или изображения.
• Элементы GridViewItem обычно имеют квадратную форму или по крайней мере форму вытянутого прямоугольника. Элементы предназначены для изображений и могут содержать текст, отображаемый вокруг или поверх изображения.

Введение в настройку

Контейнерные элементы управления (такие как ListViewItem и GridViewItem) состоят из двух важных частей, сочетание которых формирует окончательное визуальное оформление элемента. Это шаблон данных и шаблон элемента управления.

• Шаблон данных. Класс DataTemplate назначается свойству ItemTemplate представления списка, чтобы указать способ отображения отдельных элементов данных.
• Шаблон элемента управления. Шаблон элемента управления предоставляет часть визуализации элемента, за которую отвечает платформа, например визуальные состояния. Вы можете изменять шаблон элемента управления с помощью свойства 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 и многих других элементов управления. К ним относятся элементы управления с собственными встроенными стилями, такие как FlipView, и пользовательские элементы управления, такие как ItemsRepeater. Хотя приведенный ниже пример относится только к ListView и GridView, продемонстрированные в нем принципы могут применяться и ко многим другим элементам управления.

Необходимые компоненты

• Мы предполагаем, что вы умеете пользоваться элементами управления представления списка. См. сведения о ListView и GridView.
• Мы также предполагаем, что вы знакомы со стилями и шаблонами элементов управления и, среди прочего, умеете использовать стили в качестве встроенных элементов или ресурсов. См. сведения о настройке стиля элементов управления и шаблонах элементов управления.

Данные

Прежде чем углубляться в особенности отображения элементов данных в представлении списка, необходимо разобраться в отображаемых данных. В этом примере мы создаем тип данных с именем NamedColor. Он сочетает название и значение цвета, а также класс SolidColorBrush для цвета, которые предоставляются в виде трех свойств: Name, Color и Brush.

Затем мы заполняем класс List объектом NamedColor для каждого именованного цвета в классе Colors. Этот список устанавливается как свойство 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 для этого свойства. Здесь свойству Name элемента NamedColor назначается свойство DisplayMemberPath.

XAML

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

Теперь элементы в представлении списка отсортированы по имени, как показано в примере. Это более полезно, но это не очень интересно и оставляет много информации скрытой.

Более интересным является сложно оформленное представление данных. Чтобы точно определить, как должны отображаться элементы в представлении списка, вы создаете DataTemplate. В DataTemplate с помощью XAML определяется макет и внешний вид элементов управления, используемых для отображения отдельного элемента. Элементы управления в макете могут быть привязаны к свойствам объекта данных или иметь статическое содержимое, задаваемое в коде. Вы назначаете DataTemplate свойству ItemTemplate элемента управления списком.

Внимание

Одновременно нельзя использовать ItemTemplate и DisplayMemberPath . Если настроены оба свойства, возникает исключение.

Здесь определяется свойство DataTemplate, отображающее класс Rectangle в цвете элемента, а также название цвета и значения RGB.

Примечание.

При использовании расширения разметки x:Bind в DataTemplate необходимо задать DataType (x:DataType) в 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>

Вот как выглядят элементы данных при отображении с помощью этого шаблона данных.

Внимание

По умолчанию содержимое в элементах ListViewItem выравнивается по левому краю, т. е. их свойство HorizontalContentAlignmentProperty имеет значение Left. Если в ListViewItem имеется несколько элементов, расположенных рядом по горизонтали, например столбцы элементов или элементы, размещенные в одной строке сетки, то все они будут выровнены по левому краю и разделены только заданными для них полями.

Чтобы заполнить элементами все текстовое поле ListItem, необходимо задать для свойства HorizontalContentAlignmentProperty значение Stretch, воспользовавшись классом Setter в ListView.

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

Вам может потребоваться отображать данные в GridView. Вот еще один шаблон данных для отображения данных способом, который подходит для макета сетки. На этот раз шаблон данных определяется как ресурс, а не встроенный элемент в XAML для GridView.

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 элемент Grid, 1 элемент Rectangle, 3 элемента Border, 5 элементов TextBlock). Представление GridView, в котором отображается 20 элементов с использованием этого шаблона данных, создает не менее 200 элементов (20*10=200). Сокращение количества элементов в шаблоне данных может значительно сократить общее количество элементов, созданных для представления списка. Дополнительные сведения см. в разделе "Оптимизация пользовательского интерфейса ListView и GridView": сокращение количества элементов на элемент.

Обратите внимание на этот раздел шаблона данных сетки. Давайте рассмотрим, как можно сократить число элементов.

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

• Во-первых, в макете используется 1 элемент Grid. Можно использовать элемент Grid с одним столбцом и разместить эти 3 элемента TextBlock в элементе StackPanel, но при работе с многократно создаваемым шаблоном данных следует избегать встраивания одних панелей макета в другие.
• Во-вторых, вы можете использовать элемент управления Border для отрисовки фона, не размещая элементы внутри этого элемента Border. У элемента Border может быть только 1 дочерний элемент, поэтому для размещения 3 элементов TextBlock внутри элемента Border в XAML вам потребуется добавить дополнительную панель макета. Не делая элементы TextBlock дочерними элементами Border, вы исключаете необходимость добавления панели для размещения элементов TextBlock.
• Наконец, вы можете разместить элементы TextBlock внутри элемента StackPanel и установить свойства рамок элемента, вместо того чтобы использовать отдельный элемент Border. Но элемент управления Border проще, чем StackPanel, поэтому при многократной отрисовке он меньше влияет на производительность.

Использование различных макетов для разных элементов

Шаблон элемента управления

Шаблон элемента управления содержит визуальные элементы, отображающие состояние, например при выделении, наведении указателя и фокусировке. Эти визуальные элементы отрисовываются над шаблоном данных или под ним. Здесь показаны некоторые распространенные визуальные элементы, отображаемые шаблоном элемента управления ListView.

• Наведение. Под шаблоном данных отображается светло-серый прямоугольник.
• Выделение. Под шаблоном данных отображается голубой прямоугольник.
• Фокус клавиатуры. Визуальный элемент дополнительного выделения, который отображается поверх шаблона элемента.

Представление списка совмещает элементы шаблонов данных и элемента управления для формирования окончательных визуальных элементов, отображаемых на экране. Здесь визуальные элементы состояний отображаются в контексте представления списка.

ListViewItemPresenter

Выше мы говорили о шаблонах данных в контексте того, что количество элементов XAML, созданных для каждого элемента, может сильно влиять на производительность представления списка. Так как шаблоны данных и элемента управления совмещаются при отображении каждого элемента, фактическое количество элементов, требуемых для отображения элемента, включает количество элементов в обоих шаблонах.

Элементы управления ListView и GridView позволяют сократить количество элементов XAML, создаваемых для каждого элемента. Визуальные элементы ListViewItem создаются классом ListViewItemPresenter. Это особый элемент XAML для отображения сложных визуальных элементов фокуса, выделения и других визуальных состояний без излишней нагрузки многочисленных элементов пользовательского интерфейса.

Примечание.

В приложениях UWP для Windows как ListViewItem, так и GridViewItem используют ListViewItemPresenter; GridViewItemPresenter не рекомендуется использовать его. Классы ListViewItem и GridViewItem устанавливают разные значения свойств в ListViewItemPresenter для получения разного визуального оформления по умолчанию.

Для изменения оформления контейнера элемента используйте свойство ItemContainerStyle и предоставьте класс Style, при этом его свойству TargetType следует задать значение ListViewItem или GridViewItem.

В этом примере к классу 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 свойство ContentMargin класса имеет привязку TemplateBinding к свойству Padding класса ListViewItem (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). При установке свойства Padding его значение фактически передается свойству ContentMargin класса ListViewItemPresenter.

Для изменения других свойств ListViewItemPresenter, не привязанных шаблоном к свойствам ListViewItem, вам потребуется изменить шаблон ListViewItem с помощью нового класса ListViewItemPresenter, в котором можно изменять свойства.

Примечание.

Стили по умолчанию ListViewItem и GridViewItem задают большое количество свойств в ListViewItemPresenter. Следует всегда начинать с копии стиля по умолчанию и изменять только необходимые свойства. В противном случае визуальные элементы могут отображаться не так, как ожидается, так как некоторые свойства будут настроены неправильно.

Создание копии шаблона по умолчанию в Visual Studio

1. Откройте область "Структура документа" (просмотр другой структуры документа Windows > >).
2. Выберите элемент списка или сетки для изменения. В этом примере изменяется элемент colorsGridView.
3. Щелкните правой кнопкой мыши и выберите "Изменить дополнительные шаблоны", "Изменить контейнер созданных > элементов" (ItemContainerStyle) > "Изменить копию".
4. В диалоговом окне "Создание ресурса стиля" введите имя стиля. В этом примере используется colorsGridViewItemStyle.

В приложение добавляется копия стиля по умолчанию в качестве ресурса, а свойство GridView.ItemContainerStyle настраивается для этого ресурса, как показано в этом коде XAML.

<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 для управления флажком выделения, расположением элементов и цветами кисти для визуальных состояний.

Визуальные элементы выделения Inline и Overlay

Классы ListView и GridView указывают выделенные элементы по-разному в зависимости от элемента управления и SelectionMode. См. сведения о выделении в представлении списка в описании ListView и GridView.

Если для SelectionMode установлено значение Multiple, в составе шаблона элемента управления элемента отображается флажок выделения. Вы можете использовать свойство SelectionCheckMarkVisualEnabled для отключения флажка выделения в режиме выбора нескольких элементов. Но это свойство игнорируется в других режимах выделения. Так, флажок нельзя включить в режиме расширенного выделения или выделения одного элемента.

Вы можете установить свойство CheckMode, чтобы указать, следует ли отображать флажок в стиле наложения или встроенном стиле.

• Встроенный: этот стиль показывает флажок слева от содержимого и цвет фона контейнера элементов для указания выделения. Это стиль по умолчанию для ListView.
• Наложение. Этот стиль показывает флажок на верхней части содержимого и цвет только границу контейнера элементов, чтобы указать выделение. Это стиль по умолчанию для GridView.

В этой таблице показаны визуальные элементы по умолчанию, используемые для обозначения выделения.

SelectionMode:	Один или расширенный	Несколько
Встроенный
Наложение

Примечание.

В этом и последующих примерах простые строковые элементы данных отображаются без шаблонов данных, чтобы выделить визуальные элементы шаблона элемента управления.

Также существует несколько свойств кисти для изменения цвета флажка. Далее мы рассмотрим эти и другие свойства кисти.

Кисти

Во многих свойствах указываются кисти, используемые для разных визуальных состояний. Вам может потребоваться изменить их в соответствии с цветом фирменной символики.

В этой таблице показаны визуальные состояния "Общее" и "Выделение" для ListViewItem, а также кисти, используемые для отрисовки визуальных элементов каждого состояния. На изображениях показан результат применения кистей к визуальным стилям выделения в режиме наложения и встроенном режиме.

Примечание.

В этой таблице измененные значения цветов кистей — это встроенные именованные цвета, причем они выделены, чтобы было видно, где они применяются в шаблоне. Это не цвета по умолчанию для визуальных состояний. При изменении цветов по умолчанию в приложении следует использовать ресурсы кистей для изменения значений цветов, как сделано в шаблоне по умолчанию.

Состоянии и название кисти	Встроенный стиль	Стиль наложения
Нормальный CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
Pressed PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
Выбрано SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Green" CheckBoxBrush="Red" (только встроенный режим)
PointerOverSelected SelectedPointerOverBackground="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (только режим наложения) CheckBrush="Green" CheckBoxBrush="Red" (только встроенный режим)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (только режим наложения) CheckBrush="Green" CheckBoxBrush="Red" (только встроенный режим)
Focused FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter имеет другие свойства кисти для заполнителей данных и состояний перетаскивания. При использовании добавочной загрузки или перетаскивания в представлении списка следует решить, нужно ли изменять и эти дополнительные свойства кисти. См. полный список изменяемых свойств в разделе класса ListViewItemPresenter.

Расширенные шаблоны элементов XAML

Если вам требуется внести больше изменений, чем можно с помощью свойств ListViewItemPresenter (например, если нужно изменить расположение флажка), используйте шаблоны ListViewItemExpanded или GridViewItemExpanded. Эти шаблоны доступны со стилями по умолчанию в generic.xaml. Они соответствуют стандартному подходу XAML, когда все визуальные элементы формируются из отдельных элементов пользовательского интерфейса.

Как упоминалось ранее, большое количество элементов пользовательского интерфейса в шаблоне элемента заметно влияет на производительность представления списка Замена ListViewItemPresenter расширенными шаблонами XAML приводит к существенному увеличению количества элементов, поэтому ее не рекомендуется выполнять, если в представлении списка должно отображаться большое количество элементов или когда производительность должна оставаться высокой.

Примечание.

ListViewItemPresenter поддерживается только в том случае, если представление списка является ItemsWrapGrid или ItemsStackPanel. Если вы измените значение свойства ItemsPanel на VariableSizedWrapGrid, WrapGrid или StackPanel, шаблон элемента автоматически переключится на расширенный шаблон XAML. См. сведения о том, как оптимизировать пользовательский интерфейс ListView и GridView.

Для настройки расширенного шаблона XAML вам потребуется создать его копию в приложении и привязать свойство ItemContainerStyle к копии.

Копирование расширенного шаблона

1. Задайте свойству ItemContainerStyle значение, как показано здесь для ListView или GridView.

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

2. На панели свойств Visual Studio раскройте раздел "Прочее" и найдите свойство ItemContainerStyle. (Убедитесь, что выбран класс ListView или GridView.)

3. Нажмите метку свойства ItemContainerStyle. (Это небольшое поле рядом с TextBox. Он цветной зеленый, чтобы показать, что для него задано значение StaticResource.) Откроется меню свойств.

4. В меню свойств щелкните Преобразовать в новый ресурс.

   

5. В диалоговом окне "Создать ресурс стиля" введите название для ресурса и щелкните "ОК".

В приложении будет создана копия расширенного шаблона из generic.xaml, которую можно изменять при необходимости.

Связанные статьи

• Списки
• ListView и GridView