wpfxaml

change image source from parent hover in pure XAML


I have a user control that contain a border with some elements (image and Textblock in a StackPanel)

Is it possible to change Image source in pure XAML when border is hover ?

I can change border background easily. I can change source image when image is hover. But I want "hovered image" when border is hover.

my styles :

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

my border :

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

Solution

  • Replace the Trigger in the Image Style by a DataTrigger with a RelativeSource Binding:

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