Style Triggers für Child Elements

Hallo zusammen,

ich bin leider noch ziemlich am Anfang mit meinen WPF/XAML-Kenntnissen und versuche mich gerade an meinem ersten Übungsprojekt.

In diesem Zuge bin ich heute auf ein erstes Problem gestoßen:
Und zwar habe ich einen Button-Typ, der jeweils ein Image- und ein TextBlock-Element als "Children" enthält.
Button.JPG -> siehe Anhang

XAML-Code:

<Button Style="{StaticResource BtnMenu}">
      <DockPanel LastChildFill="True">
            <Image Style="{StaticResource BtnMenuIcon}"/>
            <TextBlock Text="PATIENTEN" Margin="5 0 0 0"/>
      </DockPanel>
</Button>

Nun würde ich für den Button gerne folgenden Hover-Effekt implementieren wollen:* Ändern der Hintergrundfarbe des Buttons

• Ändern der Schriftfarbe des Buttons
• Ändern des Image-Element bzw. der Source-Property dessen, sodass ein anderes Bild angezeigt wird

Die Hintergrund- bzw. Schriftfarbe ändern sich beim Hovern über den Button bereits wie gewünscht, allerdings ändert sich das Bild bis dato erst, wenn ich mit der Maus direkt über dieses hover und nicht bereits, wenn die Maus auf dem Button steht.

Die Styles habe ich in der App.xaml wie folgt definiert:

<Application.Resources>
        
        <Style x:Key="BtnMenuIcon" TargetType="{x:Type Image}">
            <Setter Property="Source" Value="/Images/User.PNG"/>
            <Setter Property="DockPanel.Dock" Value="Left"/>
            <Setter Property="Stretch" Value="None"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Source"  Value="/Images/user_hover.PNG"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <Style x:Key="BtnMenu" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Height" Value="35"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Style.Resources>
                <Style TargetType="{x:Type Image}" BasedOn="{StaticResource BtnMenuIcon}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},
                            Path=IsMouseOver}" Value="True">
                            
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Style.Resources>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#0093d6"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        
    </Application.Resources>

Ist bestimmt für Fortgeschrittene keine schwierige Sache, aber ich weiß aktuell nicht wo mein Fehler genau liegt.
Insofern wäre es echt klasse, wenn mir hier jemand unter die Arme greifen könnte 😁

Vielen Dank vorab für die Hilfe und die Unterstützung.

Viele Grüße,
Johannes

Dafür kannst du die Setter.TargetName-Eigenschaft verwenden. In der Doku findest du ein Beispiel.