WPF: ListBox con WrapPanel, problema de desplazamiento vertical

scrollbar

Question

Tengo un UserControl (XAML a continuación) que tiene un ListBox que quiero mostrar imágenes dentro de un WrapPanel, donde se muestran las imágenes que caben en una fila y luego se ajustan a la siguiente fila, etc. Funciona, excepto cuando el cuadro de lista crece más alto que el espacio disponible en la ventana, no obtengo una barra de desplazamiento vertical, es decir, el contenido se recorta. Si configuro una altura fija en el ListBox, la barra de desplazamiento aparece y funciona como se esperaba. ¿Cómo puedo hacer que este cuadro de lista crezca hasta el espacio disponible y luego muestre una barra de desplazamiento vertical? Este control está dentro de StackPanel dentro de una cuadrícula en la ventana principal. Si envuelvo el StackPanel dentro de un ScrollViewer, obtengo la barra de desplazamiento que busco, pero esa no es realmente una buena solución si quisiera agregar algunos controles más al UserControl sobre el ListBox (por ejemplo, tamaño de imagen "zoom", etc.) No querría que se desplazaran con las imágenes.

¡¡Gracias!! :)

<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>

Answer 1

Bueno, finalmente me encontré con la solución. Estaba agregando mi UserControl a un panel de marcador de posición que se veía así:

 <ScrollViewer Margin="20" >
<StackPanel Name="contentPanel"></StackPanel>
</ScrollViewer>

Sin embargo, cuando lo cambié a una cuadrícula, las cosas empezaron a funcionar como yo quería:

<Grid Name="contentPanel" Margin="20" />

Creo que tiene que ver con que StackPanel no ocupa todo el espacio vertical de forma predeterminada, como lo hace Grid.

Answer 2

Coloque su cuadro de lista dentro de un ScrollViewer y luego configure la propiedad VerticalScrollBarVisibility del scrollviewer en "Auto"

 <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" >
<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>
</ScrollViewer>

HTH

Answer 3

Creo que es mejor que vayas con el reemplazo de 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>

Answer 4

Solo estaba revisando varias preguntas sobre este tema, y ​​aunque este es un hilo antiguo, este me dio la respuesta, pero solo para aclarar ...

El diseño de GRID es la respuesta a la mayoría de los problemas como este. Para obtener la operación correcta de ListBox / WrapPanel para llenar el espacio disponible, el siguiente código hace el truco:

 <Grid Grid.Row="1" MaxHeight="105">
<ListBox ItemTemplate="{DynamicResource StoreGroupTemplate01}" ItemsSource="{Binding StoreGroupHeader}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>

Tengo esto en otra cuadrícula para colocar la lista en la parte inferior de mi pantalla (es decir, la cuadrícula.Row = "1") y puede ajustar MaxHeight (o eliminarlo) para controlar el área visible antes de que la barra de desplazamiento vertical aparecer.

Answer 5

Todo lo que tenía que hacer era configurar lo siguiente, y el problema desapareció:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">