ItemsPanel. Установка панели элементов

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

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

Дело в том, что такие элементы как ListBox и ListView по умолчанию инкапсулируют все элементы списка в специальную панель VirtualizingStackPanel, которая располагает все элементы по вертикали. Но с помощью свойства ItemsPanel можно переопределить панель элементов в внутри списка.

Например, в ситуации выше было бы более эффективно использовать панель WrapPanel:

<Window x:Class="DataApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="listTemplate">
            <StackPanel Margin="5">
                <Image Width="100" Height="75" Source="{Binding Path=ImagePath}" />
                <TextBlock FontSize="16" Text="{Binding Path=Title}" HorizontalAlignment="Center" />
                <TextBlock FontSize="16" Text="{Binding Path=Company}" HorizontalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox x:Name="phonesList" ItemTemplate="{StaticResource listTemplate}"  
                 SelectionChanged="phonesList_SelectionChanged" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

Для установки панели применяется элемент ItemsPanelTemplate, который собственно и устанавливает нужную нам панель. И также в данном случае с помощью свойства ScrollViewer.HorizontalScrollBarVisibility="Disabled" убирается горизонтальная прокрутка, чтобы она нам не мешала. В итоге окно приложения будет выглядеть следующим образом:

И также, как и в случае с шаблонами данных, шаблон панели мы также можем вынести во внешний ресурс и затем этот ресурс подключать:

<Window x:Class="DataApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="listTemplate">
            <StackPanel Margin="5">
                <Image Width="100" Height="75" Source="{Binding Path=ImagePath}" />
                <TextBlock FontSize="16" Text="{Binding Path=Title}" HorizontalAlignment="Center" />
                <TextBlock FontSize="16" Text="{Binding Path=Company}" HorizontalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="listPanelTemplate">
            <WrapPanel />
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid>
        <ListBox x:Name="phonesList" 
                 ItemTemplate="{StaticResource listTemplate}" 
                 ItemsPanel="{StaticResource listPanelTemplate}"
                 SelectionChanged="phonesList_SelectionChanged" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
    </Grid>
</Window>