WPF Button Image when mouseover and/or disabled

Question

I am trying to style a button such that when the button is enabled and not mouseover it shows a default image, when button is enabled and mouseover it shows a different image and when it is disabled (regardless of mouseover) it shows a third image.

I tried following this answer but when I run my program I get an error of Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number '47' and line position '45'. which equates to the line identified by <--- in the snippet below:

        <!-- Edit Button using edit.png (pencil) -->
        <Style x:Key="PencilEditEnabledButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border HorizontalAlignment="Center"
                                VerticalAlignment="Center">
                            <!-- default image -->
                            <Image x:Name="ButtonImage" 
                                   Source="/myLibrary;component/Resources/edit.png"
                                   Height="20"/>
                        </Border>

                        <ControlTemplate.Triggers>
                            <!-- update image on mouseover -->
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="ButtonImage" 
                                        Property="Source"
                                        Value="/myLibrary;component/Resources/edit_mouseover.png" />
                            </Trigger>

                            <!-- update image when button is disabled -->
                            <Trigger Property="IsEnabled" Value="true">
                                <Setter TargetName="ButtonImage"             <---
                                        Property="Source"
                                        Value="/myLibrary;component/Resources/edit_disabled.png" />
                            </Trigger>                                

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Is this possible and if so how do I correct the Style.

Tacho Jelev Tacho Jelev · Accepted Answer · 2017-01-24T20:18:56

Have you included your "Resources" folder into your project?

Click Show All Files icon in the Solution Explorer.
Right click your newly appeared "Resources" Folder.
Click "Include in project".
Rebuild and run.

WPF Button Image when mouseover and/or disabled

1 Answers