How to create a custom popup control that disables the rest of the UI like the MessageDialog?


  • I need to perform a maintenance operation in my app and want prevent clicks in the app or opening the settings pane. The behaviour should be exactly the same as with Windows.UI.Popups.MessageDialog. It disallows clicks outside the popup dialog so no nav/appbar or settings pane can be opened.

    Any idea how to do that with my custom control?

    Tuesday, February 26, 2013 4:24 PM


All replies

  • Hi Phil,

    Normally controls like this simply put a transparent or semi transparent div up over the entire screen that can trap all the clicks.  Think of it like a sheet over your app.


    Jeff Sanders (MSFT)

    Tuesday, February 26, 2013 7:39 PM
  • Hi phil,

    Like Jeff mentioned, the reasonable approach is displaying a full-screen like window(div) so as to prevent user from tapping/clicking the other UI elements on the original page UI. And after the certain operations finish, you just dismiss the full-screen window.

    Actually, the custom splash screen sample is like a special example of using such a full-screen window. It just displays a custom <div> which occupy the entire app screen and user need to click a button on it so as to dismiss the splash screen and continue. You can take a look at the sample code for details:

    #Splash screen sample

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, February 27, 2013 5:42 AM
  • Thanks you both! The problem with this is that the appbar and settings charm still work and the user can change the state of the app that way.
    Wednesday, February 27, 2013 8:34 AM
  • You can disable the app bar: http://msdn.microsoft.com/en-us/library/windows/apps/hh700540.aspx .  You cannot disable settings because that is a system action but you have control over what is displayed based on your app state.

    Jeff Sanders (MSFT)

    Wednesday, February 27, 2013 1:07 PM