拆分视图未在调试时打开

Question

我正在使用 Visual Studio 2015 并学习制作 UWP 应用程序。我想做汉堡风格的导航，但是即使单击汉堡按钮后拆分视图也没有打开，也没有显示任何错误。我还在汉堡按钮上添加了事件处理程序。正在发生的另一个问题是，图像（正在正确显示）略微向右和底部移动。

后面的代码：

private void HBbutton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

我的页面：

<Page
    x:Class="MathAssistant.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MathAssistant"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"  FontSize="25" Background="BlueViolet"/>

        <TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center"  FontSize="36" Foreground="CornflowerBlue" />

        <SplitView Grid.Row="1" 
                   Name="MySplitView"
                   DisplayMode="CompactOverlay" 
                   OpenPaneLength="200" 
                   CompactPaneLength="56">
            <SplitView.Pane>
                <ListBox SelectionMode="Single" 
                         SelectionChanged="MenuListBox_SelectionChanged">
                    <ListBoxItem Name="MenuItemUnitConverter">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
                            <TextBlock FontSize="24" Margin="20,0,0,0">Unit Converter</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="MenuItemCalculator">
                        <StackPanel Orientation="Horizontal">
                            <Image  Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/>
                            <TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="MyFrame"></Frame>
            </SplitView.Content>

        </SplitView>
    </Grid>
</Page>

Answer 1

您的SplitView 未打开，因为它卡在第一个Grid.Column 中，Width 为 50 像素。您可以通过更改 SplitView 上的 ColumnSpan 来解决此问题。

<SplitView Grid.Row="1" Grid.ColumnSpan="2"
           Name="MySplitView"
           DisplayMode="CompactOverlay" 
           OpenPaneLength="200" 
           CompactPaneLength="56">

您通常在 SplitView 窗格中设置汉堡按钮，请参阅 this MSDN article 作为 SplitView 的示例实现。