Представления списка и сеткиList view and grid view

Большая часть приложений отображает наборы данных, такие как коллекции изображений или набор сообщений электронной почты, и управляет ими.Most applications manipulate and display sets of data, such as a gallery of images or a set of email messages. Платформа пользовательского интерфейса XAML предоставляет элементы управления ListView и GridView, упрощающие отображение данных и управление ими в приложении.The XAML UI framework provides ListView and GridView controls that make it easy to display and manipulate data in your app.

Важные API: класс ListView, класс GridView, свойство ItemsSource, свойство ItemsImportant APIs: ListView class, GridView class, ItemsSource property, Items property

Примечание

Элементы управления ListView и GridView являются производными от класса ListViewBase, поэтому они имеют аналогичные функции, но отображают данные по-другому.ListView and GridView both derive from the ListViewBase class, so they have the same functionality, but display data differently. В этой статье вся информация о представлении списка актуальна для обоих элементов управления (ListView и GridView), если не указано иное.In this article, when we talk about list view, the info applies to both the ListView and GridView controls unless otherwise specified. Когда упоминаются классы ListView или ListViewItem, нужно помнить, что префикс List может быть заменен префиксом Grid для соответствующего эквивалента сетки (GridView или GridViewItem).We may refer to classes like ListView or ListViewItem, but the List prefix can be replaced with Grid for the corresponding grid equivalent (GridView or GridViewItem).

ListView и GridView предоставляют множество преимуществ для работы с коллекциями.ListView and GridView provide many benefits for working with collections. Они просты в реализации и предоставляют базовый пользовательский интерфейс, а также возможности взаимодействия и прокрутки. Кроме того, их легко настраивать.They are both easy to implement and provide basic UI; interaction; and scrolling while still being easily customizable. ListView и GridView могут быть привязаны к существующим динамическим источникам данных или жестко запрограммированным данным, предоставленным в XAML или в коде программной части.ListView and GridView can be bound to existing dynamic data sources, or hard-coded data provided in the XAML itself/the code-behind.

Эти два элемента управления являются гибкими и подходят для многих вариантов использования. Однако в целом они лучше всего работают с коллекциями, в которых все элементы имеют одинаковую базовую структуру и внешний вид, а также единые возможности взаимодействия, т. е. все они выполняют одно и то же действие при щелчке (открытие ссылки, переход и т. д.).These two controls are flexible to many use cases, but overall work best with collections in which all items should have the same basic structure and appearance, as well as the same interaction behavior - i.e. they should all perform the same action when clicked (open a link, navigate, etc).

Различия между ListView и GridViewDifferences between ListView and GridView

ListViewListView

ListView отображает данные в одном столбце и упорядочивает их по вертикали.The ListView displays data stacked vertically in a single column. ListView лучше подходит для элементов, использующим текст в качестве точки фокуса, и коллекций, которые предназначены для чтения сверху вниз (т. е. упорядочены в алфавитном порядке).ListView works better for items that have text as a focal point, and for collections that are meant to be read top to bottom (i.e. alphabetically ordered). Несколько распространенных вариантов использования ListView включают в себя списки сообщений и результатов поиска.A few common use cases for ListView include lists of messages and search results. Коллекции, которые нужно отобразить в нескольких столбцах или в формате таблицы, не должны использовать ListView. Вместо этого рекомендуем применить DataGrid.Collections that need to be displayed in multiple columns or in a table-like format should not use ListView, but should look into using a DataGrid instead.

Представление списка со сгруппированными данными

GridViewGridView

Элемент управления GridView представляет коллекцию элементов, которые расположены в строках и столбцах, с вертикальной прокруткой.The GridView presents a collection of items in rows and columns that can scroll vertically. Данные упорядочиваются по горизонтали до тех пор, пока не заполнят столбцы, после чего начинается заполнение следующей строки.Data is stacked horizontally until it fills the columns, then continues with the next row. GridView лучше подходит для элементов, использующих изображения в качестве точки фокуса, и коллекций, которые могут считываться из стороны в сторону или не сортируются в каком-либо определенном порядке.GridView works better for items that have images as their focal point, and for collections that can be read from side-to-side or are not sorted in a specific order. Распространенным вариантом использования GridView является коллекция фотографий или продуктов.A common use case for GridView is a photo or product gallery.

Пример библиотеки содержимого

Какой элемент управления коллекциями следует использовать?Which collection control should you use? Сравнение с ItemsRepeaterA Comparison with ItemsRepeater

ListView и GridView — это элементы управления, которые готовы к отображению любой коллекции с помощью собственного встроенного пользовательского интерфейса и возможностей взаимодействия.ListView and GridView are controls that work out-of-the-box to display any collection, with their own built-in UI and UX. Элемент управления ItemsRepeater также используется для отображения коллекций, но он был разработан как стандартный блок для создания пользовательского элемента управления, удовлетворяющего конкретным требованиям к пользовательскому интерфейсу.The ItemsRepeater control also is used to display collections, but was created as a building block for creating a custom control that fits your exact UI needs. Ниже перечислены наиболее важные отличия, которые помогут вам выбрать элемент управления.The most important differences that should impact which control you end up using are below:

  • ListView и GridView — это элементы управления с широкими возможностями, которые почти не нуждаются в настройке, но предоставляют множество преимуществ.ListView and GridView are feature-rich controls that require little customization but offer plenty. ItemsRepeater — это стандартный блок, предназначенный для создания собственного элемента управления макетом и не обладающий такими же встроенными возможностями и функциями. Все необходимые функции или возможности взаимодействия требуется реализовать самостоятельно.ItemsRepeater is a building block to create your own layout control and does not have the same built in features and functionality - it requires you to implement any necessary features or interactions.
  • ItemsRepeater следует использовать, если у вас есть очень специализированный пользовательский интерфейс, который невозможно реализовать с помощью ListView или GridView, или если у вас есть источник данных, требующий реализации сильно отличающегося поведения для каждого элемента.ItemsRepeater should be used if you have a highly custom UI that you can’t create using ListView or GridView, or if you have a data source that requires highly different behavior for each item.

Дополнительные сведения о ItemsRepeater можно получить, прочитав руководство по этому элементу управления и документацию по API.Learn more about ItemsRepeater by reading its Guidelines and API Documentation pages.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть ListView или GridView в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see the ListView or GridView in action.

Создание ListView или GridViewCreate a ListView or GridView

Элементы управления ListView и GridView относятся к типу ItemsControl, поэтому они могут содержать коллекцию элементов любого типа.ListView and GridView are both ItemsControl types, so they can contain a collection of items of any type. Прежде чем отобразить что-то на экране, необходимо включить элементы в коллекцию Items элемента управления ListView или GridView.A ListView or GridView must have items in its Items collection before it can show anything on the screen. Для добавления элементов в представление заполните коллекцию Items напрямую или свяжите свойство ItemsSource с источником данных.To populate the view, you can add items directly to the Items collection, or set the ItemsSource property to a data source.

Важно!

Для заполнения списка можно использовать коллекции Items или ItemsSource, однако использовать обе одновременно невозможно.You can use either Items or ItemsSource to populate the list, but you can't use both at the same time. Если задано значение для свойства ItemsSource и при этом добавляется элемент в коде XAML, этот элемент игнорируется.If you set the ItemsSource property and you add an item in XAML, the added item is ignored. Если задано значение для свойства ItemsSource и при этом в коде программы добавляется элемент в коллекцию Items, возникает исключение.If you set the ItemsSource property and you add an item to the Items collection in code, an exception is thrown.

Во многих примерах в этой статье коллекция Items заполняется напрямую для упрощения.Many of the examples in this article populate the Items collection directly for the sake of simplicity. Однако в реальности элементы часто попадают в список из динамического источника, например списка книг в интернет-базе данных.However, it's more common for the items in a list to come from a dynamic source, like a list of books from an online database. Для этого используется свойство ItemsSource.You use the ItemsSource property for this purpose.

Добавление элементов в ListView или GridViewAdd Items to a ListView or GridView

Вы можете добавить элементы в коллекцию Items элемента управления ListView или GridView с помощью XAML или кода, обеспечивающего тот же результат.You can add items to the ListView or GridView's Items collection using XAML or code to yield the same result. С помощью XAML обычно добавляют небольшое количество неизменяемых элементов, которые легко задать, либо в случае, если элементы создаются на этапе выполнения кода.You typically add items through XAML if you have a small number of items that don't change and are easily defined, or if you generate the items in code at run time.

Метод 1. Добавление элементов в коллекцию ItemsMethod 1: Add items to the Items Collection

Вариант 1. Добавление элементов с помощью XAMLOption 1: Add Items through XAML

<!-- No corresponding C# code is needed for this example. -->

<ListView x:Name="Fruits"> 
   <x:String>Apricot</x:String> 
   <x:String>Banana</x:String> 
   <x:String>Cherry</x:String> 
   <x:String>Orange</x:String> 
   <x:String>Strawberry</x:String> 
</ListView>  

Вариант 2. Добавление элементов с помощью C#Option 2: Add Items through C#

Код C#:C# Code:
// Create a new ListView and add content. 
ListView Fruits = new ListView(); 
Fruits.Items.Add("Apricot"); 
Fruits.Items.Add("Banana"); 
Fruits.Items.Add("Cherry"); 
Fruits.Items.Add("Orange"); 
Fruits.Items.Add("Strawberry");
 
// Add the ListView to a parent container in the visual tree (that you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits); 
Соответствующий код XAML:Corresponding XAML Code:
<StackPanel Name="FruitsPanel"></StackPanel>

Оба приведенных выше варианта позволяют получить один и тот же элемент управления ListView, как показано ниже.Both of the above options will result in the same ListView, which is shown below:

Снимок экрана: простое представление списка со списком фруктов. Screenshot of a simple List View showing a list of fruits.
Метод 2. Добавление элементов с помощью свойства ItemsSource Method 2: Add items by setting the ItemsSource

Обычно ListView или GridView используется для отображения данных из таких источников, как база данных или Интернет.You typically use a ListView or GridView to display data from a source such as a database or the Internet. Чтобы заполнить ListView или GridView элементами из источника данных, задайте для его свойства ItemsSource коллекцию элементов данных.To populate a ListView/GridView from a data source, you set its ItemsSource property to a collection of data items. Этот метод работает лучше, если элемент управления ListView или GridView будет хранить объекты пользовательского класса, как показано в примерах ниже.This method works better if your ListView or GridView is going to hold custom class objects, as shown in the examples below.

Вариант 1. Задание свойства ItemsSource на C#Option 1: Set ItemsSource in C#

В этом коде ItemsSource для представления списка задается непосредственно экземпляру коллекции.Here, the list view's ItemsSource is set in code directly to an instance of a collection.

Код C#:C# Code:
// Class defintion should be provided within the namespace being used, outside of any other classes.

this.InitializeComponent();

// Instead of adding hard coded items to an ObservableCollection as shown below, 
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// Contact objects are created by providing a first name, last name, and company for the Contact constructor.
// They are then added to the ObservableCollection Contacts.
Contacts.Add(new Contact("John", "Doe", "ABC Printers"));
Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));

// Create a new ListView (or GridView) for the UI, add content by setting ItemsSource
ListView ContactsLV = new ListView();
ContactsLV.ItemsSource = Contacts;

// Add the ListView to a parent container in the visual tree (that you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);
Код XAML:XAML Code:
<StackPanel x:Name="ContactPanel"></StackPanel>

Вариант 2. Задание свойства ItemsSource в XAMLOption 2: Set ItemsSource in XAML

Свойство ItemsSource можно также привязать к коллекции в XAML.You can also bind the ItemsSource property to a collection in the XAML. Здесь ItemsSource привязывается к именованному открытому свойству Contacts, которое предоставляет частную коллекцию данных Пейдж, _contacts.Here, the ItemsSource is bound to a public property named Contacts that exposes the Page's private data collection, _contacts.

XAMLXAML

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>

C#C#

// Class defintion should be provided within the namespace being used, outside of any other classes.
// These two declarations belong outside of the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return this._contacts; }
}

// This method should be defined within your main page class.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Instead of hard coded items, the data could be pulled 
    // asynchronously from a database or the internet.
    Contacts.Add(new Contact("John", "Doe", "ABC Printers"));
    Contacts.Add(new Contact("Jane", "Doe", "XYZ Refridgerators"));
    Contacts.Add(new Contact("Santa", "Claus", "North Pole Toy Factory Inc."));
}

Оба приведенных выше варианта позволяют получить один и тот же элемент управления ListView, как показано ниже.Both of the above options will result in the same ListView, shown below. В ListView отображается только строковое представление каждого элемента, так как мы не указали шаблон данных.The ListView only shows the string representation of each item because we did not provide a data template.

Простое представление списка с заданным свойством ItemsSource

Важно!

Если шаблон данных не определен, то объекты пользовательского класса будут отображаться в ListView со своим строковым значением, если для них определен метод ToString().With no data template defined, custom class objects will only appear in the ListView with their string value if they have a defined ToString() method.

В следующем разделе подробно описано, как визуально представить элементы простого и пользовательского класса в ListView или GridView.The next section will go into detail on how to visually represent simple and custom class items properly in a ListView or GridView.

См.сведения о привязке данных.For more info about data binding, see Data binding overview.

Примечание

Если необходимо отобразить сгруппированные данные в ListView, то нужно выполнить привязку к CollectionViewSource.If you need to show grouped data in your ListView, you must bind to a CollectionViewSource. Элемент CollectionViewSource работает в качестве прокси для класса коллекции в XAML, обеспечивая поддержку группировки и валюты.The CollectionViewSource acts as a proxy for the collection class in XAML and enables grouping support. Дополнительные сведения см. в разделе CollectionViewSource.For more info, see CollectionViewSource.

Настройка внешнего вида элементов с помощью DataTemplateCustomizing the look of items with a DataTemplate

Шаблон данных в ListView или GridView определяет, как выглядят элементы или данные.A data template in a ListView or GridView defines how the items/data are visualized. По умолчанию элемент данных отображается в ListView в виде строки, представляющей объект данных, к которому он привязан.By default, a data item is displayed in the ListView as the string representation of the data object it's bound to. Вы можете отображать строковое представление конкретного свойства элемента данных, установив DisplayMemberPath для этого свойства.You can show the string representation of a particular property of the data item by setting the DisplayMemberPath to that property.

Как правило, хочется показать более сложно оформленное представление данных.However, you typically want to show a more rich presentation of your data. Чтобы точно определить, как должны отображаться элементы в ListView или GridView, следует создать DataTemplate.To specify exactly how items in the ListView/GridView are displayed, you create a DataTemplate. В DataTemplate с помощью XAML определяется макет и внешний вид элементов управления, используемых для отображения отдельного элемента.The XAML in the DataTemplate defines the layout and appearance of controls used to display an individual item. Элементы управления в макете могут быть привязаны к свойствам объекта данных или иметь статическое содержимое, задаваемое в коде.The controls in the layout can be bound to properties of a data object, or have static content defined inline.

Примечание

При использовании расширения разметки x:Bind в DataTemplate необходимо задать DataType (x:DataType) в DataTemplate.When you use the x:Bind markup extension in a DataTemplate, you have to specify the DataType (x:DataType) on the DataTemplate.

Простой шаблон данных ListViewSimple ListView Data Template

В этом примере элемент данных является простой строкой.In this example, the data item is a simple string. Шаблон DataTemplate определен в определении ListView, чтобы добавить изображение слева от строки и отобразить строку в сине-зеленом цвете.A DataTemplate is defined inline within the ListView definition to add an image to the left of the string, and show the string in teal. Это элемент управления ListView, который был создан с помощью метода 1 и варианта 1, описанных выше.This is the same ListView created from using Method 1 and Option 1 shown above.

XAMLXAML

<!--No corresponding C# code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14" 
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Вот как выглядят элементы данных в ListView при отображении с помощью этого шаблона данных.Here's what the data items look like when displayed with this data template in a ListView:

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

Шаблон данных ListView для объектов пользовательского классаListView Data Template for Custom Class Objects

В этом примере элемент данных является объектом Contact.In this example, the data item is a Contact object. Шаблон DataTemplate определен в определении ListView, чтобы добавить изображение контакта слева от его имени и организации.A DataTemplate is defined inline within the ListView definition to add the contact image to the left of the Contact name and company. Этот элемент управления ListView был создан с помощью метода 2 и варианта 2, описанных выше.This ListView was created by using Method 2 and Option 2 mentioned above.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0" 
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6" 
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Вот как выглядят элементы данных в ListView при отображении с помощью этого шаблона данных.Here's what the data items look like when displayed using this data template in a ListView:

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

Шаблоны данных — это основной способ определения внешнего вида ListView.Data templates are the primary way you define the look of your ListView. Они могут значительно влиять на производительность, если список содержит много элементов.They can also have a significant impact on performance if your list holds a large number of items.

Шаблон данных можно определить в определении ListView или GridView (как показано выше) или отдельно в разделе Resources.Your data template can be defined inline within the ListView/GridView definition (shown above), or separately in a Resources section. Если DataTemplate определен вне элемента управления ListView или GridView, то для него необходимо указать атрибут x:Key и назначить его свойству ItemTemplate элемента управления ListView или GridView с помощью этого ключа.If defined outside of the ListView/GridView itself, the DataTemplate must be given an x:Key attribute and be assigned to the ItemTemplate property of the ListView or GridView using that key.

Дополнительные сведения и примеры использования шаблонов данных и контейнеров элементов для определения внешнего вида элементов в списке или сетке см. в разделе Контейнеры элементов и шаблоны.For more info and examples of how to use data templates and item containers to define the look of items in your list or grid, see Item containers and templates.

Изменение макета элементовChange the layout of items

При добавлении элементов в ListView или GridView этот элемент управления автоматически переносит на следующую строку каждый элемент в контейнере, а затем располагает все контейнеры элементов.When you add items to a ListView or GridView, the control automatically wraps each item in an item container and then lays out all of the item containers. Расположение этих контейнеров зависит от свойства ItemsPanel элемента управления.How these item containers are laid out depends on the ItemsPanel of the control.

  • По умолчанию в ListView используется ItemsStackPanel, создавая вертикальный список, наподобие показанного ниже.By default, ListView uses an ItemsStackPanel, which produces a vertical list, like this.

Снимок экрана: простое представление списка со списком элементов.

  • В GridView используется ItemsWrapGrid, при этом элементы добавляются по горизонтали, переносятся на следующую строку и прокручиваются по вертикали следующим образом.GridView uses an ItemsWrapGrid, which adds items horizontally, and wraps and scrolls vertically, like this.

Простое представление сетки

Можно изменить расположение элементов, скорректировав свойства на панели элементов, или заменить панель по умолчанию другой панелью.You can modify the layout of items by adjusting properties on the items panel, or you can replace the default panel with another panel.

Примечание

Будьте внимательны, чтобы не отключить виртуализацию при изменении ItemsPanel.Be careful to not disable virtualization if you change the ItemsPanel. ItemsStackPanel и ItemsWrapGrid поддерживают виртуализацию, поэтому ими можно пользоваться безопасно.Both ItemsStackPanel and ItemsWrapGrid support virtualization, so these are safe to use. При использовании любой другой панели может отключиться виртуализация, что снизит производительность представления списка.If you use any other panel, you might disable virtualization and slow the performance of the list view. Дополнительные сведения см. в статьях о представлении списка в разделе Производительность.For more info, see the list view articles under Performance.

Этот пример показывает, как с помощью ListView расположить контейнеры элементов горизонтальным списком, изменив свойство Orientation коллекции ItemsStackPanel.This example shows how to make a ListView lay out its item containers in a horizontal list by changing the Orientation property of the ItemsStackPanel. Поскольку по умолчанию представление списка прокручивается по вертикали,потребуется также скорректировать определенные свойства внутреннего элемента ScrollViewer представления списка, чтобы настроить горизонтальную прокрутку.Because the list view scrolls vertically by default, you also need to adjust some properties on the list view’s internal ScrollViewer to make it scroll horizontally.

Важно!

Эти примеры показаны с неограниченной шириной представления списка, поэтому горизонтальные полосы прокрутки не отображаются.These examples are shown with the list view width unconstrained, so the horizontal scrollbars are not shown. Если запустить этот код, можно настроить Width="180" для отображения полос прокрутки.If you run this code, you can set Width="180" on the ListView to make the scrollbars show.

XAMLXAML

<ListView Height="60" 
          ScrollViewer.HorizontalScrollMode="Enabled" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Созданный список выглядит следующим образом.The resulting list looks like this.

Горизонтальное представление списка

В следующем примере ListView размещает элементы в вертикальном списке с переносом, используя элемент ItemsWrapGrid вместо ItemsStackPanel.In the next example, the ListView lays out items in a vertical wrapping list by using an ItemsWrapGrid instead of an ItemsStackPanel.

Важно!

Высоту представления списка необходимо ограничить, чтобы элемент управления принудительно переносил контейнеры на следующую строку.The height of the list view must be constrained to force the control to wrap the containers.

XAMLXAML

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Созданный список выглядит следующим образом.The resulting list looks like this.

Представление списка с макетом сетки

Если в представлении списка показаны группированные данные, элемент ItemsPanel определяет расположение групп элементов, а не отдельных элементов. Например, если показанная ранее горизонтальная коллекция ItemsStackPanel используется для отображения группированных данных, группы организуются по горизонтали, но элементы в каждой из них по-прежнему упорядочены по вертикали, как показано здесь.If you show grouped data in your list view, the ItemsPanel determines how the item groups are layed out, not how the individual items are layed out. For example, if the horizontal ItemsStackPanel shown previously is used to show grouped data, the groups are arranged horizontally, but the items in each group are still stacked vertically, as shown here.

Группированное горизонтальное представление списка

Выбор элементов и взаимодействиеItem selection and interaction

Можно выбрать и сделать доступными различные способы взаимодействия пользователя с представлением списка.You can choose from various ways to let a user interact with a list view. По умолчанию пользователь может выбрать один элемент.By default, a user can select a single item. Можно изменить свойство SelectionMode, чтобы разрешить выбор нескольких элементов или отключить их выбор.You can change the SelectionMode property to enable multi-selection or to disable selection. Можно задать свойство IsItemClickEnabled так, чтобы пользователь нажатием элемента вызывал действие (наподобие кнопки), а не выбирал элемент.You can set the IsItemClickEnabled property so that a user clicks an item to invoke an action (like a button) instead of selecting the item.

Примечание.   Элементы ListView и GridView используют перечисление ListViewSelectionMode для свойств SelectionMode.Note  Both ListView and GridView use the ListViewSelectionMode enumeration for their SelectionMode properties. IsItemClickEnabled по умолчанию имеет значение False, поэтому его нужно настроить, чтобы включить режим щелчка.IsItemClickEnabled is False by default, so you need to set it only to enable click mode.

В таблице показаны способы взаимодействия пользователя с представлением списка и способы реагирования на это взаимодействие.This table shows the ways a user can interact with a list view, and how you can respond to the interaction.

Чтобы включить взаимодействие, выполните следующие действия.To enable this interaction: Используйте следующие параметры:Use these settings: Обработайте следующее событие:Handle this event: Используйте это свойство, чтобы получить выбранный элемент:Use this property to get the selected item:
Без взаимодействияNo interaction SelectionMode = None, IsItemClickEnabled = FalseSelectionMode = None, IsItemClickEnabled = False Н/ДN/A Н/ДN/A
Выбор одного элементаSingle selection SelectionMode = Single, IsItemClickEnabled = FalseSelectionMode = Single, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItem, SelectedIndexSelectedItem, SelectedIndex
Выбор нескольких элементовMultiple selection SelectionMode = Multiple, IsItemClickEnabled = FalseSelectionMode = Multiple, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
Расширенный выборExtended selection SelectionMode = Extended, IsItemClickEnabled = FalseSelectionMode = Extended, IsItemClickEnabled = False SelectionChangedSelectionChanged SelectedItemsSelectedItems
ЩелкнитеClick SelectionMode = None, IsItemClickEnabled = TrueSelectionMode = None, IsItemClickEnabled = True ItemClickItemClick Н/ДN/A

Примечание.   Начиная с Windows 10, можно сделать так, чтобы свойство IsItemClickEnabled вызывало событие ItemClick, если для SelectionMode выбрано значение Single, Multiple или Extended.Note  Starting in Windows 10, you can enable IsItemClickEnabled to raise an ItemClick event while SelectionMode is also set to Single, Multiple, or Extended. В этом случае сначала вызывается событие ItemClick, а затем — SelectionChanged.If you do this, the ItemClick event is raised first, and then the SelectionChanged event is raised. В некоторых случаях, например при переходе на другую страницу в обработчике событий ItemClick, событие SelectionChanged не вызывается, элемент не выделяется.In some cases, like if you navigate to another page in the ItemClick event handler, the SelectionChanged event is not raised and the item is not selected.

Можно задать эти свойства в XAML или в коде. как показано здесь.You can set these properties in XAML or in code, as shown here.

XAMLXAML

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/> 

C#C#

myListView.SelectionMode = ListViewSelectionMode.Multiple; 

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Только для чтенияRead-only

Чтобы отключить выбор элементов, можно задать для свойства SelectionMode значение ListViewSelectionMode.None.You can set the SelectionMode property to ListViewSelectionMode.None to disable item selection. Это переведет режим управления в режим "только чтение", его можно будет использовать для отображения данных, но не для взаимодействия с ними.This puts the control in read only mode, to be used for displaying data, but not for interacting with it. Сам элемент управления не отключается, отключается только выделение элементов.The control itself is not disabled, only item selection is disabled.

Выбор одного элементаSingle selection

В этой таблице описаны взаимодействия с использованием клавиатуры, мыши и сенсорных элементов, если SectionMode имеет значение Single.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Single.

Клавиша-модификаторModifier key Тип взаимодействияInteraction
НетNone
  • Пользователь может выбрать один элемент с помощью клавиши пробела, щелчка мыши или касания.A user can select a single item using the space bar, mouse click, or touch tap.
  • CtrlCtrl
  • Пользователь может отменить выбор одного элемента с помощью клавиши пробела, щелчка мыши или касания.A user can deselect a single item using the space bar, mouse click, or touch tap.
  • С помощью клавиш со стрелками пользователь может перемещать фокус независимо от выделения.Using the arrow keys, a user can move focus independently of selection.
  • Если SelectionMode имеет значение Single, выбранный элемент данных можно получить из свойства SelectedItem.When SelectionMode is Single, you can get the selected data item from the SelectedItem property. Можно получить индекс в коллекции выбранного элемента с помощью свойства SelectedIndex.You can get the index in the collection of the selected item using the SelectedIndex property. Если элементы не выбраны, SelectedItem имеет значение null, и SelectedIndex — -1.If no item is selected, SelectedItem is null, and SelectedIndex is -1.

    Если попытаться задать элемент вне коллекции Items, например SelectedItem, операция будет проигнорирована, а SelectedItem будет равен null.If you try to set an item that is not in the Items collection as the SelectedItem, the operation is ignored and SelectedItem isnull. Однако если попытаться задать для SelectedIndex индекс вне диапазона Items в списке, произойдет исключение System.ArgumentException.However, if you try to set the SelectedIndex to an index that's out of the range of the Items in the list, a System.ArgumentException exception occurs.

    Выбор нескольких элементовMultiple selection

    В этой таблице описаны взаимодействия с использованием клавиатуры, мыши и сенсорных элементов, если SectionMode имеет значение Multiple.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Multiple.

    Клавиша-модификаторModifier key Тип взаимодействияInteraction
    НетNone
  • Пользователь может выбрать несколько элементов с помощью клавиши пробела, щелчка мыши или касания сенсорной панели, чтобы выбрать элемент в фокусе или отменить его выбор.A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • С помощью клавиш со стрелками пользователь может перемещать фокус независимо от выделения.Using the arrow keys, a user can move focus independently of selection.
  • ShiftShift
  • Пользователь может выбрать несколько смежных элементов, щелкнув первый элемент выделения (или коснувшись его), а затем — последний.A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • С помощью клавиш со стрелками пользователь может создать непрерывное выделение, начиная с выбранного с нажатой клавишей Shift элемента.Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • Расширенный выборExtended selection

    В этой таблице описаны взаимодействия с использованием клавиатуры, мыши и сенсорных элементов, если SectionMode имеет значение Extended.This table describes the keyboard, mouse, and touch interactions when SelectionMode is Extended.

    Клавиша-модификаторModifier key Тип взаимодействияInteraction
    НетNone
  • Поведение схоже с выделением Single.The behavior is the same as Single selection.
  • CtrlCtrl
  • Пользователь может выбрать несколько элементов с помощью клавиши пробела, щелчка мыши или касания сенсорной панели, чтобы выбрать элемент в фокусе или отменить его выбор.A user can select multiple items using the space bar, mouse click, or touch tap to toggle selection on the focused item.
  • С помощью клавиш со стрелками пользователь может перемещать фокус независимо от выделения.Using the arrow keys, a user can move focus independently of selection.
  • ShiftShift
  • Пользователь может выбрать несколько смежных элементов, щелкнув первый элемент выделения (или коснувшись его), а затем — последний.A user can select multiple contiguous items by clicking or tapping the first item in the selection and then the last item in the selection.
  • С помощью клавиш со стрелками пользователь может создать непрерывное выделение, начиная с выбранного с нажатой клавишей Shift элемента.Using the arrow keys, a user can create a contiguous selection starting with the item selected when Shift is pressed.
  • Если SelectionMode имеет значение Multiple или Extended, выбранные элементы данных можно получить из свойства SelectedItems.When SelectionMode is Multiple or Extended, you can get the selected data items from the SelectedItems property.

    Свойства SelectedIndex, SelectedItem и SelectedItems синхронизируются.The SelectedIndex, SelectedItem, and SelectedItems properties are synchronized. Например, если для SelectedIndex задано значение -1, SelectedItem равно null, а коллекция SelectedItems пуста; если задать для SelectedItem значение null, SelectedIndex равно -1, а SelectedItems пуст.For example, if you set SelectedIndex to -1, SelectedItem is set to null and SelectedItems is empty; if you set SelectedItem to null, SelectedIndex is set to -1 and SelectedItems is empty.

    В режиме с множественным выбором SelectedItem содержит выбранный первым элемент, а Selectedindex — индекс выбранного первым элемента.In multi-select mode, SelectedItem contains the item that was selected first, and Selectedindex contains the index of the item that was selected first.

    Реагирование на изменения выбораRespond to selection changes

    Для того, чтобы реагировать на изменения в выборе элементов представления списка, используйте событие SelectionChanged.To respond to selection changes in a list view, handle the SelectionChanged event. В коде обработчика этого события вы можете получить список выбранных элементов, используя свойство SelectionChangedEventArgs.AddedItems.In the event handler code, you can get the list of selected items from the SelectionChangedEventArgs.AddedItems property. Можно получить любые элементы, выбор которых был отменен, в свойстве SelectionChangedEventArgs.RemovedItems.You can get any items that were deselected from the SelectionChangedEventArgs.RemovedItems property. Коллекции AddedItems и RemovedItems содержат не более 1 элемента за исключением случаев, когда пользователь выбирает диапазон элементов удержанием клавиши Shift.The AddedItems and RemovedItems collections contain at most 1 item unless the user selects a range of items by holding down the Shift key.

    В этом примере показана обработка события SelectionChanged и доступ к разным коллекциям элементов.This example shows how to handle the SelectionChanged event and access the various items collections.

    XAMLXAML

    <StackPanel HorizontalAlignment="Right">
        <ListView x:Name="listView1" SelectionMode="Multiple" 
                  SelectionChanged="ListView1_SelectionChanged">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
        <TextBlock x:Name="selectedItem"/>
        <TextBlock x:Name="selectedIndex"/>
        <TextBlock x:Name="selectedItemCount"/>
        <TextBlock x:Name="addedItems"/>
        <TextBlock x:Name="removedItems"/>
    </StackPanel> 
    

    C#C#

    private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (listView1.SelectedItem != null)
        {
            selectedItem.Text = 
                "Selected item: " + listView1.SelectedItem.ToString();
        }
        else
        {
            selectedItem.Text = 
                "Selected item: null";
        }
        selectedIndex.Text = 
            "Selected index: " + listView1.SelectedIndex.ToString();
        selectedItemCount.Text = 
            "Items selected: " + listView1.SelectedItems.Count.ToString();
        addedItems.Text = 
            "Added: " + e.AddedItems.Count.ToString();
        removedItems.Text = 
            "Removed: " + e.RemovedItems.Count.ToString();
    }
    

    Режим щелчкаClick mode

    Кроме того, вы можете изменить представление списка, чтобы пользователь нажимал элементы (например, кнопки), а не выбирал их.You can change a list view so that a user clicks items like buttons instead of selecting them. Этот вариант подходит, например если ваше приложение переходит на новую страницу при нажатии пользователем элемента из списка или сетки.For example, this is useful when your app navigates to a new page when your user clicks an item in a list or grid. Включить такое поведение:To enable this behavior:

    • Задайте для SelectionMode значение None.Set SelectionMode to None.
    • Задайте для IsItemClickEnabled значение true.Set IsItemClickEnabled to true.
    • Обработайте событие ItemClick, чтобы что-то происходило, когда пользователь щелкает элемент.Handle the ItemClick event to do something when your user clicks an item.

    Вот пример представления списка с нажимаемыми элементами.Here's a list view with clickable items. Код в обработчике события ItemClick переходит на новую страницу.The code in the ItemClick event handler navigates to a new page.

    XAMLXAML

    <ListView SelectionMode="None"
              IsItemClickEnabled="True" 
              ItemClick="ListView1_ItemClick">
        <x:String>Page 1</x:String>
        <x:String>Page 2</x:String>
        <x:String>Page 3</x:String>
        <x:String>Page 4</x:String>
        <x:String>Page 5</x:String>
    </ListView>
    

    C#C#

    private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
    {
        switch (e.ClickedItem.ToString())
        {
            case "Page 1":
                this.Frame.Navigate(typeof(Page1));
                break;
    
            case "Page 2":
                this.Frame.Navigate(typeof(Page2));
                break;
    
            case "Page 3":
                this.Frame.Navigate(typeof(Page3));
                break;
    
            case "Page 4":
                this.Frame.Navigate(typeof(Page4));
                break;
    
            case "Page 5":
                this.Frame.Navigate(typeof(Page5));
                break;
    
            default:
                break;
        }
    }
    

    Программный выбор диапазона элементовSelect a range of items programmatically

    Иногда необходимо наладить программное управление выбором элементов в представлении списка.Sometimes, you need to manipulate a list view’s item selection programmatically. Например, возможно, вы используете кнопку Выбрать все, чтобы пользователь мог выбрать все элементы в списке.For example, you might have a Select all button to let a user select all items in a list. В этом случае добавлять и удалять элементы из коллекции SelectedItems по одному не очень целесообразно.In this case, it’s usually not very efficient to add and remove items from the SelectedItems collection one by one. Каждое изменение элемента вызывает событие SelectionChanged, а если работать с элементами напрямую, а не со значениями индекса, элемент девиртуализуется.Each item change causes a SelectionChanged event to occur, and when you work with the items directly instead of working with index values, the item is de-virtualized.

    Методы SelectAll, SelectRange и DeselectRange предоставляют более эффективный способ изменения выделения, чем использование свойства SelectedItems.The SelectAll, SelectRange, and DeselectRange methods provide a more efficient way to modify the selection than using the SelectedItems property. Эти методы осуществляют выделение или отмену выделения с помощью диапазонов индексов элементов.These methods select or deselect using ranges of item indexes. Виртуализованные элементы остаются виртуализованными, поскольку используется только индекс.Items that are virtualized remain virtualized, because only the index is used. Все элементы в определенном диапазоне выделены (или их выделение снято) вне зависимости от начального состояния выбора.All items in the specified range are selected (or deselected), regardless of their original selection state. Событие SelectionChanged происходит однократно для каждого вызова этих методов.The SelectionChanged event occurs only once for each call to these methods.

    Важно!

    Необходимо вызывать эти методы, только когда для свойства SelectionMode задано значение Multiple или Extended.You should call these methods only when the SelectionMode property is set to Multiple or Extended. Если вызвать SelectRange, когда SelectionMode имеет значение Single или None, создается исключение.If you call SelectRange when the SelectionMode is Single or None, an exception is thrown.

    При выборе элементов с использованием диапазонов индексов используйте свойство SelectedRanges, чтобы получить все выбранные диапазоны в списке.When you select items using index ranges, use the SelectedRanges property to get all selected ranges in the list.

    Если ItemsSource реализует IItemsRangeInfo и вы используете эти методы, чтобы изменить выделение, свойства AddedItems и RemovedItems не задаются в элементе SelectionChangedEventArgs.If the ItemsSource implements IItemsRangeInfo, and you use these methods to modify the selection, the AddedItems and RemovedItems properties are not set in the SelectionChangedEventArgs. Настройка этих свойств требует отмены виртуализации объекта элемента.Setting these properties requires de-virtualizing the item object. Для получения элементов используйте свойство SelectedRanges.Use the SelectedRanges property to get the items instead.

    Для выделения всех элементов коллекции вызовите метод SelectAll.You can select all items in a collection by calling the SelectAll method. Однако метод для отмены выделения всех элементов отсутствует.However, there is no corresponding method to deselect all items. Можно отменить выбор всех элементов, вызвав DeselectRange и передав ItemIndexRange со свойством FirstIndex, значение которого равно 0, и значением Length, равным числу элементов в коллекции.You can deselect all items by calling DeselectRange and passing an ItemIndexRange with a FirstIndex value of 0 and a Length value equal to the number of items in the collection. Это показано в приведенном ниже примере, включая возможность выбора всех элементов.This is shown in the example below, along with an option to select all items.

    XAMLXAML

    <StackPanel Width="160">
        <Button Content="Select all" Click="SelectAllButton_Click"/>
        <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
        <ListView x:Name="listView1" SelectionMode="Multiple">
            <x:String>Apricot</x:String>
            <x:String>Banana</x:String>
            <x:String>Cherry</x:String>
            <x:String>Orange</x:String>
            <x:String>Strawberry</x:String>
        </ListView>
    </StackPanel>
    

    C#C#

    private void SelectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.SelectAll();
        }
    }
    
    private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
    {
        if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
            listView1.SelectionMode == ListViewSelectionMode.Extended)
        {
            listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
        }
    }
    

    Сведения о порядке изменения внешнего вида выбранных элементов см. в разделе Контейнеры и шаблоны элементов.For info about how to change the look of selected items, see Item containers and templates.

    ПеретаскиваниеDrag and drop

    Элементы управления ListView и GridView поддерживают перетаскивание элементов внутри данного элемента управления, а также между данным и другими элементами управления ListView и GridView.ListView and GridView controls support drag and drop of items within themselves, and between themselves and other ListView and GridView controls. Подробнее о реализации шаблона перетаскивания см. в разделе Перетаскивание.For more info about implementing the drag and drop pattern, see Drag and drop.

    Получение примера кодаGet the sample code