我试图在WPF的自定义控件。 我希望它模拟一个LED可以闪烁的行为。
有三种状态来控制:开,关,和闪烁。
我知道如何通过代码设置打开和关闭落后,但这个WPF动画的东西只是我逼疯!!!! 我不能得到任何任何动画。 该计划是有一个叫国家财产。 当用户将值设置为闪烁,我希望控件绿色和灰色之间交替。 我假设我需要一个依赖属性在这里,但也没办法。 我以前更多的XAML只是抹去了一切。 它似乎并没有做任何事情。 我很乐意这样做的最最好的做法可能的方式,但在这一点上,我会采取什么。 我半路上写,在这一点手动更改颜色的线。
<UserControl x:Class="WpfAnimation.LED"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Grid>
<Ellipse x:Name="MyLight" Height="Auto" Width="Auto"/>
</Grid>
</UserControl>
你可以用动画做到这一点自动反转并重复(这是为Silverlight):
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Blinker.MainPage"
Width="640" Height="480" Loaded="UserControl_Loaded">
<UserControl.Resources>
<Storyboard x:Name="Blink" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01" Value="Gray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="ellipse" Fill="Green" Stroke="Black"/>
</Grid>
</UserControl>
然后启动动画当控制负载时或属性设置 - 你不需要依赖项属性,除非你
private bool blinking;
public bool IsBlinking
{
get
{
return blinking;
}
set
{
if (value)
{
this.Blink.Begin();
}
else
{
this.Blink.Stop();
}
this.blinking = value;
}
}
或在启动时:
private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
this.Blink.Begin();
}
这里是另一种方式来做到这一点在WPF - 使用VisualStateManager - 这也将在Silverlight的工作:
<UserControl
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"
mc:Ignorable="d"
x:Class="BlinkerApp.Blinker"
x:Name="UserControl"
d:DesignWidth="100" d:DesignHeight="100">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="BlinkStates">
<VisualState x:Name="Blinking">
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:01" Value="Gray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Stopped"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse" Fill="Green" Stroke="Black"/>
</Grid>
然后有IsBlinking属性切换的可视状态:
namespace BlinkerApp
{
using System.Windows;
using System.Windows.Controls;
/// <summary>
/// Interaction logic for Blinker.xaml
/// </summary>
public partial class Blinker : UserControl
{
private bool blinking;
public Blinker()
{
this.InitializeComponent();
}
public bool IsBlinking
{
get
{
return blinking;
}
set
{
if (value)
{
VisualStateManager.GoToState(this, "Blinking", true);
}
else
{
VisualStateManager.GoToState(this, "Stopped", true);
}
this.blinking = value;
}
}
}
}
为了能够在代码中闪烁频率的更大的控制和这样的背后,我建议在你的用户控件称为眨眼路由事件:
public static readonly RoutedEvent BlinkEvent = EventManager.RegisterRoutedEvent("Blink", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(LedControl));
public event RoutedEventHandler Blink
{
add { AddHandler(BlinkEvent, value); }
remove { RemoveHandler(BlinkEvent, value); }
}
在后面的代码,你可以设置一个计时器,但往往你想提高的情况下(这也让你有机会闪烁光,每当你想一个单一的时间:
RaiseEvent(new RoutedEventArgs(LedControl.Blink));
现在,在XAML,下面的代码会使辉光可见,你的椭圆(ledEllipse)的填充属性设置为明亮的绿色径向渐变,然后填充值回到昏暗的“熄灭”绿色(您可以更改为灰色如果你喜欢)。 你可以简单地更改持续时间,使眨眼持续更长的时间。
<UserControl.Triggers>
<EventTrigger RoutedEvent="local:LedControl.Blink">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="glow"
Storyboard.TargetProperty="Opacity"
To="100"
AutoReverse="True"
Duration="0:0:0.075" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ledEllipse"
Storyboard.TargetProperty="Fill"
Duration="0:0:0.15">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0.01">
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush>
<!--bright Green Brush-->
<GradientStop Color="#FF215416" Offset="1"/>
<GradientStop Color="#FE38DA2E" Offset="0"/>
<GradientStop Color="#FE81FF79" Offset="0.688"/>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.15" >
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush>
<!--dim Green Brush-->
<GradientStop Color="#FF21471A" Offset="1"/>
<GradientStop Color="#FF33802F" Offset="0"/>
<GradientStop Color="#FF35932F" Offset="0.688"/>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
另外,我直接引用椭圆“ledEllipse”和它对应DropShadowEffect“光晕”这是在ledControl定义如下(红灯只是另一种径向渐变画笔,我在开始我带领的填充属性):
<Ellipse x:Name="statusLight" Height="16" Width="16" Margin="0" Fill="{DynamicResource redLight}" >
<Ellipse.Effect>
<DropShadowEffect x:Name="glow" ShadowDepth="0" Color="Lime" BlurRadius="10" Opacity="0" />
</Ellipse.Effect>
</Ellipse>
注:DropShadowEffect以.Net 3.5推出,但你可以删除,如果你不想发光效果(但它看起来不错的纯色对比背景)。