Change BackGround Image of button for a few seconds only

Question

I have a WPF app that uses Buttons (surprise)

I have styled it so that when the User clicks on the button the background image is changed to a red color.

What I want to happen is that after a few seconds the background reverts back to its original background.

I am not sure how to do this.

This is my code so far:

<Style x:Key="RoundButtonTemplate" TargetType="Button">
    <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">                       
                    <Border CornerRadius="5" Background="{TemplateBinding Background}"
                            BorderThickness="1">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{StaticResource RedButtonBackGround}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="74"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="27"></Setter>
        <Setter Property="Background">
            <Setter.Value>
                <ImageBrush ImageSource="{StaticResource ButtonBackGround}"/>
            </Setter.Value>
        </Setter>
    </Style>

This would be pretty easy to do in C# code... Does it need to be in XAML? — 91378246, Feb 08 '16 at 09:17
Hi, it does not need to be but I prefer to keep UI stuff in xaml you see — Andrew Simpson, Feb 08 '16 at 09:22
Possible duplicate of [change color of button in wpf C# after click and after 2 minutes retain the original color](http://stackoverflow.com/questions/19674662/change-color-of-button-in-wpf-c-sharp-after-click-and-after-2-minutes-retain-the) — Tyress, Feb 10 '16 at 09:00

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

<Style x:Key="AnimatedButton" TargetType="Button">
    <Setter Property="Background" Value="Red" />
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Background.Color">
                        <ColorAnimation To="Blue" Duration="0:0:4" />
                        <ColorAnimation To="Red" BeginTime="0:1:52" Duration="0:0:4" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

Copied from here (by sa_ddam213)

edited May 23 '17 at 12:07

Community

1
1

answered Feb 08 '16 at 09:24

91378246

488
6
14

Sorry this does not work for changing the image back ground? – Andrew Simpson Feb 08 '16 at 09:44
I think a combination out of [this](http://stackoverflow.com/questions/13443854/xaml-storyboard-for-background-imagebrush) and the answer should be what you are looking for... – 91378246 Feb 08 '16 at 09:50

Ilan · Accepted Answer · 2016-02-10T10:08:14.260

here is a solution to how animate the background image based on DoubleAnimationUsingKeyFrames and opacity.

Update - 2 Button style code (put to your resource section)

        <ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
    <ImageBrush x:Key="RedButtonBackGround" ImageSource="Images/RedButtonBackGround.jpg"/>
    <Style x:Key="RoundButtonTemplate" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                            </ContentPresenter>
                        </Border>
                        <Border x:Name="RectangleVisibleOnCklick" Opacity="0" CornerRadius="5" Background="{StaticResource RedButtonBackGround}" BorderThickness="1">
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
    </Style>

First DoubleAnimationUsingKeyFrames section changes the RectangleVisibleOnCklick's opacity from 1 to 0. in 2 sec.
Second DoubleAnimationUsingKeyFrames section changes the MyBorder's opacity from 0 to 1. in 2 sec.
To make the animation to be faster change the KeyTime parameters of both DoubleAnimationUsingKeyFrames sections:

Options

                                       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>

or

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>

Elliptic button with a Elliptic content

        <ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
    <ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
    <Style x:Key="RoundButtonTemplate" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse x:Name="MyBorder" Fill="{TemplateBinding Background}"></Ellipse>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
                            </ContentPresenter.OpacityMask>
                        </ContentPresenter>
                        <Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
    </Style>

Rectangle button with elliptic content (is elliptic when clicked due to KeyFrames animation using)

        <ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
    <ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
    <Style x:Key="RoundButtonTemplate" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Rectangle x:Name="MyBorder" Fill="{TemplateBinding Background}"></Rectangle>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                            <ContentPresenter.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
                            </ContentPresenter.OpacityMask>
                        </ContentPresenter>
                        <Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
    </Style>

Regards.

@AndrewSimpson you can manage that, just remove a EasingDoubleKeyFrame(s). — Ilan, Feb 08 '16 at 19:14
Hi, i think it is more a case of my lack of knowledge. CSS in web sites is definitely not my strong point and styling in wpf is similar to me. The image I had was a blue rounded button and whilst the transparency affect works really well I get a flat (not rounded) red button. — Andrew Simpson, Feb 08 '16 at 20:20
@AndrewSimpson in case you want to get a rounded button, you should create a rounded button. the fact that the content of the button is rounded doesn't means that the button will be rounded as its content. do you need a rounded button? — Ilan, Feb 09 '16 at 07:24
is what I am currently using to get the desired affect I want and I want it to be replicated when the background is red too — Andrew Simpson, Feb 09 '16 at 08:00
@AndrewSimpson please update your question in a way we other people will be able to understand what about the article. please write what do you want will happened when you click the button. — Ilan, Feb 09 '16 at 10:09
hi, I have only just got back in. I will update and answer everyone who has been kind enough to reply. thanks — Andrew Simpson, Feb 09 '16 at 10:16
hi again, but very quickly I have added a comment indicating the desired look and feel of my button, It is also in the original question? — Andrew Simpson, Feb 09 '16 at 10:17
@AndrewSimpson Hi, please check the Updated Button style code section. There is an updated rounded rectangel with red background is visible when you click the button. — Ilan, Feb 10 '16 at 07:52
Hi, it is kind of you to keep trying to help me but my button uses 2 images: ButtonBackGround and RedButtonBackGround. All I want is this 2nd image displayed for a few seconds and then replaced with the original one after keypress. The button itself has a border style round it that makes it rounded, I cannot see where you are using the 2nd image in your code example? — Andrew Simpson, Feb 10 '16 at 08:05
@AndrewSimpson please add the ImageBrush as a resource pointing to your image(ImageSource), and set the background of your inner border (named RectangleVisibleOnCklick) to be relative to the added ImageBrush resource. please see the update-2 section. — Ilan, Feb 10 '16 at 08:20
hi, i put that in and the buttons do toggle between the 2 images - thanks - but the transition is a bit slow. how do i quicken this up? I tried playing around with the key times but all i succeeded in doing was never showing the original image again? — Andrew Simpson, Feb 10 '16 at 08:31

Change BackGround Image of button for a few seconds only

2 Answers2