Windows 10 Mobile API : Creating Page over another page

Question

I am learning Windows 10 Mobile App development. In maps app, on holding any location, a new page appears which can be slided up to show more information about the pinned location. Screenshots :

I wanted to know how to make something like that.

Answer 1

This is not a new page, it's simply a some kind of panel (like Grid or StackPanel) on top of the map. You can implement it by placing Grid over other elements and setting its TranslateY accordingly, something like this:

<Grid x:Name="LayoutRoot">
    <maps:MapControl x:Name="Map"/>

    <Grid x:Name="Overlay" Background="Red">
        <Grid.RenderTransform>
            <CompositeTransform x:Name="OverlayTransform" TranslateY="300"/>
        </Grid.RenderTransform>
    </Grid>
</Grid>

Then you can animate OverlayTransform.TranslateY as you see fit. If you want to implement sliding by user interaction, you should handle Manipulation[Started/Delta/Completed] events, for example:

<Grid x:Name="Overlay" Background="Red" ManipulationMode="TranslateY" ManipulationDelta="Overlay_OnManipulationDelta">

...


private void Overlay_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs args)
{
    OverlayTransform.TranslateY += args.Delta.Translation.Y;
}

From there you can start to build more complex logic, like some anchor points for your panel or pretty slide-in/slide-out animations.