Drag a Panel In UWP

Question

Hello I am working on a UWP application. I am trying to create a Panel which can be dragged upwards from the bottom of the screen. (For a reference please see Maps app on the windows store, when use navigation in the app). As in the Images below, also can be seen in the Maps app. There is a Maroon coloured Panel that can be dragged up and down and set according to needs.

What I want to know: ##

How can such a draggable panel be created for my application.
As you would notice, on dragging the panel, the Map Pushpins and polylines are always scoped to the area above the drag panel. how to achieve this.

The Images are as below:

Note:

The Map Elements at all times are scoped over the Dragable panel. Any Help would be amazing

You can try to rotate the `SplitView` control and [add a swipe gesture to its pane](http://stackoverflow.com/questions/32108362/adding-a-swipe-gesture-to-open-splitview-pane/32110867#32110867), this can make a slidable control. And for your second question, you can try to use `TrySetViewAsync` method of mapcontrol to reset the view of your map when the pane is swiped. — Grace Feng, Nov 28 '16 at 04:37
Thank you for getting back. Yes I can use the TrySetViewAsyc method, but the issue is that the map remains full screen and the lower panel is an overlay element so the TrySetViewAsyc method would not change the view as the map is already centered — iam.Carrot, Nov 28 '16 at 04:43
I think you will need to recenter the map in this scenario, the `TrySetViewAsync` method can help centering and zooming, but we need to calculate the new center point and zoom level based on the pane-open-height during swiping. This will not be an easy work. — Grace Feng, Nov 28 '16 at 05:25
Exactly. I was wondering the same. Currently I am taking the the new height of the overlay panel and based on that I am adding or subtracting the Latitude value of the center of the map. But it's highly based on hit and try might not be adaptive to the screen sizes. I put this question to find out a better way to approach this. — iam.Carrot, Nov 28 '16 at 05:34
Based on the current available apis, I don't have any better idea either. Actually I tried a demo to resize and zoom the map control together when the pane is swiped, but the result is not quite ideal, the map will flicker during resizing, so after several hours trying, I wrote a comment as suggestion instead of posting a demo as answer. — Grace Feng, Nov 28 '16 at 05:38
@GraceFeng-MSFT Thank you for the effort. I would advise you not to use a splitview for the dragging, please use WinRT toolkit CustomGridSplitter control. It works very well, toggles the Grid.Row's height on dragging. I put the map in the back panel to avoid it to resize each time I drag, this way's we get a good implementation for the 1st question. The 2nd question I am not able to find an elegant way of achieving. I'll upwote the comment for the great effort. — iam.Carrot, Nov 28 '16 at 05:42
OK, I didn't know this CustomGridSplitter control, I just used standard UWP control, and I also tried to create my own usercontrol for this, but anyway, thanks for your advising. — Grace Feng, Nov 28 '16 at 05:44
You could find the toolkit [here](https://github.com/xyzzer/WinRTXamlToolkit). You don't need to add it as a referance or anything rather go through it and you could get your basic class for the custom control from it and then tweak it as per requirements. Thank you for the effort — iam.Carrot, Nov 28 '16 at 05:47

score 1 · Accepted Answer · answered Jan 17 '17 at 09:51

Okay After a while I figured it out finally, The answers to both the parts are:

The draggable panel is a custom Grid splitter control from the WinRT XAML toolkit. A word of advise, do not just copy paste the .dll into your project, it makes your app very heavy, instead go through the source code and you can add in the classes and the `resourceDictionary.
The MapElements are always scoped to the top of the panel because the tap is using TrySetViewBounds method to set the view and the height of the lower panel is providing the margin you want to provide from the bottom to the mapElements.

I can provide with the code but it's fairly very simple to spoon-feed.

score 0 · Answer 2 · answered Apr 13 '21 at 18:14

An answer a bit more up to date for 2021.

What you're describing seems to be the GridSplitter component from the Windows Community Toolkit.

You can install Microsoft.Toolkit.Uwp.UI.Controls directly from NuGet, then use the GridSplitter element the following way (example from the documentation):

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

Drag a Panel In UWP

What I want to know: ##

Note:

2 Answers2