用于动画目的的WPF冒泡mouseenter和mouseleave事件

Question

在我的应用程序中有一个控件，其中包含大量的卡片，每个卡片都放置一个ToggleButton。我将在MouseEnter卡上应用一些效果，我将在按钮上应用另一个效果，当鼠标超过它时，但不会降低卡的效果。但MouseEnter和MouseLeave事件不是泡沫事件，它们会控制和消失。解决此冲突的最简单方法是什么？

这是一个简化的XAML代码。

XAML

<Grid>  <Image Source="{Binding Path=PosterPath, Converter={StaticResource imageConverter}}" Opacity="1.0">
        <Image.Effect>
            <DropShadowEffect ... />
        </Image.Effect>

        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource ShowMenuAnimation}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Image.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource HideMenuAnimation}"/>
            </EventTrigger>
        </Image.Triggers>

    </Image>

    <ToggleButton x:Name="bPlay" ...  
                  IsChecked="{Binding Path=(common:CommonViewSettings.AlwaysFalse), Mode=TwoWay}" 
                  Style="{DynamicResource MetroCircleToggleButtonStyle}" 
                  Foreground="{DynamicResource LinkedTextBrush}" Visibility="Hidden"
                  BorderBrush="{DynamicResource LinkedTextBrush}">
        <Rectangle Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_control_play}"/>
            </Rectangle.OpacityMask>
        </Rectangle>
        <ToggleButton.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource ShowBorderBrush}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource HideBorderBrush}"/>
            </EventTrigger>
        </ToggleButton.Triggers>
    </ToggleButton>