Question

我正在使用Visual Studio 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未开启，因为它卡在第一个Grid.Column中，Width为50像素。您可以通过更改ColumnSpan上的SplitView来解决此问题。

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

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

splitview在调试时没有打开

1 个答案: