Question

我有一个使用按钮（惊喜）的WPF应用程序

我设计了它，以便当用户点击按钮时，背景图像会变为红色。

我想要发生的是，几秒钟后背景会恢复原来的背景。

我不知道该怎么做。

到目前为止，这是我的代码：

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

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

从here（由sa_ddam213）

复制

Answer 2

这是一个基于DoubleAnimationUsingKeyFrames和不透明度如何为背景图像设置动画的解决方案。

更新 - 2个按钮样式代码（放到您的资源部分）

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

第一个DoubleAnimationUsingKeyFrames部分在2秒内将RectangleVisibleOnCklick的不透明度从1更改为0。
第二个DoubleAnimationUsingKeyFrames部分在2秒内将MyBorder的不透明度从0更改为1.
要使动画更快，请更改DoubleAnimationUsingKeyFrames部分的KeyTime参数：

选项

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

或

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

具有椭圆内容的椭圆按钮

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

具有椭圆内容的矩形按钮（由于KeyFrames动画使用而点击时为椭圆形）

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

问候。

仅将按钮的BackGround图像更改几秒钟

2 个答案: