在父元素上触发鼠标悬停

Question

如果编写了一个包含图像和文本的按钮用户控件。

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

现在我可以让它在按钮上产生效果。

这是我目前所拥有的：

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

Answer 2

您必须在ControlTemplate 中定义按钮的外观和感觉，以便能够使用触发器中的TargetName 属性来定位图像控件。 例如：

<Button Width="200" Height="200">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <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 x:Name="MyImage" 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"
                       Text="{Binding ElementName=MyButtonControl,
                                      Path=Text}" />
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter Property="Button.Effect" TargetName="MyImage">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Button.Template>
        </Button>