如何重叠 WPF 图像

Question

Is there a way overlap say three images to have them overlap. I am have a case where I bring the top element to the top but it is showing the base layer underneath instead of the second.

Here is what I mean:

Should be this:

The code for it:

// 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

The easiest way to overlap controls/views (images, etc) in WPF is to put them inside a Canvas or a Grid...

In a Canvas, you can alter there relative positions using the attached properties Canvas.Top and Canvas.Left .

In a Grid, you can alter their relative positions using margins...

You can do this in the Constructor of the views immediately below the InitializeComponent method.

Sample Code:

// 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

Try it out and leave a comment if you have any further issue.