Windows 10 Mobile API : 在另一个页面上创建页面

Question

我正在学习Windows 10 移动应用程序开发。在地图应用程序中，按住任意位置会出现一个新页面，可以向上滑动该页面以显示有关固定位置的更多信息。截图：

我想知道如何制作这样的东西。

Answer 1

这不是新页面，它只是地图顶部的某种面板（如 Grid 或 StackPanel）。您可以通过将 Grid 放置在其他元素上并相应地设置其 TranslateY 来实现它，如下所示：

<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>

然后您可以根据需要设置 OverlayTransform.TranslateY 动画。如果你想通过用户交互实现滑动，你应该处理Manipulation[Started/Delta/Completed]事件，例如：

<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;
}

从那里您可以开始构建更复杂的逻辑，例如面板的一些锚点或漂亮的 slide-in/slide-out 动画。

Windows 10 Mobile API : 在另一个页面上创建页面

Windows 10 Mobile API : Creating Page over another page

windows-10

windows-10-mobile