如何使椭圆闪烁？ [英] How do I make an ellipse blink?

问题描述

我正在尝试在WPF中进行自定义控件。我希望它模拟可以闪烁的LED的行为。

I am trying to make a custom control in WPF. I want it to simulate the behavior of a LED that can blink.

该控件具有三种状态：打开，关闭和闪烁。

There are three states to the control: On, Off, and Blinking.

我知道如何通过后面的代码设置开和关，但是WPF动画的这些东西真让我发疯！！！我什么也不能做动画。该计划将拥有一个称为状态的属性。当用户将值设置为闪烁时，我希望控件在绿色和灰色之间交替显示。我假设我在这里需要依赖项属性，但不知道。
我以前有更多的xaml，但是全部删除了。它似乎无能为力。
我很乐意以最佳实践的方式做到这一点，但是到那时，我会采取任何行动。此时，我正在编写一种可以手动更改颜色的线程。

I know how to set On and Off through the code behind, but this WPF animation stuff is just driving me nuts!!!! I cannot get anything to animate whatsoever. The plan is to have a property called state. When the user sets the value to blinking, I want the control to alternate between green and grey. I'm assuming I need a dependency property here, but have no idea. I had more xaml before but just erased it all. it doesn't seem to do anything. I'd love to do this in the most best practice way possible, but at this point, I'll take anything. I'm half way to writing a thread that changes the color manually at this point.

<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的）：

You can do this with an animation that auto-reverses and repeats (this is for 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>

然后在加载控件或设置属性时开始动画-您不需要除非您

and then start the animation when the control loads or when a property is set - you don't need a dependency property unless you

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中也可以使用：

Here is another way to do it in WPF - using the VisualStateManager - that will also work in 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属性切换视觉状态：

and then have the IsBlinking property switch the visual state:

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

这篇关于如何使椭圆闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！