The horizontal orientation of the WrapPanel in the ItemsControl elements vertically

Question

I have two DataTemplates defined in my XAML, each of which is used for a separate ItemsControl.

The main ItemsControl lists Foo objects stored in the ObservableCollection.

The Foo object itself has its own set of elements stored as an ObservableCollection object.

I tried to define XAML so that each ObservableCollection Foo element displayed with its name in the header (the first ItemsControl element). From this list, inside each element, Foo should be displayed horizontally (using the second ItemsControl) with the corresponding field immediately below. If there are enough items, they should, if necessary, be carried over to the next line.

Here's what the user interface looks like:

This is how I want the interface to actually display:

My markup (control buttons for another aspect of the user interface):

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <ItemsControl x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" /> </ScrollViewer> <StackPanel Grid.Column="1" Background="DarkGray"> <Button Click="OnLoad">_Load</Button> <Button Click="OnSave">_Save</Button> <Button Click="OnAdd">_Add</Button> <Button Click="OnDelete">_Delete</Button> </StackPanel> </Grid> 

DataTemplate for listing Foo elements:

 <DataTemplate x:Key="GameTemplate"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" /> <ItemsControl x:Name="imageContent" ItemsSource="{Binding FileList}" ItemTemplate="{StaticResource GameImagesTemplate}" Grid.Row="1" /> </Grid> </DataTemplate> 

DataTemplate for listing the elements in each Foo element:

 <DataTemplate x:Key="GameImagesTemplate"> <WrapPanel Orientation="Horizontal"> <StackPanel Orientation="Vertical" > <Image Source="{Binding FileInfo.FullName}" Margin="8,8,8,8" Height="70" Width="70" /> <Label Content="{Binding Name}" /> </StackPanel> </WrapPanel> </DataTemplate> 

I am new to WPF, so I have a feeling caused by the way I use the controls.

What WPF changes will I need to make to create the user interface I need?

Answer 1

I think this is because you add each image element to a new WrapPanel in GameImagesTemplate , you just need to set ItemsControl ItemsPanelTemplate in WrapPanel in GameTemplate

Example:

Xaml:

 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="252.351" Width="403.213" Name="UI" > <Window.Resources> <DataTemplate x:Key="GameImagesTemplate" > <StackPanel> <Image Source="{Binding FileInfo.FullName}" Margin="8,8,8,8" Height="70" Width="70" /> <Label Content="{Binding Name}" /> </StackPanel> </DataTemplate> <DataTemplate x:Key="GameTemplate"> <StackPanel> <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" /> <ItemsControl x:Name="imageContent" ItemsSource="{Binding FileList}" ItemTemplate="{StaticResource GameImagesTemplate}" > <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </StackPanel> </DataTemplate> </Window.Resources> <Grid> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"> <ItemsControl ItemsSource="{Binding ElementName=UI, Path=FileList}" Grid.Column="0" ItemTemplate="{StaticResource GameTemplate}" /> </ScrollViewer> </Grid> </Window> 

the code:

 public partial class MainWindow : Window { private ObservableCollection<Foo> _fileList = new ObservableCollection<Foo>(); public MainWindow() { InitializeComponent(); foreach (var item in Directory.GetDirectories(@"C:\StackOverflow")) { FileList.Add(new Foo { Name = item, FileList = new ObservableCollection<Bar>(Directory.GetFiles(item).Select(x => new Bar { FileInfo = new FileInfo(x) })) }); } } public ObservableCollection<Foo> FileList { get { return _fileList; } set { _fileList = value; } } } public class Foo { public string Name { get; set; } public ObservableCollection<Bar> FileList { get; set; } } public class Bar { public FileInfo FileInfo { get; set; } } 

Result