在 UWP 中拖动面板

Posted 2023-05-08

【中文标题】在 UWP 中拖动面板

【英文标题】：Drag a Panel In UWP

【发布时间】：2017-04-08 20:10:39

【问题描述】：

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

我想知道的：##

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

---

图片如下：

注意：

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

【问题讨论】：

你可以尝试旋转SplitView控件和add a swipe gesture to its pane，这样可以做一个可滑动的控件。对于第二个问题，您可以尝试使用 mapcontrol 的TrySetViewAsync 方法在滑动窗格时重置地图视图。

感谢您回来。是的，我可以使用 TrySetViewAsyc 方法，但问题是地图保持全屏状态，并且下部面板是覆盖元素，因此 TrySetViewAsyc 方法不会更改视图，因为地图已经居中

我认为在这种情况下您需要重新定位地图，TrySetViewAsync 方法可以帮助居中和缩放，但我们需要根据窗格打开计算新的中心点和缩放级别- 刷卡时的高度。这不是一件容易的事。

没错。我也想知道。目前，我正在获取覆盖面板的新高度，并在此基础上添加或减去地图中心的纬度值。但它高度基于命中和尝试可能不适应屏幕尺寸。我提出这个问题是为了找到更好的方法来解决这个问题。

基于当前可用的api，我也没有更好的主意。实际上我尝试了一个演示，在滑动窗格时将地图控件一起调整大小和缩放，但结果不是很理想，调整大小时地图会闪烁，所以经过几个小时的尝试，我写了一个评论作为建议，而不是发布一个演示作为答案。

【参考方案1】：

好的，经过一段时间我终于想通了，这两个部分的答案都是：

可拖动面板是来自 WinRT XAML 工具包的 custom Grid splitter 控件。一个忠告，不要只是将.dll 复制粘贴到您的项目中，这会使您的应用程序非常繁重，而是通过源代码，您可以添加类和`resourceDictionary. MapElements 总是限定在面板的顶部，因为点击使用TrySetViewBounds 方法来设置视图，并且下部面板的高度提供了您想要提供的从底部到 mapElements 的边距。

我可以提供代码，但用勺子喂食相当简单。

【参考方案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>