将集合绑定到网格答案

【问题标题】：Bind collection to Grid将集合绑定到网格
【发布时间】：2014-09-17 18:06:46
【问题描述】：

我有一个名为Fly 的对象，它具有Position（点）和Orientation（双）属性。在我的 MainViewModel 中，我有一个自定义对象 Fly称为 Flies 的集合。

苍蝇的视图是 .png 图像。我想在 MainWindow 中使用 Position 和 Orientation 的属性将 Flies 绑定到我的 Grid 以在屏幕上显示苍蝇。

我以前从未做过这样的集合绑定。我之前所做的是将集合绑定到ListBox 或ItemsControl：

        <ItemsControl ItemsSource="{Binding MyCollection}">
        <ItemsControl.Template>
            <ControlTemplate>
                <ScrollViewer>
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:ItemView/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

如何将我的对象绑定到 Grid 或任何其他控件以显示正确的位置和角度方向？

【问题讨论】：

标签： c# wpf collections

【解决方案1】：

首先，您不应该设置ItemsControl.Template 属性，除非您实际上想要为它定义一个新的ControlTemplate...肯定有用相同的替换默认的ControlTemplate 毫无意义。接下来，如果您的ItemView 只是一个Image，那么它似乎毫无意义......只需使用Image 代替。通过这种方式，您将能够正确地对属性进行数据绑定。

有几种方法可以满足您的要求，但您可以使用RotateTransform 来表示Orientation，也可以使用TranslateTransform 来移动项目。试试这样的：

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="/Images/Fly.png">
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="{Binding Orientation}" />
                        <TranslateTransform X="{Binding Position.X}"
                            Y="{Binding Position.Y}" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：

【解决方案2】：

根据问题的一些假设，这里就是您要寻找的东西

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left"
                    Value="{Binding Position.X}" />
            <Setter Property="Canvas.Top"
                    Value="{Binding Position.Y}" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="{Binding Orientation}" />
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:ItemView />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我做了什么

将 Canvas 设置为 ItemsControl 的 ItemsPanel，它将承载项目（苍蝇）
创建了一个针对 ContentPresenter 的样式，它是 ContentPresenter 中项目的默认宿主。
将 Canvas.Left 和 Canvas.Top 绑定到相应位置的 X 和 Y
为方向添加了 RotateTransform 并将角度绑定到 Orientation 属性。

我可以假设苍蝇应该会飞，所以在这种情况下，您可能希望改变 X 和 Y 会改变飞行位置。但由于 Point 类不通知子属性的更改，绑定可能无法按预期工作。因此，作为一个建议，您可能希望创建自己的带有属性更改通知的 Point 类。

【讨论】：