c# - UWP 导航 Pane 问题

Question

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

我曾尝试创建类似下面代码的东西，但我失败了，因为控件没有精确地放置在中心(垂直)。

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

总而言之，我想创建一个类似于 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

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">

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

祝你好运，编码愉快。