ItemsControl,VirtualizingStackPanel和ScrollViewer的高度 [英] ItemsControl, VirtualizingStackPanel and ScrollViewer height
问题描述
我想使用ItemsControl显示重要的项目列表.
I want to display a important list of items using an ItemsControl.
我使用ItemsControl的原因是,我正在处理的应用程序中的DataTemplate更加复杂:提供的示例代码仅反映了我的大小调整问题.
The reason why I'm using an ItemsControl is that the DataTemplate is much more complex in the application I'm working on: The sample code provided only reflects the sizing problem I have.
我想要:
- 要虚拟化的ItemsControl,因为要显示很多项目
-
其大小自动扩展到其父容器(网格)
- the ItemsControl to be virtualized because there is many items to display
its size to expand to its parent container automatically (the 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的高度设置为400px时,ItemsControl虚拟化将按我的预期进行:ItemsControl非常快速地显示列表,而不管其包含多少个项目.
As I force the ScrollViewer height to 400px, ItemsControl virtualization works as I expect: The ItemsControl displays the list very quickly, regardless of how many items it contains.
但是,如果我删除Height ="400px",则列表将扩展其高度以显示整个列表,而不管其父容器的高度如何.更糟:它出现在容器的后面.
However, if I remove Height="400px", the list will expand its height to display the whole list, regardless its parent container height. Worse: it appears behind its container.
在ItemsControl周围放置滚动查看器可提供预期的视觉效果,但是虚拟化消失了,列表显示时间太长.
Putting a scrollviewer around the ItemsControl gives the expected visual result, but the virtualization goes away and the list takes too much time to display.
如何实现ItemsControl的自动高度扩展和虚拟化?
How can I achieve both automatic height expansion and virtualization of my ItemsControl ?
推荐答案
问题出在ItemsControl.Template中:您在此处使用StackPanel,它可以为孩子提供足够的身高.将其替换为类似的
The problem is in the ItemsControl.Template: you use StackPanel there, which gives her children as much height as they want. Replace it to something like
<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>
它应该可以正常工作.
希望有帮助.
这篇关于ItemsControl,VirtualizingStackPanel和ScrollViewer的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!