Changing the Image button on hover or click

Question

How to change the background image of a button when hovering and pressing? The Visual Studio user interface does not seem to provide an easy way to do this. Currently, the default behavior seems to replace my image with a solid color that looks impressive.

All I have so far is the foundation of Button:

<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 process events and manually set them, but it does not work for pushed / 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 finished editing the ControlTemplate just to create and change the border. But it can also be used to change the image.

  <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 are pretty much there. You can always apply a translucent color on top of your image under your text / content, but since you asked to change the whole image, here is what you can do:

In Visual Studio 2012, if you already have a button mainly in style / configured for what you want, right-click it, Edit Template -> Edit a Copy. Choose where you want to place the new style / template. This is similar to deciding where to place the CSS. It can be in the global file (App.xaml or StandardStyle.xaml) or in the header (page resources) or inline (management resources).

Below XAML may be overly simplified and does not work, but this is his idea:

 <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 put your 3 images in 3 <Image> tags, and since the ContentPresenter is on top, when you use a template with <Button Template="{StaticResource MyButton}"> , you can put the content in it and it will appear on top of your background form. Or you can just have a fully graphic button with images.

Answer 3

The XAML Windows UI toolkit now has this feature:

Image Button and Image Switch Button

Use the “Install-Package winrtxamltoolkit” package manager manager console in visual studio 2012 to install the toolkit ... This is really useful for many things.

Answer 4

Here is a style that turns visibility on and off for some additional images added to Blend. Images are transparent and follow the background image of the button using Send to Background .. so in other words, you can use a different brush for each image, as well as replaced images Normal, Pointer and Pressed. Thus, two background images are superimposed.

  <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 the 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 + = for PointerPressed / PointerReleased won't work in your source code, because Button (actually ButtonBase) handles these events with the class. This is because they are combined into a Click event (upon release). If you used skillButton.AddHandler with the first PointerPressedEvent parameter, the second parameter is a new handler reference to the named handler, and the third parameter is true, you can use PointerPressed rather than Entered / Exited as an event.