UWP 导航窗格问题答案

【问题标题】：UWP Navigation Pane IssuesUWP 导航窗格问题
【发布时间】：2017-08-22 17:48:00
【问题描述】：

我正在寻找一种使用 SplitView 和其他 XAML 控件创建导航窗格的方法。

我尝试过创建类似于下面代码的内容，但我失败了，因为控件没有精确地放置在中心（垂直）。

这些按钮还有这种奇怪的默认动画，当它们被点击时会倾斜。我想关掉它，但我不知道怎么做。

总而言之，我想创建一个类似于 Windows 10 周年更新中的开始菜单的汉堡菜单。非常感谢所有意见。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay">
        <SplitView.Pane>
            <StackPanel>
                <Button x:Name="HamburgerButton" Width="320"  Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
                    <StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
                        <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Margin="0,1,0,0" />
                        <TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" />
                    </StackPanel>
                </Button>
                <Button x:Name="TasksButton" Width="320"  Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
                    <StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
                        <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" VerticalAlignment="Center" />
                        <TextBlock Text="Tasks" Margin="0,0,0,0"/>
                    </StackPanel>
                </Button>
                <Button x:Name="ArchivedButton" Width="320"  Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left">
                    <StackPanel Orientation="Horizontal" Margin="-8,0,0,0">
                        <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" VerticalAlignment="Center" />
                        <TextBlock Text="Archived" Margin="0,0,0,0"/>
                    </StackPanel>
                </Button>
            </StackPanel>
        </SplitView.Pane>
    </SplitView>
</Grid>

这是我想要实现的目标：

截图：http://imgur.com/a/utNmC

【问题讨论】：

您可能想针对应用顶部的白条创建一个新问题，因为这可能是一个单独的问题。我还将发布代码当前生成的屏幕截图
我已经编辑了帖子。屏幕截图在底部。

标签： c# xaml uwp hamburger-menu

【解决方案1】：

MessiKing 的模板 10 是个好主意，可以为您节省大量时间。毫无疑问。但这并不能帮助您了解XAML 如何处理控件，因为它们都已由专家处理。但是，如果您想了解它如何在没有任何第三方库的纯 XAML 中工作，请参见下文。

您的XAML 如下所示

<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True">
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button x:Name="HamburgerButton"  Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
                    <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Padding="5"  />
                    <TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
                </StackPanel>
            </Button>
            <Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" Padding="5"  />
                    <TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
                </StackPanel>
            </Button>
            <Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" Margin="5" />
                    <TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/>
                </StackPanel>
            </Button>
            </Grid>
        </Grid>
    </SplitView.Pane>
</SplitView>

输出

现在是按钮的样式。 Microsoft 提供的默认样式包括一个名为TextBlockButtonStyle 的StaticResource，它将您的按钮样式更改为TextBlock 的样式。看看这个。

我将列表项包装在网格中也是有原因的。因为如果你改变了

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top">

到

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom">

您会看到如下所示。

祝你好运，编码愉快。

【讨论】：

谢谢。这是我需要的确切答案。
在哪里可以找到 HamburgerButtonClick 事件处理程序的详细信息？
@usefulBee 在HamburgerButton 上使用Tapped 事件，就说hamburgerMenu.IsPaneOpen=!hamburgerMeNu.IsPaneOpen

【解决方案2】：

齐乌尔斯基，

如果你想制作一个 hamburgerMenu，使用 Template 10 可以节省你很多时间。

当您在 Visual Studio 中安装 Template 10 时，您将很容易创建一个包含 hamburgerMenu 的项目。

详情请参考这些视频：Template 10 for Windows 10 Apps

Template 10: How to Build Your Universal Windows App

【讨论】：

【解决方案3】：

试试微软的 UWP 工具包。它包含一个汉堡菜单： https://github.com/Microsoft/UWPCommunityToolkit

【讨论】：