Moving image to background?

Question

I am making a game where I move images around. I have two big images which should have smaller images on top of them. I often move the smaller images from one of the bigger images onto the other. However I recently added a feature where the big image gets changed up mid-game. This caused it to have priority over the smaller images, and when I move the small images, they end up being moved behind the big images.

In short, I always want the big images to be in the background and the small ones to be in the foreground. Is there a property I can set on those to make this happen?

Answer 1

If you have more than one user interface element in a particular grid cell, the elements are layered on top of each other. Elements added earlier in XAML appear below (lower layer) than elements added later.

You can change the layering of the elements by changing the order in which they are added to the Grid. You can also control the layering by giving each element a value for Panel.ZIndex. Elements with higher values for ZIndex will appear to be on top of elements with lower values, regardless of the order in which they were added to the Grid.

Source: http://wpf.2000things.com/tag/zindex/

MSDN page on the ZIndex property: http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex%28v=vs.110%29.aspx