如何重叠 WPF 图像

Question

有没有办法重叠说三个图像让它们重叠。我有一个案例，我将顶部元素带到顶部，但它显示的是底层而不是第二层。

这就是我的意思：

应该是这样的：

它的代码：

// Bottom Box
this.BottomBox.BackColor = Color.Transparent;
this.BottomBox.BackgroundImage = Resource.BottomBox;
this.BottomBox.Name = "BottomBox";
// Middle Box
this.Middle.BackColor = Color.Transparent;
this.Middle.BackgroundImage = Resource.MiddleBox;
this.Middle.Parent = BottomBox;
this.Middle.Name = "Middle";
// Top Box
this.TopBox.BackkColor = Color.Transparent;
this.TopBox.BackgroundImage = Resource.TopBox;
this.TopBox.Parent = MiddleBox;
this.TopBox.Name = "TopBox";

Answer 1

在 WPF 中重叠控件/视图（图像等）的最简单方法是将它们放在 Canvas 或 Grid 中...

在 Canvas 中，您可以使用附加属性 Canvas.Top 和 Canvas.Left 更改相对位置。

在网格中，您可以使用边距更改它们的相对位置...

您可以在 InitializeComponent 方法下方的视图构造器中执行此操作。

示例代码：

// Bottom Box
        this.BottomBox.BackColor = Color.Transparent;
        this.BottomBox.BackgroundImage = Resource.BottomBox;
        this.BottomBox.Name = "BottomBox";
        // Middle Box
        this.Middle.BackColor = Color.Transparent;
        this.Middle.BackgroundImage = Resource.MiddleBox;
        this.Middle.Parent = BottomBox;
        this.Middle.Name = "Middle";
        // Top Box
        this.TopBox.BackkColor = Color.Transparent;
        this.TopBox.BackgroundImage = Resource.TopBox;
        this.TopBox.Parent = MiddleBox;
        this.TopBox.Name = "TopBox";          

        var canvas = new Canvas();
        canvas.Children.Add(this.BottomBox);
        canvas.Children.Add(this.TopBox);
        canvas.Children.Add(this.Middle);
        Canvas.SetLeft(this.BottomBox, 50);
        Canvas.SetTop(this.BottomBox, 100);
        Canvas.SetLeft(this.Middle, 50);
        Canvas.SetTop(this.Middle, 50);
        Canvas.SetLeft(this.TopBox, 50);
        Canvas.SetTop(this.TopBox, 0);

        //put canvas as the main element to display in the view

如果您有任何其他问题，请尝试并发表评论。