WPF:ListBox с WrapPanel, проблема с вертикальной прокруткой
Вопрос
У меня есть UserControl (XAML ниже), в котором есть ListBox, в котором я хочу отображать изображения внутри WrapPanel, где изображений отображается столько, сколько поместится в одной строке, а затем переносится в следующую строку и т.д.Это работает, за исключением случаев, когда поле списка увеличивается выше, чем доступное пространство в окне, я не получаю вертикальную полосу прокрутки, т. е.содержимое обрезается.Если я установлю фиксированную высоту в списке, появится полоса прокрутки, которая работает должным образом.Как я могу заставить это поле списка увеличиться до доступного места, а затем отобразить вертикальную полосу прокрутки?Этот элемент управления находится внутри StackPanel внутри сетки в главном окне.Если я оберну 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>
Решение 2
Что ж, я наконец-то наткнулся на решение.Я добавлял свой UserControl на панель-заполнитель, которая выглядела следующим образом:
<ScrollViewer Margin="20" >
<StackPanel Name="contentPanel"></StackPanel>
</ScrollViewer>
Однако, когда я вместо этого переключил его на Сетку, все начало работать так, как я хотел:
<Grid Name="contentPanel" Margin="20" />
Я думаю, это связано с тем, что StackPanel по умолчанию не занимает всего вертикального пространства, как это делает Grid.
Другие советы
Я думаю, вам лучше переопределить 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>
Все, что мне нужно было сделать, это установить следующее, и проблема исчезла:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Я просто просматривал несколько вопросов по этой проблеме, и хотя это старая тема, эта дала мне ответ, но просто для ясности....
Сетка компоновки - это ответ на большинство подобных вопросов.Чтобы получить правильную операцию 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>
У меня есть это в другой сетке, чтобы разместить список в нижней части моего экрана (т.Е..сетка.Строка="1"), и вы можете настроить максимальную высоту (или удалить ее), чтобы управлять видимой областью до того, как появится вертикальная полоса прокрутки.
Поместите свой список внутри ScrollViewer, а затем установите для свойства VerticalScrollBarVisibility scrollviewer значение "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