Всплывающее меню UWP XAML с видимой вкладкой

Question

Я пытаюсь создать Menu в UWP, который выдвигается слева, но также всегда имеет вкладку, чтобы щелкнуть, чтобы открыть ее.Изображение того, чего я пытаюсь достичь, находится здесь - https://i.imgur.com/D7RPI0Q.png

Я дошел до этого с приведенным ниже кодом, и он почти работает.Но, как всплывающее окно и transition effect, красная вкладка перемещается мгновенно, когда на нее нажимают, что не идеально.

У меня такое ощущение, что я пытаюсь изобретать колесо здесь, и уже что-то построенов том, что позволяет это.

        <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

Да, вы заново изобретаете колесо.

То, что вы хотите, называется SplitView в UWP.

XAML выглядит следующим образом и может быть настроен, как и большинство элементов управления XAML, для работы и ощущения, как вы хотите.

Пример взят из 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>

Тампараметры для перемещения панели (элементов меню) поверх существующего контента, перемещения существующего контента во время скольжения и т. д. Приложение Windows Store MS Weather использует это, старое приложение Groove, приложение MS Mail.использовал это, и есть еще много.