Question

默认情况下，SplitView的窗格显示在页面左侧。当在小屏幕（例如电话）中时，当窗格放置在页面底部时，将很容易触摸菜单项。那么会有样式还是VisualState？

这是丝网印刷

大屏幕，splitview显示正常

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

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

Answer 1

1.从SplitView获取一个新类ExtendSplitView，在Style文件中，默认的SpitView有两个ColumnDefinitions.I像这样添加RowDefinitions

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

2.在ExtendSplitView和MinBottomWidth中添加dp，例如：

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

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

3.在风格中，我们使用了BottomGrid

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

Answer 2

我认为你问题的实际答案很简单，没有。 SplitView只能显示左侧或右侧的窗格。要在Bottom或Top上显示它，你将进入Tab控件的角色，或者在WinRT-XAML中显示带有重新模板头的Pivot控件。

如果您对Pivot控件的重新模板感兴趣，XAML平台团队已经整理了一个示例来帮助您入门 - 请注意他们的代码远非最终版：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlPivot

祝你好运！

SplitView的Pane可以放在页面底部

2 个答案: