更改SplitView.Pane的大小

Question

在许多例子中，使用SplitView的基本汉堡菜单很酷，但我喜欢微软在Windows10的一些应用程序中实现它的方式，比如新闻和体育。他们实现它的方式是当SplitView.Pane打开时，它的高度与根框架的高度不同。换句话说，窗格的高度和内容的高度是不同的。这种样式的好处是SplitView.Content的页眉的完整内容是可见的。既然我还是个xaml新手，有人能帮我讲讲如何达到这个效果吗？我希望我的问题能够很清楚地理解。

谢谢，AB

Answer 1

在官方的“体育”/“新闻”页面上，有几个元素:切换按钮、SplitView等。在SplitView中，还有几个子项，如面板和框架。有很多方法可以帮助您获得自己想要的效果:您可以使用布局面板，如StackPanel或Grid，在页面上排列这些UI元素；您可以修改splitview的默认模板；您还可以通过设置相关属性来自定义框架和面板的高度，例如:高度或边距。有关UWP设计的更多说明，请访问here。

下面是一个简单的例子，通过使用网格布局和调整splitview框架的“边距”属性。在本例中，我在页眉上放置了切换按钮和后退按钮(稍后可以将后退按钮更改为导航栏)。然后调整框架的“边距”属性，使其不具有与面板相同的高度。您可以获得SplitView here的完整示例。

<!-- Put the whole page content in a grid of 2*2 -->
<Grid>
            <Grid.RowDefinitions > 
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" 
                    Grid.Row="0" 
                    Grid.Column="1" 
                    HorizontalAlignment="Center"
                    TabIndex="2"
                    IsEnabled="{Binding AppFrame.CanGoBack, ElementName=Root}"
                    Width="{Binding ItemsPanelRoot.Width, ElementName=NavMenuList}"
                    Click="BackButton_Click"/>

            <!-- Top-level navigation menu + app content
            and put the SplitView in another row to leave space for page header  -->
            <SplitView x:Name="RootSplitView"
                       DisplayMode="Inline"
                       OpenPaneLength="256"
                       IsTabStop="False" Grid.Row="1" Grid.ColumnSpan="2">
                <SplitView.Pane >
                    <!-- A custom ListView to display the items in the pane.  The automation Name is set in the ContainerContentChanging event. -->
                    <controls:NavMenuListView x:Name="NavMenuList"
                                              TabIndex="3"
                                              ContainerContentChanging="NavMenuItemContainerContentChanging"
                                              ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                                              ItemTemplate="{StaticResource NavMenuItemTemplate}"
                                              ItemInvoked="NavMenuList_ItemInvoked">
                   </controls:NavMenuListView>
                </SplitView.Pane>

         <!-- Set Frame's margin property to differ from panel  -->
        <!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
          OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. -->
                <Frame x:Name="frame"
                       Navigating="OnNavigatingToPage"
                       Navigated="OnNavigatedToPage"
                       Margin="0,100,0,0" >
                    <Frame.ContentTransitions>
                        <TransitionCollection>
                            <NavigationThemeTransition>
                                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                                    <EntranceNavigationTransitionInfo/>
                                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
                            </NavigationThemeTransition>
                        </TransitionCollection>
                    </Frame.ContentTransitions>
                </Frame>
            </SplitView>

            <!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. -->
            <ToggleButton x:Name="TogglePaneButton"
                          TabIndex="1"
                          Style="{StaticResource SplitViewTogglePaneButtonStyle}"
                          IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
                          Unchecked="TogglePaneButton_Checked"
                          AutomationProperties.Name="Menu"
                          ToolTipService.ToolTip="Menu" Grid.Row="0" Grid.Column="0" />
        </Grid>