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

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

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

Замечание

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

Элементы 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. К ним относятся элементы управления с собственным встроенным стилем, такими как FlipView и пользовательские элементы управления, такие как ItemsRepeater. Хотя приведенный ниже пример относится к ListView/GridView, основные понятия можно применять ко многим другим элементам управления.

Предпосылки

Предполагается, что вы знаете, как использовать элемент управления представлением списка. Дополнительные сведения см. в статье ListView и GridView .
Мы также предполагаем, что вы понимаете стили и шаблоны элементов управления, в том числе как использовать стиль встроенно или в качестве ресурса. Дополнительные сведения см. в разделе "Стилизация элементов управления " и "Шаблоны элементов управления".

Данные

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

Затем мы заполняем списокNamedColor объектом для каждого именованного цвета в классе Colors . Список задается как ItemsSource для представления списка.

Ниже приведен код для определения класса и заполнения NamedColors списка.

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Microsoft.UI.Xaml.Controls;
using Microsoft.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"/>

представление списка, показывающее строковое представление элементов

Чтобы отобразить строковое представление определенного свойства элемента данных, задaв DisplayMemberPath для этого свойства. Здесь DisplayMemberPath устанавливается в свойство Name элемента NamedColor.

XAML

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

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

Представление списка, показывающее строковое представление свойства элемента

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

Это важно

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

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

Замечание

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

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

Элементы представления списка с шаблоном данных

Это важно

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

Чтобы элементы равномерно заполняли всю область 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 сетка, 1 прямоугольник, 3 границы, 5 текстовых блоков). 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"/>

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

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

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

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

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

Визуальные элементы представления списка

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

Представление Lsit с элементами в разных состояниях

ListViewItemPresenter

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

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

Замечание

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

Чтобы изменить внешний вид контейнера элементов, используйте свойство ItemContainerStyle и укажите стиль с его 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 по умолчанию свойство ListViewItemPresenter ContentMargin имеет TemplateBinding для свойства ListViewItem Padding (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). При установке свойства Padding это значение действительно передается свойству ListViewItemPresenter ContentMargin.

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

Замечание

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

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

Откройте область "Структура документа" (просмотр > другой структуры документа Windows>).
Выберите элемент списка или сетки для изменения. В этом примере вы изменяете colorsGridView элемент.
Щелкните правой кнопкой мыши и выберите "Изменить дополнительные шаблоны", "Изменить контейнер созданных > элементов" (ItemContainerStyle) > "Изменить копию".
В диалоговом окне "Создание ресурса стиля" введите имя стиля. В этом примере используется 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, чтобы управлять флажком выбора, расположением элементов и цветами кисти для визуальных состояний.

Встроенные и наложенные визуальные элементы

ListView и GridView указывают выбранные элементы различными способами в зависимости от элемента управления и SelectionMode. Дополнительные сведения о выборе представления списка см. в разделе ListView и GridView.

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

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

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

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

Режим выбора	Одинарный или расширенный	Множественный
Встроенный
Overlay

Замечание

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

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

Кисти

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

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

Замечание

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

Имя состояния/кисти	Встроенный стиль	Стиль наложения
обычные CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Красный"
Нажатый PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Красный"
Выбранный SelectedForeground="Navy" SelectedBackground="Хаки" CheckBrush="Зеленый" CheckBoxBrush="Red" (только в строке)
PointerOverSelected SelectedPointerOverBackground="Лаванда" SelectedForeground="Navy" SelectedBackground="Khaki" (только для наложения) CheckBrush="Зеленый" CheckBoxBrush="Red" (только в строке)
Выбран и нажат SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (только для наложения) CheckBrush="Зеленый" CheckBoxBrush="Red" (только в строке)
Сфокусированный FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Красный"

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

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

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

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

Замечание

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

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

Копирование развернутого шаблона

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

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

В области свойств Visual Studio разверните раздел "Прочие" и найдите свойство ItemContainerStyle. (Убедитесь, что выбран ListView или GridView.)
Щелкните маркер свойства для свойства ItemContainerStyle. (Это небольшое поле рядом с TextBox. Он цветной зеленый, чтобы показать, что для него задано значение StaticResource.) Откроется меню свойств.
В меню свойств нажмите кнопку "Преобразовать в новый ресурс".
В диалоговом окне "Создать ресурс стиля" введите имя ресурса и нажмите кнопку "ОК".

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-07-08

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

Элементы ListView и элементы GridView

Общие сведения о настройке

Предпосылки

Данные

Шаблон данных

Вопросы, связанные с производительностью

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

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

ListViewItemPresenter

Встроенные и наложенные визуальные элементы

Кисти

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

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

Обратная связь

Дополнительные ресурсы