How can i change background image of a button when hover or click in XAML for Windows 8?

Question

I got a question about changing the background image of a button when it's clicked.

I tried searching on google but i couldn't find something that worked for me.

Well here's my code

<Button Grid.Column="0" Grid.Row="0" x:Name="btnHome" VerticalAlignment="Stretch" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" Click="btnHome_Click" PointerEntered="btnHome_PointerEntered">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="RootElement">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            //I want my background change here
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            //And here
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border.Background>
                                <ImageBrush ImageSource="images/back_button.png"/>
                            </Border.Background>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

i also tried this

private void btnHome_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        BitmapImage bmp = new BitmapImage();
        Uri u = new Uri("ms-appx:images/back_button_mouseover.png", UriKind.RelativeOrAbsolute);
        bmp.UriSource = u;
        ImageBrush i = new ImageBrush();
        i.ImageSource = bmp;
        btnHome.Background = i;
    }

But unfortunately this worked neither

score 3 · Answer 1 · answered Nov 29 '12 at 11:01

3

With WinRT Xaml Toolkit, you can have all the effects. Reference binaries from the toolkit. Add xml namespace to your page:

xmlns:controls="using:WinRTXamlToolkit.Controls"

Use button like:

<controls:ImageButton HorizonalAlignment="Center"
    NormalStateImageSource="normal.png"
    HoverStateImageSource="hover.png"
    PressedStateImageSource="pressed.png" />

Other than this, it has a lot of useful things.

answered Nov 29 '12 at 11:01

Typist

1,464
9
14

This works fine, but i also have to change images depending on data that i get. Got a sugestion? – apero Nov 29 '12 at 14:54
1

You can use data binding to these ImageSources or write a converter for getting appropriate image. – Typist Nov 29 '12 at 14:58
i'm a beginner programmer, can you show me how i can data bind imageSources? i've tried it before as you can see above, but it doesn't work. any code example would be great – apero Nov 29 '12 at 15:30
1

You can start with this sample - http://code.msdn.microsoft.com/windowsapps/Data-Binding-7b1d67b5 – Typist Nov 29 '12 at 15:35

score 0 · Accepted Answer · answered Dec 14 '12 at 14:06

I found the anwser on this question.

You have to edit the template of your control.

You can do it with Blend, or "by hand".

Retrieve the default template of your button(by pressing right button, edit template, edit copy, give it a name and press ok) and then customize it in order to fit to your needs

EDIT : Here is MSDN Ressource on RadioButton template customization.

score 0 · Answer 3 · answered Feb 08 '13 at 21:06

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>

score 0 · Answer 4 · answered Feb 28 '16 at 12:32

I'm using this code:

<Button Style="{StaticResource anyButton}" Cursor="Hand" ClickMode="Press" Click="Button_Click_1" />

Style:

        <Style x:Key="anyButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <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="False">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image1.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image2.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="C:\Users\image3.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

How can i change background image of a button when hover or click in XAML for Windows 8?

4 Answers4

Linked