Xaml 可以拆分视图'；s窗格放置在页面底部

默认情况下，SplitView的窗格显示在页面的左侧。在小屏幕（如手机）中，当窗格位于页面底部时，很容易触摸菜单项。那么会有一种风格或VisualState吗

这是截图

大屏幕上，splitview显示正常

小屏幕，splitview的窗格显示在底部

我有一个解决方案作为答案，我发现它似乎比以前使用更多的内存。关于这个问题有更好的解决方案吗？

完整代码：

1.从SplitView中获取一个新的类ExtendSplitView，在样式文件中，默认SpitView有两个ColumnDefinition

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

BottomGrid将显示底部菜单项，MinBottomWidth设置一个显示BottomGrid的最小宽度

3.在样式中，我们使用底部网格

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

4.定义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.然后我们将使用如下控件：

<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>

---

我认为您的问题的实际答案很简单：不。拆分视图只能在左侧或右侧显示窗格。为了让它在底部或顶部显示，您将扮演选项卡控件的角色，或者在WinRT XAML中使用带有re模板头的Pivot控件

如果您对Pivot控件的重新模板化感兴趣，XAML平台团队已经为您准备了一个示例—请注意，他们的代码还远未定稿：

---

祝你好运

选择最好的答案被认为是礼貌的。也许这是一个更好的选择。非常感谢

<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>