WPF Wrappanel in Listbox

I want to display several images in a vertical scrolling list, but these images are subdivided into several groups that must be distiguishable by the user. To achive this, I use a ListView which items contain a WrapPanel, which contains the single images:

<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="Binding Groupname" />
<ListBox ItemsSource="Binding Images" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="Binding Thumb" />
<Label Content="Binding Res" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


What I get is:

Current result - wrong

but what I want to achive is:

Thats what I want

That is to say I dont want any horizontal Scollbars at all, and the groups clearly must be separated. On the other hand, when sizing the window, the images within one group must wrap to fill all available space.

1 Answer
1

Just also disable the horizontal ScrollBar of the inner ListBox, and set Stretch="None" on the Image element.

Stretch="None"

<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="Binding Groupname"/>
<ListBox ItemsSource="Binding Images"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="Binding Thumb" Stretch="None"/>
<Label Content="Binding Res"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.