[Silverlight] A busy mouse pointer

Hello everyone,

Today I’m gonna present you a control which can be really useful, since you can find him in Windows: the busy mouse pointer. This control is used for notice the user than something is happening.



The code for this control is quite simple.

#region Dependency Properties
public bool IsBusy
    get { return (bool)GetValue(IsBusyProperty); }
        SetValue(IsBusyProperty, value);
// Using a DependencyProperty as the backing store for IsBusy.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsBusyProperty =
    DependencyProperty.Register("IsBusy", typeof(bool), typeof(BusyPointer), new PropertyMetadata(new PropertyChangedCallback(OnBusyChanged)));
private static void OnBusyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    ((BusyPointer)sender).IsBusy = (bool)e.NewValue;
#region Initialization
public BusyPointer()
    this.DefaultStyleKey = typeof(BusyPointer);
#region Methods
private void ChangeState()
    if (IsBusy) VisualStateManager.GoToState(this, "Busied", true);
    else VisualStateManager.GoToState(this, "Normal", true);

Juste a very simple control with a IsBusy property. When the value is true the animation starts, when it’s false it stops.

And the theme I use.

<Style TargetType="local:BusyPointer">
    <Setter Property="Template">
            <ControlTemplate TargetType="local:BusyPointer">
                <Grid x:Name="LayoutRoot" Background="Transparent">
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Busied">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="VisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" RepeatBehavior="Forever">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1" Value="360" />
                    <Ellipse Width="25" Height="25" StrokeThickness="5.5" x:Name="VisualElement">
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF096475" Offset="0.571"/>
                                <GradientStop Color="#FFA8FCFC" Offset="1"/>
                            <RotateTransform CenterX="12.5" CenterY="12.5" />

You can change the colors, the animation, the shape, everything!

Have fun!


Comments have been disabled for this content.