''' <summary>
''' The base color for each of the dots on the progress control
''' </summary>
Public Property DotColor As Color
<Ellipse StrokeThickness="0" Width="15" Height="15" Canvas.Left="30" Canvas.Top="0" Name="Ellipse1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="Blue" Offset="0.9" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
...ended up like this....
<Ellipse StrokeThickness="0" Width="15" Height="15" Canvas.Left="30" Canvas.Top="0" Name="Ellipse1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.9" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
DataContext="{Binding RelativeSource={RelativeSource Self}}"
...in the XAML declaration. The final XAML looks like this....
<UserControl x:Class="TestProject.CircularProgressControl"
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"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
mc:Ignorable="d"
Visibility="Collapsed"
d:DesignHeight="75" d:DesignWidth="75"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Canvas Name="Body">
<Ellipse StrokeThickness="0" Width="15" Height="15" Canvas.Left="30" Canvas.Top="0" Name="Ellipse1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.9" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="45" Canvas.Top="4" Height="15" StrokeThickness="0" Width="15" Name="Ellipse2">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.8" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="56" Canvas.Top="15" Height="15" StrokeThickness="0" Width="15" Name="Ellipse3">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.7" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="60" Canvas.Top="30" Height="15" StrokeThickness="0" Width="15" Name="Ellipse4">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.6" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="56" Canvas.Top="44" Height="15" StrokeThickness="0" Width="15" Name="Ellipse5">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.5" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="45" Canvas.Top="56" Height="15" StrokeThickness="0" Width="15" Name="Ellipse6">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.4" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="30" Canvas.Top="60" Height="15" StrokeThickness="0" Width="15" Name="Ellipse7">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.3" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="15" Canvas.Top="56" Height="15" StrokeThickness="0" Width="15" Name="Ellipse8">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.2" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="4" Canvas.Top="45" Height="15" StrokeThickness="0" Width="15" Name="Ellipse9">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="0" Canvas.Top="30" Height="15" StrokeThickness="0" Width="15" Name="Ellipse10">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.05" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="4" Canvas.Top="15" Height="15" StrokeThickness="0" Width="15" Name="Ellipse11">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.03" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="15" Canvas.Top="4" Height="15" StrokeThickness="0" Width="15" Name="Ellipse12">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="{Binding DotColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
<GradientStop Color="{Binding DotColor}" Offset="0.01" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
</Grid>
</UserControl>
Note "x:Class" in the XAML declaration. My project name when designing this control was called "TestProject", so for it to work in your project, change "TestProject" to the Namespace of your own project.
Imports System.Windows.Threading
Partial Public Class CircularProgressControl
Inherits UserControl
Private WithEvents _storyBoard As Storyboard
Public Sub New()
InitializeComponent()
'initialize the StoryBoard object
_storyBoard = New Storyboard
_storyBoard.Duration = TimeSpan.FromMilliseconds(100)
End Sub
''' <summary>
''' The base color for each of the dots on the progress control
''' </summary>
Public Property DotColor As Color
Public Sub StartProgress()
Me.Visibility = Windows.Visibility.Visible
_storyBoard.Begin()
End Sub
Public Sub StopProgress()
_storyBoard.Stop()
Me.Visibility = Windows.Visibility.Collapsed
End Sub
Private Sub _storyBoard_Completed(ByVal sender As Object, ByVal e As System.EventArgs) Handles _storyBoard.Completed
'move the fill properties anti-clockwise
Ellipse12.Fill = Ellipse1.Fill
Ellipse1.Fill = Ellipse2.Fill
Ellipse2.Fill = Ellipse3.Fill
Ellipse3.Fill = Ellipse4.Fill
Ellipse4.Fill = Ellipse5.Fill
Ellipse5.Fill = Ellipse6.Fill
Ellipse6.Fill = Ellipse7.Fill
Ellipse7.Fill = Ellipse8.Fill
Ellipse8.Fill = Ellipse9.Fill
Ellipse9.Fill = Ellipse10.Fill
Ellipse10.Fill = Ellipse11.Fill
Ellipse11.Fill = Ellipse12.Fill
_storyBoard.Begin()
End Sub
End Class
You can see straight away how I made the dots appear to move. I simply moved the fill property of each dot to the next one!
<my:CircularProgressControl x:Name="CircularProgressControl1" DotColor="Blue" />
Note the "DotColor" property. You can change that to any color you want.
'start the progress
CircularProgressControl1.StartProgress()
'stop the progress
CircularProgressControl1.StopProgress()
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (3)
Commented:
"Yes" vote above.
Vic
Commented:
http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html
Author
Commented: