WPF: ListBox avec WrapPanel, problème de défilement vertical

Question

J'ai un UserControl (XAML ci-dessous) qui a un ListBox que je veux afficher des images dans un WrapPanel, où les images sont affichées autant qu'elles peuvent tenir sur une rangée, puis se placer sur la rangée suivante, etc. Cela fonctionne, sauf Lorsque le contrôle ListBox devient supérieur à l'espace disponible dans la fenêtre, je ne reçois pas de barre de défilement verticale, c'est-à-dire que le contenu est tronqué. Si je définit une hauteur fixe sur le contrôle ListBox, la barre de défilement apparaît et fonctionne comme prévu. Comment puis-je faire en sorte que cette zone de liste atteigne l'espace disponible, puis affiche une barre de défilement verticale? Ce contrôle se trouve dans StackPanel dans une grille dans la fenêtre principale. Si j'emballe le StackPanel dans un ScrollViewer, la barre de défilement que je cherche me convient, mais ce n'est pas vraiment une bonne solution si je veux ajouter quelques contrôles supplémentaires à UserControl au-dessus du ListBox (par exemple, la taille de l'image, le zoom, etc.) Je ne voudrais pas qu'ils défilent avec les images.

Merci !! :)

<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

Eh bien, je suis finalement tombé sur la solution. J'ajoutais mon UserControl à un panneau d'espace réservé ressemblant à ceci:

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

Cependant, lorsque je l'ai basculé vers une grille, les choses ont commencé à fonctionner comme je le voulais:

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

Je pense que cela a à voir avec le fait que StackPanel n'occupe pas tout l'espace vertical par défaut, comme le fait la grille.

Answer 2

Je pense que vous feriez mieux de passer outre le 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

Tout ce que je devais faire était de régler le problème suivant et le problème a disparu:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 4

Je parcourais plusieurs questions à propos de cette question et, même s’il s’agit d’un vieux fil, celui-ci m’a donné la réponse, mais je tiens à préciser ....

La grille de présentation est la réponse à la plupart des problèmes de ce type. Pour que l'opération ListBox / WrapPanel appropriée remplisse l'espace disponible, utilisez le code suivant:

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

J'ai ceci dans une autre grille pour placer la liste au bas de mon écran (c'est-à-dire .. le Grid.Row = "1") et vous pouvez ajuster MaxHeight (ou le supprimer) pour contrôler la zone visible avant la barre de défilement verticale apparaîtra.

Answer 5

Placez votre zone de liste dans un objet ScrollViewer, puis définissez la propriété VerticalScrollBarVisibility du visualiseur de défilement sur "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