在纯 XAML 中更改父级悬停的图像源

Question

我有一个用户控件，其中包含带有一些元素的边框（StackPanel 中的图像和文本块）

边框悬停时是否可以更改纯 XAML 中的图像源？

我可以轻松更改边框背景。 当图像悬停时，我可以更改源图像。 但当边框悬停时我想要“悬停图像”。

我的风格：

    <Style TargetType="TextBlock"  x:Key="Button.Text">
        <Setter Property="FontFamily" Value="{StaticResource Fonts.InterMedium}"/>
        <Setter Property="FontSize" Value="10"/>
        <Setter Property="Foreground" Value="Gray"/>
    </Style>

    <Style TargetType="Border" x:Key="Button.Border">
        <Setter Property="Background" Value="Gray" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Blue" />
            </Trigger>
        </Style.Triggers>
    </Style>

我的边界：

<Border CornerRadius="6" 
        Width="80"
        HorizontalAlignment="Left"
        Style="{StaticResource Button.Border}"
        >
    <StackPanel>
        <behavior:Interaction.Triggers>
            <behavior:EventTrigger EventName="MouseLeftButtonDown">
                <behavior:InvokeCommandAction Command="{Binding DataContext.RestoreCommand, RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}" 
                                                />
            </behavior:EventTrigger>
        </behavior:Interaction.Triggers>
        <Image Margin="0, 8, 0, 0"
               HorizontalAlignment="Center"
               Width="24" Height="24"
               >
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="component/Resources/Icon.ReverseLeft.png"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Source" Value="component/Resources/Icon.ReverseLeft.Hover.png"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <TextBlock Style="{StaticResource Button.Text}"
                   Margin="0, 2, 0, 4"
                   HorizontalAlignment="Center"
                   Text="{DynamicResource Restore}"
                   />
    </StackPanel>
</Border>

Answer 1

将图像样式中的

Trigger

替换为

DataTrigger

，如下所示：

<Style TargetType="Image">
    <Setter Property="Source" Value="Resources/Icon.ReverseLeft.png"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsMouseOver,
                               RelativeSource={RelativeSource AncestorType=Border}}"
                     Value="True">
            <Setter Property="Source" Value="Resources/Icon.ReverseLeft.Hover.png"/>
        </DataTrigger>
    </Style.Triggers>
</Style>