WPF Button Mouseover Image

Question

I am learning C# and XAML to build windows applications. I wanted to create a button that has an image as its background. But when hovering over the button, the background of the button should change to another "highlighted" image. I attempted to add the background images into Resources.resx. I had to create a custom button using xaml styles to get rid of the default highlight effect of a wpf button.

I created a custom button from some code I found on SO. The code is (in a new resource dictionary):

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


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

What do I put so that the background changes to another image, whether it is in my resources.resx or another location? (Not sure where to put the image to access it). I searched SO but the solutions I found were not exactly what I am dealing with. If this is a duplicate question, I apologize.

Summary:

How do I change the background image of a button on a mouse over trigger in XAML? Where do I put the image so that it can be accessed in the trigger code?

Update This is what I have put as the trigger action, but the image does not update. I made sure to set the image build action to resource and put it in a folder called Resources.

The code is:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

The file structure is

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

Solution

The following is the complete code to allow for a mouseover image change on the button:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

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

For the actual image, I placed it in the Resources folder that is in the root directory. After importing the images in there using the resources tool in visual studio, I updated the image build settings to Resource in the Properties pane.

Thanks for the solution dbaseman

Solution 1

I think it's easier to just add the image to an /Images folder in the project. Then this is the syntax you use:

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" 
                Background="Transparent">
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
               <Setter.Value>
                   <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
               </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

(Assuming your image MyImage.jpg is in the Images folder in the root of your project.)

Just make sure that MyImage.jpg has its "Build Action" set to "Resource".

Solution 2

Here is another way to do this.

You can use the two events of the image MouseEnter and MouseLeave. Now in your code do this.

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

C#

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/Polaroid.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

Comments

[Ishikawa]

I have a Resource folder that my images are stored in. I added the code like you have but when I mouse over, the image does not change? I made sure the image has the "Build Action" set to Resource. Any ideas?

[McGarnagle]

@Ishikawa first, are you sure you're referencing the image correctly? Use a basic <Image Source='' /> element in design view, and make sure it appears correctly. The source should be just /Simon;component/Resources/image.jpg, but there's also a wizard button thing to have Visual Studio set it up.

[Ishikawa]

<Image Source="/Resources/btn_bg_hover.jpg" Stretch="None"></Image> I used this and the image came up properly. I tried putting just "/Resources/btn_bg_hover.jpg" into the original code but it still does not change anything. I really appreciate the help. Any ideas?

[McGarnagle]

@Ishikawa I see what the problem is ... the background has to be set in the style first.

[Ishikawa]

I just solved it! I forgot to add TargetName after <Setter Property="Background" TargetName. It works properly for me now. Thanks again for the help.

[McGarnagle]

@Ishikawa If you change Background from {TemplateBinding Background} to an actual value (say Transparent), it should work. Can you do that, or do you need the Template Binding?

[McGarnagle]

@Ishikawa alternatively, you can set Background in the Button itself. It just has to be set somewhere concretely before the Trigger will work.

[Phil]

so all buttons have the same image ?

[Taehyung Kim]

I think very bad code on above code. WPF support MVVM pattern. But, If use above code in code behind. It is terrible.