父元素上鼠标悬停的触发器

Question

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

当用户将鼠标移到按钮上时，我希望在图像上产生效果。

现在我只需要在按钮上加一个效果就可以让它工作了。

以下是我目前所拥有的：

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