添加scaleTransform Breaking WPF动画

我正在设置一个Explorer样式的界面的动画,左侧是导航器窗格,右侧是工作区。导航器显示注释列表或日历——两者都是用户控件。应用程序功能区上的切换按钮在两个视图之间切换。我正在用从旧的用户控件到新的用户控件的“解除”来设置更改的动画。

动画标记非常简单,并在本文的底部完全复制。我先声明用户控件、日历,然后声明记事本列表,以便记事本列表覆盖和隐藏日历。我通过淡出“备注列表”(将其不透明度属性从1设置为0)将其从“备注列表”(NoteList)分解为日历,通过淡出“备注列表”(将其不透明度属性从1设置为0)将其另一种方法分解为将同一属性从0设置为1:

从记事本列表到日历:

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />

从日历到记事本列表:

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />

动画运行良好,但我发现将不透明度设置为0只会使“笔记列表”控件透明--它仍然覆盖日历控件,这意味着我无法单击日历。所以,我在每个故事板中添加了一个scaleTransform,以便在笔记列表未显示时避免它的影响。

在从记事本列表到日历的分解中,我将在淡出为0后将记事本列表转换为0:

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="0" Duration="0:0:0" />

在从日历到记事本列表的“分解”中,我将把记事本列表转换为1,然后将其淡入1:

<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0" />
<DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />

这是我的问题:当我添加scaleTransform时,它将从记事本列表中的溶解分解分解到日历中——记事本列表的不透明度立即变为0,而不是超过预期的0.5秒。但是从日历到便笺列表的分解仍然可以很好地工作——在预期的0.5秒内,便笺列表的不透明度将从0到1设置动画。

我通过注释scaleTransform声明来测试这个问题,动画再次运行良好。取消对scaleTransforms的注释,当从注释列表转到日历时动画将再次中断。

有人能提出为什么添加scaleTransform会破坏这个动画,并且只在一个方向上?谢谢你的帮助!

——

以下是完整的动画标记:

<ribbon:RibbonToggleButton x:Name="NoteListViewButton" LargeImageSource="Images/ListViewLarge.png" SmallImageSource="Images/ListViewSmall.png" Label="Note List" Click="OnViewButtonClick">
    <ribbon:RibbonToggleButton.Triggers>
        <EventTrigger RoutedEvent="ribbon:RibbonToggleButton.Checked">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0" />
                        <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </ribbon:RibbonToggleButton.Triggers>
</ribbon:RibbonToggleButton>

<ribbon:RibbonToggleButton x:Name="CalendarViewButton" LargeImageSource="Images/CalendarViewLarge.png" SmallImageSource="Images/CalendarViewSmall.png" Label="Calendar" Click="OnViewButtonClick">
    <ribbon:RibbonToggleButton.Triggers>
        <EventTrigger RoutedEvent="ribbon:RibbonToggleButton.Checked">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetName="NoteListControl" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="0" Duration="0:0:0" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </ribbon:RibbonToggleButton.Triggers>
</ribbon:RibbonToggleButton