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个故事板。一个在鼠标进入图像时开始的。当鼠标离开图像时播放另一个人。

如果你注意到stackpanel的子节点是：

<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会播放？我只希望当鼠标离开控件时，才会启动storyboard2，而不是当我按住鼠标时。第二个孩子（Image）没有得到那种行为，并且表现得像我期望的那样。

如果您需要包含图像的按钮样式，请执行以下操作：

<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);

    }

为什么动画会在鼠标停止时开始？

1 个答案: