Can SplitView 's Pane place the bottom of page - xaml

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>