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つのストーリーボードが含まれています。マウスが画像に入ったときに開始するもの。そして、マウスが画像を離れたときに再生される別の1つ。

スタックパネルの子に気付いた場合は、次のとおりです。

<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" />

1つの画像はボタンの中に折り返され、もう1つの画像は折り返されないことに注意してください。

だから私の質問は：私が最初の子供（ボタン）にマウスを押したときになぜstoryboard2が再生されるのですか？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>
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 に答える