Question

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.

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>

Answer 1

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

or on startup:

private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
    this.Blink.Begin();
}

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>

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