在 UWP 中拖动面板

Question

您好，我正在开发 UWP 应用程序。我正在尝试创建一个可以从屏幕底部向上拖动的面板。（有关参考，请参阅 windows 商店中的地图应用程序，当在应用程序中使用导航时）。如下图所示，也可以在地图应用程序中看到。有一个栗色面板，可以上下拖动，根据需要进行设置。

我想知道的：##

如何为我的应用程序创建这样一个可拖动的面板。
如您所见，在拖动面板时，地图图钉和多段线始终限定在拖动面板上方的区域。如何实现。

图片如下：

注：

地图元素始终在可拖动面板范围内。任何帮助都会很棒

Answer 1

好吧，经过一段时间我终于明白了，两部分的答案是：

可拖动面板是来自 WinRT XAML 工具包的 custom Grid splitter 控件。忠告，不要只是将 .dll 复制粘贴到您的项目中，这会使您的应用程序变得非常沉重，而是查看源代码，您可以添加类和 `resourceDictionary。
MapElements 始终限定在面板的顶部，因为点击使用 TrySetViewBounds 方法设置视图，并且下面板的高度提供了您希望从底部到地图元素。

我可以提供代码，但 spoon-feed 相当简单。

Answer 2

2021 年的最新答案。

您所描述的似乎是 Windows 社区工具包中的 GridSplitter 组件。

您可以直接从 NuGet 安装 Microsoft.Toolkit.Uwp.UI.Controls，然后按以下方式使用 GridSplitter 元素（文档中的示例）：

<Page ....
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="100"></RowDefinition>
            <RowDefinition Height="11"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200"></ColumnDefinition>
            <ColumnDefinition Width="11"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <!--Column Grid Splitter-->
        <controls:GridSplitter Grid.Column="1" Width="11" ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Auto" Background="Gray" Foreground="White" FontSize="13">
            <controls:GridSplitter.Element>
                <Grid>
                    <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" VerticalAlignment="Center"  
                               Text="&#xE784;" Foreground="Black" FontFamily="Segoe MDL2 Assets">
                    </TextBlock>
                </Grid>
            </controls:GridSplitter.Element>
        </controls:GridSplitter>

        <!--Row Grid Splitter-->
        <controls:GridSplitter Foreground="White" Grid.Row="1" ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Auto" Background="Gray" Height="11" HorizontalAlignment="Stretch"  FontSize="13">
            <controls:GridSplitter.Element>
                <Grid>
                    <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" VerticalAlignment="Center"  
                               Text="&#xE76F;" Foreground="Black" FontFamily="Segoe MDL2 Assets">
                    </TextBlock>
                </Grid>
            </controls:GridSplitter.Element>
        </controls:GridSplitter>
    </Grid>
</Page>

在 UWP 中拖动面板

Drag a Panel In UWP

c#

user-interface

draggable

uwp

我想知道的：##

注：