在父元素上触发鼠标悬停

Question

如果已经写了一个包含图像和文本的按钮usercontrol.

当用户将鼠标移到按钮上时,我想要对图像产生影响.

现在我可以让它对按钮产生影响.

这是我到目前为止:

<Button x:Class="Example.Controls.MyButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Name="MyButtonControl"
        Margin="5"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        d:DesignHeight="80"
        d:DesignWidth="120"
        Style="{DynamicResource SomeButtonStyle}"
        mc:Ignorable="d">
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources.xaml" />
                <ResourceDictionary>
                    <Style x:Key="SomeButtonStyle"
                           BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                           TargetType="Button">
                        <Style.Triggers>
                            <Trigger Property="Button.IsMouseOver" Value="True">
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Button.Resources>
    <Border HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            BorderBrush="SlateGray"
            BorderThickness="1">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="5*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="9*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>

            <Image Grid.Row="0"
                   Grid.Column="1"
                   Margin="7"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Stretch"
                   Source="{Binding ElementName=MyButtonControl,
                                    Path=Image}" />

            <TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Margin="2"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Stretch"
                       Style="{DynamicResource MenuButtonText}"
                       Text="{Binding ElementName=MyButtonControl,
                                      Path=Text}" />
        </Grid>
    </Border>
</Button>

现在我希望效果只影响图像,或者图像和文本.

这可以通过某种方式实现吗？

现在我正试图在图像上触发,并让它在父节点的鼠标悬停时触发.

这是测试代码:

<Image Grid.Row="0"
                   Grid.Column="1"
                   Margin="7"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Stretch"
                   Source="{Binding ElementName=ImageButtonControl,
                                    Path=Image}">
                <Image.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Image.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>

但触发器没有改变任何东西......

Answer 1

秒触发器有效

                <Image.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Image.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>