Win10 SplitView动画

Question

我试图在Windows应用程序中实现一个FlipView控件，但我似乎无法像Windows10日历应用程序那样在打开和关闭状态之间进行动画转换。如果我看一下SplitView的默认样式，就会发现面板大小似乎是通过对ColumnDefinition的宽度属性进行动画处理而改变的。不能使用框架提供的默认动画来设置此属性的动画。任何帮助都将不胜感激。

Answer 1

在DefaultStyle中，查找ClosedCompactLeft可视状态。然后在PaneClipRectangleTransform.上修改动画的Duration查找此动画(这是您将要修改的动画)：

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

Answer 2

您可以在VisualState中定义Storyboard。如果扣动了扳机，故事就会自动开始。

代码结构示例：

<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，这样你就可以自己动画化它们了。