WPF: ListBox com WrapPanel, problema de rolagem vertical

Question

Eu tenho um UserControl (XAML abaixo) que tem uma caixa de listagem que eu quero exibir imagens dentro de um WrapPanel, onde as imagens são exibidas como muitos como vai caber em uma linha e em seguida, enrole para a próxima linha etc. Ele funciona, exceto quando o ListBox cresce mais alto do que o espaço disponível na janela, eu não estou recebendo uma barra de rolagem vertical, ou seja, os conteúdos se cortado. Se eu definir uma altura fixa na caixa de listagem, aparece barra de rolagem e funciona como esperado. Como posso obter esta caixa de listagem a crescer com o espaço disponível e, em seguida, mostrar uma barra de rolagem vertical? Este controlo está dentro StackPanel dentro de uma grade na janela principal. Se eu quebrar o StackPanel dentro de um ScrollViewer, fico com a barra de rolagem que eu estou atrás, mas isso não é realmente uma boa solução se eu queria adicionar mais alguns controles para o UserControl acima da caixa de listagem (por exemplo, tamanho da imagem "zoom" etc), como eu não quero que eles rolagem com as imagens.

Graças !! :)

<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

Bem, eu finalmente deparei com a solução. Eu estava adicionando meu UserControl a um painel de espaço reservado que ficou assim:

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

No entanto, quando eu mudei-o para uma grade em vez disso, as coisas começaram a funcionar da maneira que eu queria:

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

Eu acho que tem a ver com o StackPanel não ocupar todo o espaço vertical por padrão, como a grade está fazendo.

Answer 2

Eu acho que é melhor você ir com substituição do 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

Tudo que eu tinha que fazer era definir o seguinte, eo problema foi embora:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 4

Eu estava apenas olhando através de várias perguntas sobre esta questão, e embora este é uma discussão antiga, este deu-me a resposta, mas apenas para esclarecer ....

O GRID layout é a resposta para a maioria das questões como esta. Para obter a listagem adequada / operação WrapPanel para preencher o espaço disponível, o código a seguir faz o truque:

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

Eu tenho isso em outra grade para colocar a lista na parte inferior da tela do meu (ou seja .. o Grid.Row = "1") e você pode ajustar MaxHeight (ou remover) para controlar a área visível antes da vertical barra de rolagem vai aparecer.

Answer 5

Coloque seu interior caixa de listagem de um ScrollViewer e defina propriedade VerticalScrollBarVisibility do scrollviewer para "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