Question

在很多例子中使用SplitView的基本汉堡包菜单很酷但我喜欢微软在Windows 10的一些应用程序中实现它的方式，例如新闻和体育。它们实现它的方式是当SplitView.Pane打开时，它的高度与根框架的高度不同。换句话说，Pane的高度和内容的高度是不一样的。这种风格的好处是可以看到SplitView.Content的页眉的完整内容。因为我是xaml的新手，有人可以帮我解决如何实现这种效果的问题。我希望我的问题很清楚。

谢谢， AB

Answer 1

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

下面是一个简单的例子，它使用Grid布局并调整splitview框架的“margin”属性。在此示例中，我将切换按钮和后退按钮放在页眉上（您可以稍后将后退按钮更改为导航栏）。然后调整框架的“边距”属性，使其与面板的高度不同。您可以获得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>

更改SplitView.Pane的大小

1 个答案: