调试时不打开splitview

Question

我正在使用Visual 2015并学习制作UWP应用程序。我想让汉堡包风格的导航，但splitview不打开，即使在我点击汉堡按钮，它没有显示任何错误。我还在汉堡包按钮上添加了事件处理程序。另一个正在发生的问题是，图像(正在正确显示)被稍微移到右边和底部。

代码背后：

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没有打开，因为它被卡在第一个Width为50像素的Grid.Column中。您可以通过更改ColumnSpan上的SplitView来解决这个问题。

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

您通常在SplitView窗格中设置汉堡包按钮，请参阅这篇MSDN文章作为SplitView的示例实现。