[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); }
set
{
SetValue(IsBusyProperty, value);
ChangeState();
}
}
// 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;
}
#endregion
#region Initialization
public BusyPointer()
{
this.DefaultStyleKey = typeof(BusyPointer);
}
#endregion
#region Methods
private void ChangeState()
{
if (IsBusy) VisualStateManager.GoToState(this, "Busied", true);
else VisualStateManager.GoToState(this, "Normal", true);
}
#endregion
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">
<Setter.Value>
<ControlTemplate TargetType="local:BusyPointer">
<Grid x:Name="LayoutRoot" Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Busied">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="VisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" RepeatBehavior="Forever">
<SplineDoubleKeyFrame KeyTime="0:0:1" Value="360" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Ellipse Width="25" Height="25" StrokeThickness="5.5" x:Name="VisualElement">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF096475" Offset="0.571"/>
<GradientStop Color="#FFA8FCFC" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.RenderTransform>
<RotateTransform CenterX="12.5" CenterY="12.5" />
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can change the colors, the animation, the shape, everything!
Have fun!