c# - 在 WPF 中分层多个 Canvas

Question

所以我对 WPF 很陌生，我认为作为一种学习经验，我会在 WPF 中实现一个简单的关卡编辑器。编辑器的目的有两个。首先，我希望能够将任意方向的边界框定义为关卡中的“实心”区域。然后我希望能够放置、调整大小、倾斜图像。

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

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

所以我的问题是，它们是比分层 Canvas 更合适的方法吗？如果 Canvas 分层是一种好方法，有人可以提供有关如何设置的链接/示例代码。多个堆叠控件的最佳容器是什么(注意子 Canvas 大小应与父容器匹配)。

干杯!

Answer 1

我可以建议替代方案吗？

• 创建一个 ItemsControl它利用了 Canvas面板作为绘图表面。
• 绑定(bind)ItemsControl.ItemsSource包含坐标信息的自定义对象的集合。
• 使用 DataTemplate控制每个项目在 Canvas 上的视觉表示方式。或者，您可以使用多个 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...
}

与将一堆 Canvas 面板堆叠在一起相比，这可能是一个更好的选择。

---

摘自 very good resource :

Let’s just recap a couple of things before we get started… In ‘C’ is for Collection, we learned that an ItemsControl surfaces a collection of items in a very predictable way (namely, as a CollectionView). Then in ‘D’ is for DataTemplate, we learned that an item within the collection can be any CLR object and the visual representation of the item is defined using a template of visual elements (called a DataTemplate).

The next question that logically arises is, “where do we put these visuals?” More specifically, once the data template for an item has been inflated, where should its visuals be positioned? To answer this question, we will now examine how “layout” is handled for items within an ItemsControl.

基本上:

• ItemsControl - 项目集合
• DataTemplate - 如何以视觉方式表示每个项目
• 面板 - 每个视觉表示的布局方式。