Button image background disappears when on hover

Question

When I create a button with a background and I hover over with my mouse, the background image disappears. Is there a way to override or cancel this process? I also read that I could set the image as content of the button, however I couldn't get the scaling right (filling the button) programmatically. Thanks in advance.

How I set the background:

BitmapImage bitmapImage = new BitmapImage(new Uri("http://www." + link + ".jpg"));
videoButton.Background = new ImageBrush()
{
   ImageSource = bitmapImage
};

Here is the same problem described with solution: http://stackoverflow.com/questions/10524508/change-button-image-on-hover-or-click — crea7or, Dec 20 '13 at 19:55
check this one http://stackoverflow.com/questions/20321492/how-to-create-an-image-button/20324070#20324070 — asitis, Dec 23 '13 at 06:56
I referred to that question in my question, however I need the image to scale. — Roy, Dec 25 '13 at 11:14

score 1 · Accepted Answer · answered Dec 27 '13 at 07:09

You need to create Setter property for button , in fact you need to customize whole button style

   <Style x:Key="ButtonStyleName" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}" />
        <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="12,4,12,4" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

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

score 1 · Answer 2 · answered Dec 31 '13 at 07:23

What's happening is that the PointerOver visual state for the button overrides the button's background removing your image background.

<VisualState x:Name="PointerOver">
  <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</VisualState>

One solution is the long way much like unica suggested which is to override the control template for the button and remove the storyboard that changes the background.

The simpler way is to make the button have some content which contains the background. Something along the lines of"

videoButton.Content = new Border
{
  Background = new ImageBrush
  {
    ImageSource = new BitmapImage(new Uri("http://www." + link + ".jpg"))
  }
};

score 0 · Answer 3 · answered Dec 20 '13 at 16:27

0

Try this code

        var brush = new ImageBrush();
        brush.ImageSource = new BitmapImage(new Uri("Images/myimage.png"));
        Button1.Background = brush;

I dont think you set the background properly

answered Dec 20 '13 at 16:27

techno

6,100
16
86
192

Button image background disappears when on hover

3 Answers3