为什么动画在鼠标按下时开始

Question

我有一个由图像组成的堆栈面板：

<StackPanel Height="115" Name="stackPanel1" Orientation="Horizontal" Margin="0">
    <!-- *******************Stackpanel resources****************************-->
    <StackPanel.Resources>
        <Style TargetType="{x:Type Image}">
            <Style.Resources>
                <Storyboard x:Key="Storyboard1">
                    <DoubleAnimationUsingKeyFrames 
                        Storyboard.TargetProperty="(FrameworkElement.Width)">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="100">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BackEase EasingMode="EaseOut" />
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>
                    </DoubleAnimationUsingKeyFrames>
                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)">
                        <EasingThicknessKeyFrame KeyTime="0:0:0.9" Value="0" />
                    </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="Storyboard2">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="50">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BackEase EasingMode="EaseOut" />
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>
                    </DoubleAnimationUsingKeyFrames>
                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)">
                        <EasingThicknessKeyFrame KeyTime="0:0:0.9" Value="5" />
                    </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>
            <Setter Property="Width" Value="60"></Setter>
            <Setter Property="Stretch" Value="Uniform"></Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}" />
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>
    <!-- *****************************************************************-->
    <!-- ***************** Stackpanel content: ************************** -->
    <Button Command="{Binding AddItemCommand}" Style="{StaticResource TransparentButton}">
        <Image Name="imgAdd" Source="/WpfApp1;component/Add1.png"  />
    </Button>
    <Image Name="imgImport" Source="/WpfApp1;component/png-symbol.png" />
    <!-- ********************************************************** -->       
</StackPanel>

如您所见，堆栈面板的资源包含 2 个故事板。当鼠标进入图像时开始。另一个在鼠标离开图像时播放。

如果您注意到堆栈面板的子项是：

<Button Command="{Binding AddItemCommand}" Style="{StaticResource TransparentButton}">
    <Image Name="imgAdd" Source="/WpfApp1;component/Add1.png"  />
</Button>
<Image Name="imgImport" Source="/WpfApp1;component/png-symbol.png" />

请注意，一个图像包装在按钮内，而另一个图像则不是。

所以我的问题是：当我将鼠标按住第一个孩子（按钮）时，为什么会出现 Storyboard2 ？我只希望情节提要 2 在鼠标离开控件时启动，而不是在我按住鼠标时启动。第二个孩子（图像）没有得到这种行为，并且按照我期望的方式行事。

如果您需要在此处包装图像的按钮的样式，它是：

<UserControl.Resources>
    <Style TargetType="Button" x:Key="TransparentButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent">
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

Answer 1

通过添加事件处理程序来防止事件进入隧道来解决它：

PreviewMouseDown="Button_PreviewMouseDown"

然后设置event.handled=true

换句话说，有：

XAML：

<Button Command="{Binding AddItemCommand}" 
        PreviewMouseDown="Button_PreviewMouseDown" 
        Style="{StaticResource TransparentButton}">
    <Image Name="imgAdd" Source="/WpfApp1;component/Add1.png"  />
</Button>

代码隐藏：

    private void Button_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        e.Handled = true; // privent event from tunneling
        // then execute the command that was associated with the button
        ((Button)sender).Command.Execute(sender);
    }