ListView

ListView отображает информацию на множестве строк и столбцов. Он унаследован от класса ListBox, поэтому может вести себя простой список:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	
        <TextBlock Text="{Binding ElementName=phonesList, Path=SelectedItem}" FontWeight="Bold" />
		
        <ListView x:Name="phonesList">
            <x:String>LG G6</x:String>
            <x:String>Huawei P10</x:String>
            <x:String>Alcatel Idol S4</x:String>
            <x:String>Samsung Galaxy S8</x:String>
            <x:String>Nokia 6</x:String>
            <x:String>iPhone 7</x:String>
        </ListView>
    </StackPanel>
</Page>

Однако, как правило, ListView применяется для отображения сложных по структуре данных. Например, пусть у нас в проекте есть класс Phone:

public class Phone
{
    public string Title { get; set; }
    public string Company { get; set; }
    public int Price { get; set; }
}

И определим код XAML, который будет отображать данные данного типа:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="{Binding ElementName=phonesList, Path=SelectedItem.Title}" FontWeight="Bold" />
        <ListView Name="phonesList">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Title}" Grid.Column="0" />
                        <TextBlock Text="{Binding Company}" Grid.Column="1" />
                        <TextBlock Text="{Binding Price}" Grid.Column="2" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.Items>
                <local:Phone Title="iPhone 7" Company="Apple" Price="49990" />
                <local:Phone Title="Samsung Galaxy S8" Company="Samsung" Price="49990" />
                <local:Phone Title="Huawei P10" Company="Huawei" Price="29990" />
            </ListView.Items>
        </ListView>
    </StackPanel>
</Page>

В данном случае для отображения коллекции сложных объектов необходимо настроить шаблон данных, который определяется свойством ItemTemplate. В качестве параметра он принимает объект DataTemplate, который устанавливает шаблон списка в виде грида или таблицы. В этой таблице три столбца. Для каждого столбца определяется элемент TextBlock, который с помощью выражения {Binding Свойство} привязывается к определенному свойству объекта Phone.

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

Установка панели ListView

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

<ListView x:Name="phonesList"
	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>LG G6</x:String>
    <x:String>Huawei P10</x:String>
    <x:String>Alcatel Idol S4</x:String>
    <x:String>Samsung Galaxy S8</x:String>
    <x:String>Nokia 6</x:String>
    <x:String>iPhone 7</x:String>
</ListView>

Для установки панели элементов у всех списоков элементов управления определено свойство ItemsPanel. Оно принимает в качестве значения объект ItemsPanelTemplate, который указывает на панель элементов. В данном случае используется горизонтальная панель ItemsStackPanel. Но мы можем использовать и другие панели. Например, используем панель ItemsWrapGrid, которая располагает элементы друг за другом, заполняя все пространство ListView.

<ListView Height="100"
    ScrollViewer.HorizontalScrollMode="Enabled" 
    ScrollViewer.HorizontalScrollBarVisibility="Auto">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
            
    <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>