Andrew Simpson February 2016

Change BackGround Image of button for a few seconds only

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>

Answers


91378246 February 2016

<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)


Ilan February 2016

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" />
                                        < 

Post Status

Asked in February 2016
Viewed 2,108 times
Voted 8
Answered 2 times

Search




Leave an answer