WPF making a navigation panel in overlay (in front of other content)

Question

Hi, I have a small WPF application where i am displaying an image. I would like to have a kind of transparent navigation panel in the bottom, where i have several small buttons (rotate left/right, pan etc.). But how to make the navigation panel in front of the image? I have tried with a grid with two rows, but obviously the navigationpanel is not hovering "on top" of the image, but is in the row below. Any ideas?

Edit: Is the solution to make another window and place that one? or can it be done within the same grid?

Edit: Its like the toolbar in the bottom of windows Vista/7 where u can see the window "behind" it through it.

Answer 1

Not sure if this is what you are looking for, but I'll give it a go. Maybe you could take a look at Adorners MSDN link, which allows you to put a rendering surface/layer on top of existing content. With a little trickery you can make this rendering surface semi-transparent or add other effects. Adorners are a great way of keeping your rendering pretty clean so you can keep all the fancy stuff isolated in the adorner layer and have you image-displaying code stay untouched.

Just my two cents...

Answer 2

Try a grid with just 1 row, and align the navigation bar to the bottom, and give it an opacity to make it translucent.

<Grid>
    <Image.../>
    <Grid Name="NavBar" VerticalAlignment="Bottom" Opacity="50%">...</Grid>
</Grid>

Answer 3

Keep your existing layout with the 2 RowDefinitions but set Grid.RowSpan="2" on the Image element. Also make sure your Buttons or container for the Buttons are either declared after the Image or set a higher Panel.ZIndex value on them.