I have a UserControl (XAML below) that has a ListBox that I want to display images inside a WrapPanel, where images are displayed as many as will fit on one row and then wrap onto the next row etc. It works, except when the ListBox grows higher than the available space in the window, I'm not getting a vertical scrollbar, i.e. the contents get clipped. If I set a fixed height on the ListBox, the scrollbar appears and works as expected. How can I get this listbox to grow to the available space and then show a vertical scrollbar? This control is inside StackPanel inside a Grid in the main window. If I wrap the StackPanel inside a ScrollViewer, I get the scrollbar I'm after, but that's not really a good solution if I wanted to add some more controls to the UserControl above the ListBox (e.g. image size "zoom" etc) as I wouldn't want them to scroll with the images.
Thanks!! :)
<UserControl x:Class="GalleryAdmin.UI.GalleryView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="LightGray" Margin="5" >
<StackPanel Margin="5">
<Image Source="{Binding Path=LocalThumbPath}" Height="100" />
<TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I think you better go with override the ItemPanelTemplate:
<Grid>
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>listbox item 1</ListBoxItem>
<ListBoxItem>listbox item 2</ListBoxItem>
<ListBoxItem>listbox item 3</ListBoxItem>
<ListBoxItem>listbox item 4</ListBoxItem>
<ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>