带有可见选项卡的 UWP XAML 菜单弹出窗口答案

【问题标题】：UWP XAML Menu Popup with Visible Tab带有可见选项卡的 UWP XAML 菜单弹出窗口
【发布时间】：2018-12-07 23:57:04
【问题描述】：

我正在尝试在UWP 中创建一个从左侧滑出的Menu，但也始终有一个选项卡可供单击以打开它。我正在努力实现的图片在这里 - 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;
            }
        }

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

是的，您正在重新发明轮子。

您想要的在 UWP 中称为 SplitView。

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 应用程序，这个我用过，还有很多。

【讨论】：