1

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

<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 会播放？我只希望 storyboard2 在鼠标离开控件时启动，而不是在我按住鼠标时启动。第二个孩子（图像）没有得到那种行为，而是按照我期望的方式行事。

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

<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>
4

1 回答 1

0

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

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

    }
于 2012-06-06T17:43:16.843 回答