将画布上的图像绑定到MVVM中的ObservableCollection(通过DataTemplates?)

本文关键字：ObservableCollection 中的 通过 DataTemplates MVVM 绑定 图像 | 更新日期: 2023-09-27 18:25:56

我想在c#中创建一个基于tilemap的游戏。（我知道mvvm和c#可能不是游戏的最佳方法，但这是我班的要求）。

我想要一个ObservableCollection of Tiles（我已经创建了一个类，它包含x和y位置以及图像本身的路径）。现在，我希望xaml文件中的Map Canvas绑定到ObservableCollection，在画布上为每个平铺显示一个图像（使用该对象的x、y和图像路径属性），这样，当我添加或删除另一个平铺时，Canvas会自动更新。我一直在寻找一个解决方案，我偶然发现了DataTemplates好几次，但我找不到任何在画布上使用这样的图像的例子。（Canvas为我提供了项目其余部分的最佳灵活性，除非完全必要，否则我不想使用GridPane）

你能给我一个在MVVM中如何工作的小例子吗？提前谢谢。

将画布上的图像绑定到MVVM中的ObservableCollection(通过DataTemplates?)

只有几个提示：要显示ObservableCollection中表示的对象，您需要一个ItemsControl。要使此ItemsControl使用Canvas作为底层面板，请设置其ItemsPanel属性。假设代表瓦片的ObservableCollection的项提供了三个属性Path、X和Y，这看起来可能有点像以下内容：

<ItemsControl ItemsSource="{Binding ImagesCollection}">
    <ItemsControl.ItemsPanel>
        <Canvas />
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path}" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如前所述，ItemsPanel定义了要用作所有项目的容器的面板。ItemTemplate部分定义了每个项目的显示方式（在您的情况下，这将是一个简单的Image控件）。

我建议你试着从这里开始相处，如果你遇到具体的问题，再问一个更详细的问题！

相关文章：