Changing the size of SplitView.Pane

Question

The basic hamburger menu using SplitView found in many examples is cool but I like the way Microsoft implemented it in some of their apps in Windows 10 such as News and Sports. The way they implemented it is when the SplitView.Pane is open, its height is not the same as the root frame's height. In other word, the Pane's height and Content's height is not the same. The benefit of this style is that full content of the pageheader of the SplitView.Content is visible. Can somebody help me out on how to achieve that effect since I am new to xaml. I hope my question is pretty clear to understand.

Thanks, AB

Answer 1

On the official "sport"/"news" page, there are several elements: toggle button, SplitView and etc. In the SplitView, there are also several sub-items, such as panel and frame. There are lots of approaches to help you to get your own desired effect: you can use layout panel, such as StackPanel or Grid, to arrange those UI elements on the page; you can modify the splitview's default template; and you can also just customize frame and panel' height by setting their related properties, such as: height or Margin. For more instructions of UWP design please go here.

Below is a simple example by using Grid layout and adjusting "margin" property of splitview's frame. In this example, I put the toggled button and a back button on the page header (you can change the back button to a navigation bar later). Then adjust the "margin" property of the frame, so that it doesn't has the same height as the panel. You can get a complete sample of 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>