Xaml Win10 SplitView动画

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

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

---

您可以在

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的类并自定义它的样式，这样您就可以在代码中获得
窗格
和
内容
，这样您就可以自己制作动画了。
这似乎并没有达到我的预期效果。左面板现在在关闭时设置动画，但在打开时不设置动画。此外，右（大）面板根本没有动画，它只是滑到关闭面板下方（这可以在对答案中提供的DoubleAnimation应用大持续时间时看到）。我也尝试过使用此控件，不幸的是，在使用内联菜单时尝试设置过渡动画时，它非常有限。到目前为止，我在这方面也没有取得成功：/
<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>