WPF统一网格动态行高

Question

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

- MyNewName

---

你有什么问题？你希望你的用户界面看起来像什么？ - mm8

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

请阅读此内容并相应修改您的问题：https://stackoverflow.com/help/mcve - mm8

你是否尝试使用WrapPanel作为ItemsPanelTemplate而不是UniformGrid？ - mm8

@MyNewName 你可以从这篇小博客文章开始学习：http://putridparrot.com/blog/creating-a-custom-panel-using-wpf/。在 ArrangeOverride 方法中，你只需要为面板中的每个元素计算正确的 X、Y 坐标，以便将其放置在指定位置。在你的情况下，这些计算非常简单。自定义面板是解决许多 WPF 中 UI 相关问题的关键，因此我强烈建议你学习它 :) - Maxim

Answer 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>

- Vash