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

Question

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:

Answer 1

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.

Answer 2

var tb = new TextBox();
var box = new CustomMessageBox()
{
    Caption = "Enter Destination",
    Message = "Please enter a location name",
    LeftButtonContent = AppResources.Ok,
    RightButtonContent = AppResources.Cancel,
    Content = tb,
    IsFullScreen = false
};
box.Dismissed += (s, e) =>
{
    if( e.Result == CustomMessageBoxResult.LeftButton )
    {
        var filename = tb.Text;
        // User clicked OK, go ahead and save
    }
};
box.Show();

You can use a custom message box like this. Just edit the code. This is from one of my existing projects. Also you can try this: https://coding4fun.codeplex.com/