WPF: ListBox con WrapPanel, problema di scorrimento verticale

Question

Ho un UserControl (XAML di seguito) che ha un ListBox che voglio visualizzare le immagini all'interno di un WrapPanel, in cui le immagini vengono visualizzate quante ne entrano in una riga e quindi si avvolgono nella riga successiva ecc. Funziona, tranne quando ListBox diventa più grande dello spazio disponibile nella finestra, non ottengo una barra di scorrimento verticale, ovvero il contenuto viene troncato. Se imposto un'altezza fissa su ListBox, la barra di scorrimento viene visualizzata e funziona come previsto. Come posso fare in modo che questa casella di riepilogo cresca nello spazio disponibile e poi mostri una barra di scorrimento verticale? Questo controllo è all'interno di StackPanel all'interno di una griglia nella finestra principale. Se avvolgo StackPanel all'interno di ScrollViewer, ottengo la barra di scorrimento che sto cercando, ma non è davvero una buona soluzione se volessi aggiungere altri controlli a UserControl sopra ListBox (ad es. Dimensioni dell'immagine & zoom; " ecc) come Non vorrei che scorressero con le immagini.

Grazie !! :)

<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

Bene, alla fine mi sono imbattuto nella soluzione. Stavo aggiungendo il mio UserControl a un pannello segnaposto che sembrava così:

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

Tuttavia, quando invece sono passato a una griglia, le cose hanno iniziato a funzionare come volevo:

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

Penso che abbia a che fare con StackPanel che non occupa tutto lo spazio verticale per impostazione predefinita, come sta facendo la griglia.

Answer 2

Penso che farai meglio a sostituire 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 3

Tutto quello che dovevo fare era impostare quanto segue e il problema è scomparso:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 4

Stavo solo esaminando diverse domande su questo problema, e sebbene si tratti di un vecchio thread, questo mi ha dato la risposta, ma solo per chiarire ....

Il layout GRID è la risposta alla maggior parte dei problemi come questo. Per ottenere l'operazione ListBox / WrapPanel corretta per riempire lo spazio disponibile, il codice seguente fa il trucco:

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

Ho questo in un'altra griglia per posizionare l'elenco nella parte inferiore del mio schermo (cioè .. Grid.Row = " 1 ") e puoi regolare MaxHeight (o rimuoverlo) per controllare l'area visibile prima che il verrà visualizzata la barra di scorrimento verticale.

Answer 5

Metti la tua casella di riepilogo all'interno di ScrollViewer e quindi imposta la proprietà VerticalScrollBarVisibility dello scrollviewer su " 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