WPF: ListBox с WrapPanel, проблема вертикальной прокрутки - PullRequest
Новая
       38

WPF: ListBox с WrapPanel, проблема вертикальной прокрутки

23 голосов
/ 04 мая 2009

У меня есть UserControl (XAML ниже), у которого есть ListBox, который я хочу отображать изображения внутри WrapPanel, где изображения отображаются столько раз, сколько уместится в одну строку, а затем переносятся на следующую строку и т. Д. Это работает, кроме когда ListBox становится больше, чем доступное пространство в окне, я не получаю вертикальную полосу прокрутки, то есть содержимое обрезается. Если я установил фиксированную высоту в ListBox, полоса прокрутки появляется и работает, как ожидалось. Как сделать так, чтобы этот список увеличивался до доступного пространства, а затем отображал вертикальную полосу прокрутки? Этот элемент управления находится внутри StackPanel внутри Grid в главном окне. Если я оберну StackPanel внутри ScrollViewer, я получу полосу прокрутки, которая мне нужна, но это не очень хорошее решение, если я хочу добавить еще несколько элементов управления в UserControl над ListBox (например, размер изображения "zoom" и т. Д.), Как я не хотел бы, чтобы они прокручивали изображения.

Спасибо !! :) 

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

Ответы [ 5 ]

19 голосов
/ 07 февраля 2013

Я думаю, вам лучше переопределить 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>

15 голосов
/ 11 мая 2009

Ну, я наконец наткнулся на решение. Я добавил свой UserControl на панель заполнителей, которая выглядела так: 

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

Однако, когда я переключил его на сетку, все стало работать так, как я хотел: 

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

Я думаю, что это связано с тем, что StackPanel не занимает все вертикальное пространство по умолчанию, как Grid.

6 голосов
/ 02 декабря 2013

Все, что мне нужно было сделать, это установить следующее, и проблема исчезла: 

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
2 голосов
/ 23 сентября 2013

Я просто просматривал несколько вопросов по этой проблеме, и хотя это старая ветка, эта дала мне ответ, но только для пояснения ....

Макет GRID является ответом на большинство подобных вопросов. Чтобы получить правильную операцию ListBox / WrapPanel для заполнения доступного пространства, используйте следующий код: 

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

У меня есть это в другой сетке, чтобы поместить список внизу моего экрана (то есть .. Grid.Row = "1"), и вы можете настроить MaxHeight (или удалить его), чтобы контролировать видимую область перед вертикалью появится полоса прокрутки.

1 голос
/ 04 мая 2009

Поместите свой список внутри ScrollViewer, а затем установите свойство VerticalScrollBarVisibility скроллвера на «Авто» 

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


НТН

...