How to disable a Grid (Panel) in XAML Metro app?

Question

I want to emulate modal dialog in XAML Metro App.

So I was going to set .IsEnabled = false on all controls apart from the one which will pose as a modal dialog.

Apparently IsEnabled not in Grid not in Panel not in FrameworkElement. How to disable it not making a user control out of it?

I guess Sinofsky cut so many corners that the whole thing is now more like an Escher staircases. I am loosing my faith. Please help

Answer 1

Set IsHitTestVisible = false on the background content.

Additionally you could set focus to something in your modal layer root and set TabNavigation to Cycle on the modal layer root to make sure that users can't tab/shift+tab out of it. Also make sure the modal layer is all hit test-solid - e.g. Transparent or has some other fill so users can't click through it.

Also make sure no Popups show while your modal layer is visible.

Answer 2

Unfortunately no one seems to know (except Mr Skakun who gave wrong answer and never bothered to revise it).

Hence my solution (the simplest) is to make the element in question Hidden - I cant find any other ways to 'disable' a grid.

If I wanted to disable it correctly I would have to write a recursive function to find all FrameworkElements in the grid children and set IsEnabled = false though.

Answer 3

Sorry, I am a little late to the party...

Here is how I created a modal popup - I used a popup dialog where the top and bottom portions are transparent so that anything behind it will show through. When the popup is opened, I set its size to cover the entire screen.

The top and bottom portions of the popup also are set to autosize (height = *), so that they fill up the entire top and bottom of the screen. This prevents any input from going into the grid underneath.

Here is a screen shot of my popup in Visual Studio:

The popup is a grid with 5 rows, 3 for the dialog itself and 2 for the transparent top and bottom.

Here is how the popup looks in my app. Obviously the grid shows through the transparent top and bottom. Since the popup fills the entire screen, any input (keyboard or mouse) goes to it rather than the grid underneath, making the popup act like a modal dialog.

Be warned though that with this strategy, you have to handle these events:

• Screen resizes (full screen, snapped view, filled view) - you need to resize the popup to fit within each of the view states
• Screen rotation - again, you have to handle resizing here
• Keyboard popup - you need to shift the popup up so that the onscreen keyboard does not interfere with it.