[英]How to make button and background flash in wpf
The issue I am having is when a user clicks a button I want the button to start flashing from 100% visible to around 20% visible and the background of the WPF window to change colors from #ffffff
to #d6786a
and this should happen untill the button is clicked again. 我遇到的问题是,当用户点击一个按钮,我想按钮,开始从100%可见闪烁,约20%可见光和WPF窗口改变从颜色的背景#ffffff
至#d6786a
,这应该发生的,直到再次单击按钮。 Then the animations should stop. 然后动画应停止。
I have done a bit of diging around to find where somone has done this and I can't seem to see anything. 我做了一些挖掘工作,以查找有人在哪里完成了这项工作,而且我似乎什么也看不到。 The code i have at the moment is as follows. 我目前的代码如下。
Here is the button I want to flash from 100% visible to 20% visible when clicked: 这是我想从单击时的100%可见闪烁到20%可见的按钮:
<Button Name="button2" Style="{DynamicResource NoChromeButton}" Visibility="{Binding VisableState, Converter={StaticResource BoolToVis}}" ToolTip="Start Live Stream" Command="{Binding PlayStream}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="5" Height="22" Width="22" >
<Image Source="../Images/recordicon.png"/>
</Button>
I have tried to add a storyboard into the button and it just didn't work: 我试图将一个情节提要添加到按钮中,但它不起作用:
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00"
RepeatBehavior="Forever"
Storyboard.TargetName="button2"
Storyboard.TargetProperty="(Visibility)">
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
I am new to WPF so going into animation is more difficult for me. 我是WPF的新手,所以进入动画对我来说更加困难。 If anyone could give me a little help on this stage it would be great. 如果在这个阶段有人可以给我一点帮助,那将是非常好。
Define animations in resources for example like this 例如,在资源中定义动画
<Window x:Name="window" x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="FlashButton" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="grid" Background="White">
<Button x:Name="button" Content="Button" Margin="10,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Click="button_Click"/>
</Grid>
and create handler for button click 并为按钮单击创建处理程序
private bool isRunning;
private void button_Click(object sender, RoutedEventArgs e)
{
var flashButton = FindResource("FlashButton") as Storyboard;
var changeColor = FindResource("ChangeColor") as Storyboard;
var changeColor2 = FindResource("ChangeColor2") as Storyboard;
if (isRunning)
{
flashButton.Stop();
changeColor2.Begin();
isRunning = false;
}
else
{
flashButton.Begin();
changeColor.Begin();
isRunning = true;
}
}
To change "visibility to around 20%" you have to animate Opacity
property ( double
type from 0.0
to 1.0
) not Visibility
( enum
with 3 values, see msdn ). 要将“可见性更改为20%左右” ,必须设置“ Opacity
属性(从0.0
到1.0
double
Opacity
类型)而不是“ Visibility
(具有3个值的enum
,请参见msdn )。
The goal can be easily achieved if you can use ToggleButton
(because of its nice Checked
and Unckecked
routed events): 如果可以使用ToggleButton
则可以轻松实现该目标(由于它具有不错的Checked
和Unckecked
路由事件):
<ToggleButton>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard x:Name="storyboard">
<Storyboard RepeatBehavior="Forever"
AutoReverse="True">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.2"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<StopStoryboard BeginStoryboardName="storyboard" />
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.