使用具有多个数据绑定(和不同形状)的Canvas

本文关键字：Canvas 数据绑定 | 更新日期: 2023-09-27 18:21:42

我正在使用MVVM模式开发一个WPF应用程序。在我的应用程序中，我有一个画布，它应该显示几个不同的形状。这些形状描述仓库（也称为仓库）和仓库内容。

为了只显示仓库（由ObservableCollection<Point>描述），我使用以下代码片段

    <Canvas Width="{Binding StorageWidth, Mode=OneWay}" Height="{Binding StorageHeight, Mode=OneWay}">
     <Polygon Points="{Binding StorageVertices, Mode=OneWay, Converter={StaticResource PointCollectionConverter}}" Stroke="Gray" StrokeThickness="30">
      <Polygon.Fill>
       <SolidColorBrush Color="DarkRed" Opacity="0.25" />
      </Polygon.Fill>
     </Polygon>
    </Canvas>

在这个画布上，我想添加矩形（用于描述存储器中的办公室）和圆形（用于描述存储中的节点）。这些是在我的视图模型中定义的：

class Node
{
 // ...
 Point Position { get; private set; }
}
class Office
{
 // ...
 ObservableCollection<Point> Vertices { get; private set; }
}
public class ViewModel : ViewModelBase
{
 // ...
 ObservableCollection<Node> Nodes { get; private set; }
 ObservableCollection<Office> Offices { get; private set; }
 ObservableCollection<Point> StorageVertices { get; private set; } // Already displayed on the canvas
}

如何使用数据绑定将这些内容与存储区域一起显示在画布上？我知道我本可以正常使用ItemsControl，但现在我有几个不同的集合/源，它们应该以不同的方式描述（Node s是Circle s，而Office s是Rectangle s）。

使用具有多个数据绑定(和不同形状)的Canvas

由于不能将一个Canvas用作多个ItemsControl的ItemsPanel，因此您可以找到一种方法将它们合并为一个List，至少是Nodes和Offices。您可以尝试为它们找到一个抽象，或者使用Object。

现在您有了一个带存储的ObservableCollection。您可以使用ItemsControl和Canvas作为ItemsPanel，使用DataTemplate在其上绘制所有节点和办公室。接下来是添加Storage。我认为你有两个选择，也许其他人有更好的选择，要么把它也放在列表中并添加另一个DataTemplate，要么编写自定义的Canvas，公开绑定到Storage的依赖属性并覆盖OnManipulationDelta方法。坦率地说，我从未尝试过第二次，也不能说它会起作用，但你可以参考这篇文章了解详细信息：http://blogs.msdn.com/b/mim/archive/2013/04/16/winrt-create-a-custom-itemspanel-for-an-itemscontrol.aspx

希望它能有所帮助。

相关文章：