Can SplitView 's Pane place the bottom of page

Question

As default,SplitView's Pane show at the left of page. When in a small screen, such as a phone, it would be easy to touch the menu item when the pane place at the bottom of page. So will there a style or VisualState?

Here is the screenprint

The large screen,the splitview show as normal

the small screen,the splitview's pane show at the bottom

I have a solution as blew answer, and I find it seems use more memory than before. Is there a better solution about this question?

Answer 1

I think the actual answer to your question is simply, no. A SplitView can only show the pane on the Left or Right side. For it to show on the Bottom or Top you are coming into the role of a Tab control, or in WinRT-XAML the Pivot control with a re-template header.

If you are interested in the re-templating of the Pivot control, the XAML platform team has put together a sample to get you started - please note that their code is far from final: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlPivot

Best of luck!

Answer 2

The full code:ExtenSplitView

1.Get a new class ExtendSplitView which from SplitView, and in the Style file,the default SpitView have two ColumnDefinitions.I add RowDefinitions like this

<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition1" Height="*" />
<RowDefinition x:Name="RowDefinition2" Height="50" />
</Grid.RowDefinitions>

2.Add a dp in ExtendSplitView，and MinBottomWidth such as:

 public Grid BottomGrid
    {
        get { return (Grid)GetValue(BottomGridProperty); }
        set { SetValue(BottomGridProperty, value); }
    }
    public static readonly DependencyProperty BottomGridProperty =
        DependencyProperty.Register("BottomGrid", typeof(Grid), typeof(ExtendSplitView), new PropertyMetadata(0));

   public double MinBottomWidth
    {
        get { return (double)GetValue(MinBottomWidthProperty); }
        set { SetValue(MinBottomWidthProperty, value); }
    }

    // Using a DependencyProperty as the backing store for MinBottomWidth.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MinBottomWidthProperty =
        DependencyProperty.Register("MinBottomWidth", typeof(double), typeof(ExtendSplitView), new PropertyMetadata(0));

The BottomGrid will palce the bottom menuitems, and the MinBottomWidth set a min width which will show the bottomGrid

3.In the style ,we used the BottomGrid

 <Grid x:Name="BottomPane" Grid.Row="1" Grid.ColumnSpan="2" Visibility="Collapsed">
<ContentPresenter Content="{TemplateBinding BottomGrid}" />
</Grid>

4.Define a VisualState

  <VisualStateGroup x:Name="ShowBottomStates">
                            <VisualState x:Name="ShowBottomMode">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="2" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.RowSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomPane"
                                                                   Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth ="0"/>
                                </VisualState.StateTriggers>
                            </VisualState>
                            <VisualState x:Name="HideBottomMode">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot"
                                                                   Storyboard.TargetProperty="(Grid.RowSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="2" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="(Grid.RowSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="2" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="(Grid.ColumnSpan)">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomPane"
                                                                   Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames> 
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot"
                                                                   Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth ="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MinBottomWidth, FallbackValue=0}"/>
                                </VisualState.StateTriggers>
                            </VisualState>
                        </VisualStateGroup>

5.Then we will use the control like this:

<controls:ExtendSplitView x:Name="SplitView" DisplayMode="CompactOverlay" MinBottomWidth="700" >
            <controls:ExtendSplitView.Pane>
                <ListBox ItemsSource="{Binding MenuItems}" SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}">
                    <ListBox.ItemTemplate>
                        <DataTemplate x:DataType="models:MenuItem">
                            <StackPanel Orientation="Horizontal" Height="48">
                                <TextBlock Text="{Binding Icon, Mode=OneWay}" Style="{ThemeResource IconTextBlockStyle}" />
                                <TextBlock Text="{Binding Title, Mode=OneWay}" Style="{ThemeResource MenuTitleTextBlockStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:ExtendSplitView.Pane>
            <controls:ExtendSplitView.Content>
                <Frame x:Name="VMFrame" SourcePageType="{Binding SelectedPageType, Mode=TwoWay}"/>
            </controls:ExtendSplitView.Content>
            <controls:ExtendSplitView.BottomGrid>
                <Grid>
                    <ListView ItemsSource="{Binding MenuItems}" SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid   Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                           </ListView.ItemsPanel>
                      <ListView.ItemTemplate>
                            <DataTemplate x:DataType="models:MenuItem">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Icon, Mode=OneWay}" Style="{ThemeResource IconTextBlockStyle}" />
                                    <TextBlock Text="{Binding Title, Mode=OneWay}" Style="{ThemeResource MenuTitleTextBlockStyle}" />
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </controls:ExtendSplitView.BottomGrid>
        </controls:ExtendSplitView>