如何像拆分视图窗格一样转换 UWP 导航视图窗格

Question

我最近开始使用Windows 10 Fall Creators Update SDK附带的新NavigationView。以前，我使用的是 SplitView 控件。对我来说，最明显的缺失功能之一是窗格打开和关闭动画和/或过渡。我很确定有一种方法可以做到这一点，但我在网上根本找不到任何东西。这是我当前代码的基本等效项：

<NavigationView Name="MainNavigationView">
    <NavigationView.Transitions>
        <TransitionCollection>
            <PaneThemeTransition Edge="Left"/>
        </TransitionCollection>
    </NavigationView.Transitions>
    <NavigationView.MenuItems>
        <NavigationViewItem x:Uid="HomeView" Icon="Home" Content="Home Page"/>
        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader Content="Conversion Categories"/>
        <NavigationViewItem x:Uid="WordProcessingFileTypesView" Icon="AlignLeft" Content="Word Processing"/>
    </NavigationView.MenuItems>
    <Frame x:Name="ContentFrame" Margin="24">
        <Frame.ContentTransitions>
            <TransitionCollection>
                <NavigationThemeTransition/>
            </TransitionCollection>
        </Frame.ContentTransitions>
    </Frame>
</NavigationView>

我简化了它，使其尽可能易于设置。重申一下，我试图解决的问题是在切换汉堡菜单按钮时为NavigationView.MenuItems窗格获取打开和关闭动画。任何帮助，不胜感激。

Answer 1

我试图解决的问题是在切换汉堡菜单按钮时为 NavigationView.MenuItems 窗格获取打开和关闭动画。

如果编辑NavigationView的默认模板，您会发现它的ControlTemplate中实际上仍然有SplitView。因此，您的要求仍然是如何在打开/关闭窗格时为SplitView窗格添加动画。

然后，您可以编辑 SplitView 的模板并更改特定VisualTransition以满足您的要求。

之后，您可以将自定义SplitView的样式应用于包含在NavigationView默认模板中的SplitView控件。

<Style x:Key="SplitViewStyle1" TargetType="SplitView">
        ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SplitView">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="{Binding TemplateSettings.OpenPaneGridLength, FallbackValue=0, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                            <ColumnDefinition x:Name="ColumnDefinition2" Width="*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="DisplayModeStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Closed" To="OpenOverlayLeft">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PaneRoot" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HCPaneBorder" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneTransform" Storyboard.TargetProperty="TranslateX">
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.NegativeOpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                                <SplineDoubleKeyFrame KeySpline="0.1,0.9 0.2,1.0" KeyTime="0:0:0.35" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX">
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                                                <SplineDoubleKeyFrame KeySpline="0.1,0.9 0.2,1.0" KeyTime="0:0:0.35" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LightDismissLayer" Storyboard.TargetProperty="Opacity">
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0"/>
                                                <SplineDoubleKeyFrame KeySpline="0.1,0.9 0.2,1.0" KeyTime="0:0:0.35" Value="1.0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                    ......
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="PaneRoot" Background="{TemplateBinding PaneBackground}" Grid.ColumnSpan="2" HorizontalAlignment="Left" Visibility="Collapsed" Width="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" Canvas.ZIndex="1">
                            <Grid.Clip>
                                <RectangleGeometry x:Name="PaneClipRectangle">
                                    <RectangleGeometry.Transform>
                                        <CompositeTransform x:Name="PaneClipRectangleTransform"/>
                                    </RectangleGeometry.Transform>
                                </RectangleGeometry>
                            </Grid.Clip>
                            <Grid.RenderTransform>
                                <CompositeTransform x:Name="PaneTransform"/>
                            </Grid.RenderTransform>
                            <Border Child="{TemplateBinding Pane}"/>
                            <Rectangle x:Name="HCPaneBorder" Fill="{ThemeResource SystemControlForegroundTransparentBrush}" HorizontalAlignment="Right" Visibility="Collapsed" Width="1" x:DeferLoadStrategy="Lazy"/>
                        </Grid>
                        <Grid x:Name="ContentRoot" Grid.ColumnSpan="2">
                            <Border Child="{TemplateBinding Content}"/>
                            <Rectangle x:Name="LightDismissLayer" Fill="Transparent" Visibility="Collapsed"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<Style x:Key="NavigationViewStyle1" TargetType="NavigationView">
        ......
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="NavigationView">
                    <Grid x:Name="RootGrid">
                        ......
                        <Grid HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Width="{StaticResource PaneToggleButtonSize}" Canvas.ZIndex="100">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid x:Name="TogglePaneTopPadding"/>
                            <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Grid.Row="1" Style="{TemplateBinding PaneToggleButtonStyle}"/>
                        </Grid>
                        <SplitView x:Name="RootSplitView" DisplayMode="Overlay" Style="{StaticResource SplitViewStyle1}" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}">
                            <SplitView.Pane>
                                <Grid x:Name="PaneContentGrid">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="56"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="8"/>
                                    </Grid.RowDefinitions>
                                    <Grid x:Name="ContentPaneTopPadding"/>
                                    <Grid x:Name="AutoSuggestArea" Height="40" Grid.Row="2" VerticalAlignment="Center">
                                        <ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
                                        <Button x:Name="PaneAutoSuggestButton" Content="&#xE11A;" MinHeight="40" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
                                    </Grid>
                                    <NavigationViewList x:Name="MenuItemsHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemsSource="{TemplateBinding MenuItemsSource}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="3" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}"/>
                                    <Border x:Name="FooterContentBorder" Child="{TemplateBinding PaneFooter}" Grid.Row="4"/>
                                    <NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="5">
                                        <NavigationViewItem.Icon>
                                            <SymbolIcon Symbol="Setting"/>
                                        </NavigationViewItem.Icon>
                                    </NavigationViewItem>
                                </Grid>
                            </SplitView.Pane>
                            <Grid x:Name="ContentGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" MinHeight="48" VerticalContentAlignment="Stretch"/>
                                <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/>
                            </Grid>
                        </SplitView>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>