Question

所以我对WPF很新，并认为作为一种学习经验，我将在WPF中实现一个简单的关卡编辑器。编辑器的目的是双重的。首先，我希望能够将任意定向的边界框定义为关卡中的“实体”区域。然后我希望能够放置，调整大小，扭曲图像。

polygon editor image

我已经实现了使用Canvas绘制定向边界框的功能（参见上图）。 “画布”和工具栏位于停靠面板中。我现在正计划实现图像功能。我想做的是为每一层图像创建另一个Canvas图层（可能很多）。这样做的原因是我可以轻松限制每个图层的选择和可见性。但是我不确定如何正确地分层多个画布控件。当然我正在使用的DockPanel容器不允许我有多个控件在彼此之上。我想将我的Canvas图层嵌入到另一个画布中，但我不知道如何正确设置它（请注意，设置应该是动态的代码，因为我希望允许用户根据需要添加更多图层）。

理想的最终结果是具有透明背景的任意数量的图层（因此我们可以看到背后的图层）并且可以轻松隐藏。接收用户输入时，一次只能有1个图层。

所以我的问题是，他们是一个更合适的方法而不是分层画布吗？如果画布的分层是一个很好的方法，有人可以提供链接/示例代码，以便如何设置。多个堆叠控件的最佳容器是什么（请注意子画布大小应与父容器匹配）。

干杯！

Answer 1

我可能会建议替代方案吗？

创建ItemsControl，使用Canvas面板作为绘图表面。
将ItemsControl.ItemsSource绑定到包含坐标信息的自定义对象集合。
使用DataTemplate控制每个项目在画布上的可视化表示方式。或者，您可以使用多个DataTemplate并使用DataTemplateSelector来选择有条件地应用哪一个。

XAML：

<ItemsControl ItemsSource="{Binding Path=MyObjectList}">
   <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <Canvas />
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <Rectangle Canvas.Left="{Binding Path=X}" Canvas.Top="{Binding Path=Y}"
                    Canvas.ZIndex="{Binding Path=Z}" ... />
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

C＃：

public class MyObject
{
    public double X { get; set; }
    public double Y { get; set; }
    public int Z { get; set; }

    // Additional proeprties...
}

这可能是比将一堆帆布面板堆叠在一起更好的选择。

摘自very good resource：

让我们在开始之前回顾一下......在'C'中   对于Collection，我们了解到ItemsControl表示一个集合   项目以非常可预测的方式（即作为CollectionView）。然后   在'D'中用于DataTemplate，我们了解到了一个项目   集合可以是任何CLR对象和可视化表示   item使用视觉元素模板定义（称为   DataTemplate中）。

逻辑上出现的下一个问题是，“我们在哪里提出这些问题   视觉效果？“更具体地说，一旦项目的数据模板具有   是否充气，它的视觉效果应该放在哪里？要回答这个问题   问题，我们现在将研究如何处理其中的项目“布局”   一个ItemsControl。

基本上：

ItemsControl - 项目集合
DataTemplate - 每个项目的可视化表示方式
面板 - 每个视觉表示的布局方式。

在WPF中分层多个画布

1 个答案: