ItemsControl, VirtualizingStackPanel и высота ScrollViewer
-
21-09-2019 - |
Вопрос
Я хочу отобразить важный список элементов с помощью ItemsControl.
Причина, по которой я использую ItemsControl, заключается в том, что DataTemplate в приложении, над которым я работаю, намного сложнее:Предоставленный пример кода отражает только мою проблему с размером.
Я хотел бы :
- ItemsControl необходимо виртуализировать, поскольку необходимо отображать много элементов
его размер автоматически расширяется до родительского контейнера (Grid)
<Grid> <ItemsControl x:Name="My" ItemsSource="{Binding Path=Names}"> <ItemsControl.Template> <ControlTemplate> <StackPanel> <StackPanel> <TextBlock Text="this is a title" FontSize="15" /> <TextBlock Text="This is a description" /> </StackPanel> <ScrollViewer CanContentScroll="True" Height="400px"> <VirtualizingStackPanel IsItemsHost="True" /> </ScrollViewer> </StackPanel> </ControlTemplate> </ItemsControl.Template> <ItemsControl.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid>
Код:
public partial class Page1: Page
{
public List<string> Names { get; set; }
public Page1()
{
InitializeComponent();
Names = new List<string>();
for(int i = 0; i < 10000; i++)
Names.Add("Name : " + i);
My.DataContext = this;
}
}
Когда я увеличиваю высоту ScrollViewer до 400 пикселей, виртуализация ItemsControl работает так, как я ожидал:ItemsControl отображает список очень быстро, независимо от того, сколько элементов он содержит.
Однако, если я удалю Height="400px", список увеличит свою высоту, чтобы отобразить весь список, независимо от высоты его родительского контейнера.Худший:кажется позади его контейнер.
Размещение средства просмотра прокрутки вокруг ItemsControl дает ожидаемый визуальный результат, но виртуализация исчезает, и отображение списка занимает слишком много времени.
Как я могу добиться как автоматического увеличения высоты, так и виртуализации моего ItemsControl?
Решение
Проблема в ItemsControl.Template:вы используете там StackPanel, который дает ее детям столько высоты, сколько они хотят.Замените его на что-то вроде
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel>
<TextBlock Text="this is a title" FontSize="15" />
<TextBlock Text="This is a description" />
</StackPanel>
<ScrollViewer CanContentScroll="True" Grid.Row="1">
<VirtualizingStackPanel />
</ScrollViewer>
</Grid>
И это должно работать нормально.
Надеюсь, поможет.