Win10 SplitView动画

Question

我试图在Win10 UWP应用中实现FlipView控件，但我似乎无法像在Windows 10日历应用中那样在打开和关闭状态之间转换动画。如果我查看SplitView的默认样式，似乎通过设置ColumnDefinition的Width属性来更改面板大小。无法使用框架提供的默认动画对此属性进行动画处理。任何帮助将不胜感激。

Answer 1

在DefaultStyle中，查找 ClosedCompactLeft 可视状态。然后在 PaneClipRectangleTransform 上修改动画的持续时间。查找此动画（您将修改的动画）：

 <DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
                                        Storyboard.TargetProperty="TranslateX"
                                        To="{Binding TemplateSettings.NegativeOpenPaneLengthMinusCompactLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                        Duration="0:0:0.0" />

Answer 2

您可以在Storyboard内定义VisualState。如果触发器被触发，则故事将自动开始。

代码结构示例：

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                     <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-260">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1020" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
                            <EasingDoubleKeyFrame KeyTime="0" Value="-260"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

如果您使用的是SplitView，则可以编写一个扩展SplitView的类并自定义它的样式，这样您就可以在代码中获得Pane和Content，这样就可以了自己制作动画。