UWP 导航窗格问题

Question

我正在寻找一种使用 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

Answer 1

齐乌尔斯基

如果你想制作汉堡菜单，使用模板 10 会节省你很多时间。

当您在 visual studio 中安装模板 10 时，您将很容易创建一个包含 hamburgerMenu 的项目。

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

Template 10: How to Build Your Universal Windows App

Answer 2

MessiKing 的模板 10 是个好主意，可以为您节省大量时间。毫无疑问。但这并不能帮助您了解 XAML 如何处理控件，因为它们都已由专家处理。但是，如果您想了解它如何在没有任何第 3 方库的纯 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">

你会看到类似下面的内容。

祝你好运，编码愉快。

Answer 3

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

UWP 导航窗格问题

UWP Navigation Pane Issues

c#

xaml

hamburger-menu

uwp