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

Статья
07/13/2023

Элементы управления 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.

ListViewItems — элементы в основном ориентированы на текст и имеют вытянутую форму. Слева от текста могут отображаться значки или изображения.
Элементы 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 списка.

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

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

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

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

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

Шаблон элемента управления содержит визуальные элементы, отображающие состояние, например при выделении, наведении указателя и фокусировке. Эти визуальные элементы отрисовываются над шаблоном данных или под ним. Здесь показаны некоторые распространенные визуальные элементы, отображаемые шаблоном элемента управления 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

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

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

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

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

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

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

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

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

Примечание

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

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

Кисти

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

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

Примечание

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

Состоянии и название кисти	Встроенный стиль	Стиль наложения
Normal CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
Pressed PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
Selected 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 поддерживается только в том случае, если элемент ItemsPanel представления списка является 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, которую можно изменять при необходимости.

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

Элементы ListView и GridView

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

Предварительные условия

Данные

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

Рекомендации по производительности

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

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

ListViewItemPresenter

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

Кисти

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

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

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

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

Элементы ListView и GridView

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

Предварительные условия

Данные

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

Рекомендации по производительности

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

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

ListViewItemPresenter

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

Кисти

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

Похожие статьи

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

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