-1

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: enter image description here

Should be this: enter image description here

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";
SetupG
  • 155
  • 2
  • 11
  • 2
    Place your images in a `Canvas` That will give you complete control over positioning via attached properties. – Bradley Uffner Mar 30 '20 at 17:23
  • @BradleyUffner Would that be done in the IntitializeComponent function? – SetupG Mar 30 '20 at 17:29
  • I would do it directly in the XAML. Code-behind in WPF almost always cause more problems than not, IMHO. – Bradley Uffner Mar 30 '20 at 17:31
  • @BradleyUffner I do not have XAML file I have a designer.cs file and a .resx file – SetupG Mar 30 '20 at 17:33
  • @BradleyUffner Weird also when I go to add canvas in the designer it is greyed out – SetupG Mar 30 '20 at 17:48
  • I don't think you are using WPF, because WPF `Image` control doesn'y have a `BackColor` or `BackgroundImage` property, I think you are using Winform. –  Mar 30 '20 at 19:12
  • @FeiShengWu Your correct key difference I didn't notice. Is this even possible with Window Forms? – SetupG Mar 30 '20 at 19:49
  • If you are using Winform, you can probably do that. Every control in Winform has a `Location` property, if you don't know how to use it, please read the [MSDN document](https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.control.location?view=netframework-4.8). –  Mar 30 '20 at 20:01
  • If you are not sure which one you are use (WPF or Winform), you can read these two documents: [WPF](https://en.wikipedia.org/wiki/Windows_Presentation_Foundation), [Winform](https://en.wikipedia.org/wiki/Windows_Forms). –  Mar 30 '20 at 20:03
  • But basically, if you don't have a XAML file, you are not using WPF. –  Mar 30 '20 at 20:05

1 Answers1

2

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.

Ndubuisi Jr
  • 461
  • 6
  • 13