Как перекрывать изображения 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

Самый простой способ перекрывать элементы управления / представления (изображения и т. Д. c) в 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

Попробуйте и оставьте комментарий, если у вас возникнут какие-либо проблемы.