UWP XAML Menu Popup with Visible Tab

Question

I'm trying to create a Menu in UWP that slides out from the left, but also always has a tab to click to open it. A picture of what I am trying to achieve is here - https://i.imgur.com/D7RPI0Q.png

I have got so far with this with the below code, and it nearly works. But as the popup and a transition effect , the red tab moves instantly when it is clicked which is not ideal.

I have a feeling that I'm trying to reinvent the wheel here and there is already something built in that allows this.

        <Grid Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Popup x:Name="FilterPopup" IsLightDismissEnabled="False" Width="0" Height="500" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" IsOpen="False">
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition Edge="Left"/>
                    </TransitionCollection>
                </Popup.ChildTransitions>
                <Rectangle Width="200" Height="500" Fill="Blue"/>
            </Popup>
            <Rectangle Tapped="Rectangle_Tapped" Grid.Column="1" Height="200" Fill="Red"/>
        </Grid>



        private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
        {
            if (FilterPopup.IsOpen)
            {
                FilterPopup.IsOpen = false;
                FilterPopup.Width = 0;
            }
            else
            {
                FilterPopup.IsOpen = true;
                FilterPopup.Width = 200;
            }
        }

Answer 1

Yes, you are reinventing the wheel.

What you're wanting is called a SplitView in UWP.

XAML looks like this and can be customized like most XAML controls to work and feel however you want.

Example taken from MS: https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.SplitView

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

There are options for having the pane (which is the menu items) slide out over your existing content, move your existing content while sliding, etc. The Windows Store MS Weather app uses this, the old Groove app, MS Mail App, I've used this, and there are many more.