Change Button Image On Hover or Click - image

Question

How do I change the background image of a Button on Hover and on Click? The Visual Studio's UI does not seem to provide any easy way of doing it. Currently the default behavior seems to replace my image with a solid color, which looks aweful.
All I have so far is the Button base:
<Button Content="" Height="75" VerticalAlignment="Center" Width="75" HorizontalAlignment="Center" ClickMode="Press">
<Button.Background>
<ImageBrush ImageSource="../data/images/icons/skill_icon_0.png"/>
</Button.Background>
</Button>
I tried to handle events and manually set it, but it doesn't work for Pressed/Released:
Button skillButton = new Button();
skillButton.Width = 75;
skillButton.Height = 75;
skillButton.ClickMode = ClickMode.Press;
skillButton.Background = GetIconImage(iconIndex, 0);
skillButton.PointerEntered +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 1);
};
skillButton.PointerExited +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 0);
};
skillButton.PointerPressed +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
skillButton.Background = GetIconImage(iconIndex, 2);
};
skillButton.PointerReleased +=
(object sender, Windows.UI.Xaml.Input.PointerEventArgs e) => {
if (skillButton.FocusState == FocusState.Pointer)
skillButton.Background = GetIconImage(iconIndex, 1);
else skillButton.Background = GetIconImage(iconIndex, 0);
};

Answer 1

I ended up editing the ControlTemplate just to create and change the Border. But it could be used to change the image too.
<Button Width="75" Height="75" ClickMode="Press">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="RootElement" CornerRadius="10" BorderThickness="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
<VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Yellow" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="White"/>
</Border.BorderBrush>
<Border.Background>
<ImageBrush ImageSource="ms-appx:/data/images/icons/skill_icon_0.png"/>
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Answer 2

You're pretty much there. You can always apply a semi-transparent colour on top of your picture below your text/content but since you asked for changing the entire image, here's what you can do:
In Visual Studio 2012, if you already have a button mostly styled/configured to what you want, right click it, Edit Template -> Edit a Copy. Choose where you want to put the new style/template. It's like picking where to put the CSS. Could be in a global file (App.xaml or StandardStyle.xaml) or in the header (page resources) or inline (control resources).
The below XAML might be over-simplified and not work but it's the idea of it:
<ControlTemplate x:Key="MyButton" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverBackground"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
[...]
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
[...]
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" [...]>
<Grid>
<Image Source="[...]" Stretch="None" />
<Image x:Name="HoverBackground" Source="[...]" Visibility="Collapsed" />
<Image x:Name="PressedBackground" Source="[...]" Visibility="Collapsed" />
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
[...]/>
</Grid>
</Border>
[...]
</Grid>
</ControlTemplate>
Now you can place your 3 images in the 3 <Image> tags and since the ContentPresenter is on top, when you use the template with <Button Template="{StaticResource MyButton}">, you can still put content in and it will appear on top of your background image. Or you can just have a fully graphical button with the images too.

Answer 3

The windows UI XAML toolkit now has this functionality:
Image Button and Toggle Image Button
Use package manager console command "Install-Package winrtxamltoolkit" in visual studio 2012 to install the toolkit... It is really useful for many things.

Answer 4

Here is a style that turns visibility on and off for some extra images you add in Blend. The images are transparent and go behind the button background image by using "Send to Back" .. so in other words, you get to keep using a different background image brush for each button, plus the swapped Normal, Pointer, and Pressed images. So two background images overlaid.
<Style x:Key="qButtonStyle" 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="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 x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" >
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageNormal" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<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>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="Border"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualWhite">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="FocusVisualBlack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#7F006400"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePressed" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imagePointer" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePointer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite" />
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="imagePointer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPointer.png" Opacity="0"/>
<Image x:Name="imagePressed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/btnBGPressed.png" Opacity="0"/>
<Image x:Name="imageNormal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="ms-appx:///Assets/bgButtonBase.png"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}" Margin="3">
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0"
StrokeDashOffset="1.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" />
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0"
StrokeDashOffset="0.5" StrokeEndLineCap="Square"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 5

Use this Code in Pointer_Entered Event on the Button and it will work :)
private void Button_PointerEntered_1(object sender, PointerEventArgs e)
{
BitmapImage bmp = new BitmapImage();
Uri u = new Uri("ms-appx:/Images/Shapes/blueball.png", UriKind.RelativeOrAbsolute);
bmp.UriSource = u;
ImageBrush i = new ImageBrush();
i.ImageSource=bmp;
button.Background= i;
}

Answer 6

The reason the += for PointerPressed / PointerReleased won't work in your original code is because Button (actually ButtonBase) class-handles these events. That is because they're being consolidated into the Click event (on Release). If you used skillButton.AddHandler with first param PointerPressedEvent, second param a new handler reference to a named handler, and third param true, you could be using PointerPressed rather than the Entered/Exited as the event.