WPF ItemsControl Datattemplate 动态更新

Question

我是 WPF 技术的新手，我想问一下解决我的问题的可能性。

我有 ItemsControl 我在其中添加图像：

<ItemsControl  Name="itemscontrol1" 
    ItemsSource="{Binding Path=PicturesList}" ItemTemplate="{StaticResource pictureTemplate}" Grid.Column="1" />

然后我准备了数据模板：

        <DataTemplate x:Key="pictureTemplate"> 

        <DataTemplate.Resources>

            <Style TargetType="Image">

                <Setter Property="Width" Value="180" />

                <Setter Property="Height" Value="120" />

                <Setter Property="Margin" Value="10" />

            </Style>
        </DataTemplate.Resources>

        <Image Source="{Binding Path=Location}" />
    </DataTemplate>

我的问题是我不知道如何动态更改图像宽度和高度的参数。例如，当我更改窗口大小时，我需要更改项目控件内的图像大小。

有人可以帮我吗？

感谢您的建议和提示。 史密斯

Answer 1

如果您根据 UI 的其余部分（即窗口大小）来控制图像的大小，您应该避免将它们设置为显式值，并选择一个布局面板来为您解决这个问题。比如把控件项面板做成一个wrappanel布局。

  <ItemsPanelTemplate x:key="griditemtemplate">
    <WrapPanel VerticalAlignment="Center"
          HorizontalAlignment="Center"/>
  </ItemsPanelTemplate>

如果您的视图模型中存在规定大小的内容，请使用绑定。

要具体执行您想要的操作，您需要一个统一的网格，并且能够将列数绑定到集合计数。不幸的是，据我所知，这无法做到。

因此，我将创建一个自定义布局面板。很多教程available online，但基本上是创建一个扩展 Panel 的类，然后覆盖 MeasureOverride 和 ArrangeOverride 方法。重要的是测量...

protected override Size ArrangeOverride(Size finalSize)
{
    int i = 0;
    foreach( UIElement child in InternalChildern)
    {
        var r = new Rect(this.ActualSize / this.InternalChildren.count * i, 0, this.ActualSize / this.InteralChildren.Count, finalSize.Height);
        child.Arrange( r );
        i++;
    }
}

这是写在我手机上的近似代码，如果需要重构，请见谅。

然后使用此面板作为您的 ItemsPanel 模板，如前所示。