WPF UniformGrid 动态行高

Posted 2023-03-06

【中文标题】WPF UniformGrid 动态行高

【英文标题】：WPF UniformGrid dynamic row height

【发布时间】：2017-11-17 23:03:20

【问题描述】：

我写了一个显示一些图像的小应用程序。为此，我使用了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中最高元素的高度。

【问题讨论】：

您的问题是什么？你希望你的 UI 是什么样子的？

@mm8 看看图片。第二个标记的地方。两张图片（上一张和下一张）之间的间距也应该是 16px。

正如 MSDN 所述，UniformGrid“提供了一种在网格中排列内容的方法，其中网格中的所有单元格都具有相同大小”所以可能不是您需要的控件。

您是否尝试使用 WrapPanel 作为 ItemsPanelTemplate 而不是 UniformGrid？

@MyNewName 可以从this小博文开始。在ArrangeOverride 中，您只需要计算点的右 X、Y 坐标即可为面板中的每个元素放置一个元素。在您的情况下，这些计算非常简单。自定义面板是解决 WPF 中许多 UI 相关问题的关键，所以我强烈建议学习它:)

【参考方案1】：

这里有一条不同的路线，您可以看看。它使用网格代替，并使用 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>