我写了一个小应用程序来显示一些图像。为此,我使用了UniformGrid
。我的xaml
-代码:
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Images}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Name="unifomGrid" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" VirtualizingPanel.IsVirtualizingWhenGrouping="True" IsItemsHost="True" Loaded="unifomGrid_Loaded" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Card Padding="32px" Margin="8px">
<StackPanel>
<StackPanel>
<Image Source="{Binding Path, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</materialDesign:Card>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
结果看起来像这样:
我的问题是
UniformGrid
的行高不是动态的。每行是否都有自己的行高?当前,每行的高度是UniformGrid
中最高元素的高度。 最佳答案
您可能会看看这条不同的路线。它使用网格代替,并使用GridHelpers类来允许您执行所需的操作,因为每行的默认高度都设置为“自动”。
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Images}">
<ItemsControl.Template>
<ControlTemplate>
<Grid
IsItemsHost="True"
Loaded="Grid_Loaded"
GridHelpers.RowCount="{Binding Path=Items.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}}">
</Grid>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Card Padding="32px" Margin="8px">
<StackPanel>
<StackPanel>
<Image Source="{Binding Path, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</materialDesign:Card>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>