Search code examples
c#windows-phone-8.1flyout

Windows Phone 8.1 - How to create a flyout (?) and dim the rest of the screen?


Let's say on my home screen I have a map and a CommandBar (like in the Maps app). And after pressing a "search" button from the CommandBar I would like to have a panel (?) SLIDING from top and dim the rest of the screen. I want similar effect to this:

Here's before the click

And here we have a panel that slided from top and background dimmed


Solution

  • You can show a fullscreen flyout by setting Placement = "Full", but this won't help with the transition you want to define and dimmed background.

    To do what you want I would use an UserControl with combination of PopUp - very nice example is showed here by Rob Caplan. I think it will fulfill your needs - you can put there any transition and if you want to dim your screen little, you may think of putting rectangle with suitable color and opacity.