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

Dziewulski，

如果你想制作一个汉堡包菜单，使用模板10可以节省你很多时间。

在visual studio中安装Template 10时，您可以轻松创建一个包含hamburgerMenu的项目。

请参阅这些视频了解详情：Template 10 for Windows 10 Apps

Template 10: How to Build Your Universal Windows App

Answer 2

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提供的默认样式包括名为StaticResource的{{1}}，它会将您的按钮样式更改为TextBlockButtonStyle的样式。看看这个。

还有一个原因，我将列表项包装在网格中。因为如果你改变了

TextBlock

到

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

你会看到类似下面的东西。

好运和快乐的编码。

Answer 3

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

UWP导航窗格问题

3 个答案: