如何在不破坏每个动画的情况下将这两个动画组合在一起？

Question

我正在建立WPF中或多或少的面包屑控件。列表框中的每个项目都包含一个在项目文本下划线的选择边框。在数据触发器内部，我添加了enter / exit操作，当ListBoxItem的IsSelected属性为true时，该操作将淡入/淡出选择边框的不透明度。当IsSelected为false且IsMouseOver为true时，我还添加了一个多重触发器，其中包含输入/退出操作，这些操作将使用ScaleTransform从原点的中心扩展/收缩选择边框。

另外，每个触发器均正常工作。问题是当我两个都准备就绪时。我看到一种行为，该行为导致未选中的项目消失，但在第一个鼠标上没有展开，然后奇怪的是，在随后的鼠标上按预期工作。

此外，在选择了未选择的项目之后，即使确认通过Snoop设置了属性，选择边框也会完全消失，并且似乎没有动画可应用于鼠标悬停。

我在这里想念什么？

<DataTemplate.Resources>
                        <Storyboard x:Key="ExpandSelectionBorder">
                            <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"
                                             Storyboard.TargetName="SelectionBorder"
                                             To="1.0"
                                             Duration="0:0:0.25">
                                <DoubleAnimation.EasingFunction>
                                    <ExponentialEase EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                        <Storyboard x:Key="ContractSelectionBorder">
                            <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"
                                             Storyboard.TargetName="SelectionBorder"
                                             To="0.0"
                                             Duration="0:0:0">
                                <DoubleAnimation.EasingFunction>
                                    <ExponentialEase EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                        <Storyboard x:Key="FadeInSelectionBorder">
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             Storyboard.TargetName="SelectionBorder"
                                             To="1.0"
                                             Duration="0:0:0.25">
                            </DoubleAnimation>
                        </Storyboard>
                        <Storyboard x:Key="FadeOutSelectionBorder">
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             Storyboard.TargetName="SelectionBorder"
                                             To="0.0"
                                             Duration="0:0:0">
                            </DoubleAnimation>
                        </Storyboard>
                    </DataTemplate.Resources>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
                                     Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource FadeInSelectionBorder}" />
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource FadeOutSelectionBorder}" />
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsMouseOver}"
                                           Value="True" />
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
                                           Value="False" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ExpandSelectionBorder}" />
                                <BeginStoryboard Storyboard="{StaticResource FadeInSelectionBorder}" />
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ContractSelectionBorder}" />
                                <BeginStoryboard Storyboard="{StaticResource FadeOutSelectionBorder}" />
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                    </DataTemplate.Triggers>

编辑

我现在正在尝试使用ListBoxItem控件模板上的Visual State Manager来完成此操作。这使我更加接近，但是我不确定在已选择ListBoxItem的情况下如何防止鼠标悬停状态使比例转换动画化。

<VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                     Storyboard.TargetName="SelectionBorder"
                                                                     To="1.0"
                                                                     Duration="0:0:0.25">
                                                    </DoubleAnimation>
                                                </Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"
                                                                 Storyboard.TargetName="SelectionBorder"
                                                                 From="0.0"
                                                                 To="1.0"
                                                                 Duration="0:0:0.25">
                                                    <DoubleAnimation.EasingFunction>
                                                        <ExponentialEase EasingMode="EaseOut" />
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>

                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                 Storyboard.TargetName="SelectionBorder"
                                                                 To="0.0"
                                                                 Duration="0:0:0">
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                 Storyboard.TargetName="SelectionBorder"
                                                                 To="1.0"
                                                                 Duration="0:0:0.25">
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>