11

In my WPF window application, when I take the mouse over my button, the background image on the button disappears and the button appears as if it does not have any image. What I want is, when the mouse is on the button, or when the button is clicked, the image still should be shown on the button, it shouldn't disappear.

Here is my code:

 <Button Margin="465, 3, 0, 0" Width="25" Height="20" IsEnabled="True" IsDefault="False" IsCancel="False" BorderBrush="{x:Null}" ToolTip="Reload pads list"> <Button.Background> <ImageBrush ImageSource="/FieldPlanner;component/Images/reload.gif" /> </Button.Background> </Button>
halfer
  • 19,824
  • 17
  • 99
  • 186
WAQ
  • 2,556
  • 6
  • 45
  • 86
  • 1
    Do you have any EventTriggers or code behind that might Change the Image? – bash.d Jun 18 '13 at 08:50
  • No. The image on the button won't change from anywhere. I'm specifying the image in the Xaml on the design time. But, if I have to change the image on triggers then no problem, I will do that too. – WAQ Jun 18 '13 at 09:05
  • Can you post your code? Style button and button creation. – Sonhja Jun 18 '13 at 10:09
  • @Sonhja here is the XAML for the button and background image – WAQ Jun 18 '13 at 10:15

3 Answers3

11

What is happening to you is normal. When you create a button, it will use its default properties in case you don't change/override them.

In this case, when you create your button, you are overriding Background property, but only for normal state of your button. If you want background to change also when hovering, you should tell the button to do so.

For this purpose, I suggest you to override the button Template using styles, like this:

<Window x:Class="ButtonTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ImageBrush x:Key="ButtonImage" ImageSource="/ButtonTest;component/Resources/ok.png"></ImageBrush>
    <Style TargetType="Button">
        <Setter Property="Background" Value="{StaticResource ButtonImage}"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Blue" />
                            <Setter Property="Cursor" Value="Hand" />
                            <!-- If we don't tell the background to change on hover, it will remain the same -->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>

In this case, this style will be applied for all your buttons. You can specify which button to apply style by adding an x:Key to your style and then specify it in your button:

<Style TargetType="Button" x:Key="ButtonStyled">

.....

<Button Style="{StaticResource ButtonStyled}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="84,75,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
Sonhja
  • 8,230
  • 20
  • 73
  • 131
  • I used the code you provided. Work great if I dont give it x:key="ButtonStyled". All the buttons get the styled behavior. But when I give my required button Style = "ButtonStyled", I get an exception saying "Set property 'System.Windows.FrameworkElement.Style' threw an exception". Any idea on this? – WAQ Jun 18 '13 at 10:59
  • 1
    @WasimQadir it should be `Style="{StaticResource ButtonStyled}"` – lisp Jun 18 '13 at 11:30
  • Yes sorry, I was writing using my memory, and sometimes it doesn't work... :P Glad to help – Sonhja Jun 18 '13 at 13:42
10

I am a little late to the party, but you are all doing this too complicated.

All you have to do is set the Content and the Background:

<Button x:Name="YouTubeButton" Width="148" Height="76" BorderBrush="Black"
  Click="YouTubeButton_Click" Margin="112,20,112,0"
  MouseEnter="Button_OnMouseEnter" MouseLeave="Button_MouseLeave">
  <Button.Content>
      <Image Source="Images/YouTube.png" />
  </Button.Content>
  <Button.Background>
      <ImageBrush ImageSource="Images/YouTube.png" />
  </Button.Background>
</Button>

(Optional - makes the mouse behave like a hand clicking a link)
#region Button_MouseLeave(object sender, MouseEventArgs e)
/// <summary>
/// This event is fired when the mouse leaves a button
/// </summary>
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
    // Change the cursor back to default
    Cursor = null;
}
#endregion

#region Button_OnMouseEnter(object sender, EventArgs e)
/// <summary>
/// This event is fired when the mouse hovers over a button
/// </summary>
public void Button_OnMouseEnter(object sender, EventArgs e)
{
    // Change the cursor to a Hand pointer
    Cursor = Cursors.Hand;
}
#endregion
0

Here is what I'm using..

<Button
  x:Name="buttonName"
  Style="{DynamicResource myButtonStyle}" 
  HorizontalContentAlignment="Center"
  HorizontalAlignment="Left"
  Width="130"
  VerticalAlignment="Top"
  Height="30"
>
  <ContentControl>
    <Image Source="/MYAPPNAME;component/buttonimage.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"  />
  </ContentControl>
</Button>

And the related style (myButtonStyle) code is:

<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="GhostWhite"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border
          x:Name="border" 
          CornerRadius="6"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Background="{TemplateBinding Background}"
          SnapsToDevicePixels="true"
        >
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31