C# WPF RibbonButton Change Icon on MouseOver

Question

I have a Ribbonbutton which I want to change the Icon on MouseOver but it does not seem to work.

Here is my Code:

<RibbonButton Label="Verbindung testen" LargeImageSource="../Resources/Buttons/disconnect.png" Command="{Binding SettingsVM.TestConnectionCommand}">
                    <RibbonButton.Style>
                        <Style TargetType="{x:Type RibbonButton}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </RibbonButton.Style>
</RibbonButton>

It just shows the first Icon "disconnect.png" and on mouse over it gets highlighted like all the other buttons, but no image change.

I also tried it this way, with ControlTemplate:

<RibbonButton Label="Verbindung testen" LargeImageSource="../Resources/Buttons/disconnect.png" Command="{Binding SettingsVM.TestConnectionCommand}">
<RibbonButton.Template>
    <ControlTemplate TargetType="{x:Type RibbonButton}">
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</RibbonButton.Template>

Here it doesn't show an icon at all.

Answer 1

Found the Answer!

WPF RibbonButton: LargeImageSource and Label not updated via DataTriggers

The problem is your setting properties for LargeImageSource and Label in the button itself. When you do this it takes precidence over your style triggers. I suggest using setters in the style to set your defaults, and remove the property settings it the button.

So it has to be:

<RibbonButton Label="Verbindung testen" Command="{Binding SettingsVM.TestConnectionCommand}">
<RibbonButton.Style>
    <Style TargetType="{x:Type RibbonButton}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</RibbonButton.Style>

Removing the "LargeImageSource" from the Button itself.