Hi,
I want to create a Busy Indicator which looks like this sample. Please see the attached image. I got a sample code which is for WPF but couldn't convert it to Silverlight.
Best Regards,
DG
I want to create a Busy Indicator which looks like this sample. Please see the attached image. I got a sample code which is for WPF but couldn't convert it to Silverlight.
<
Window
x:Class
=
"AnimatedBusyControl.MainWindow"
Title
=
"AnimatedBusyControl"
Height
=
"400"
Width
=
"400"
>
<
Grid
>
<
Grid.Resources
>
<
Style
x:Key
=
"AnimatedBusyControl"
TargetType
=
"Control"
>
<
Setter
Property
=
"RenderTransformOrigin"
Value
=
"0.5,0.5"
/>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"Background"
Value
=
"#80FFFFFF"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
>
<
ControlTemplate.Resources
>
<
Style
x:Key
=
"Part"
TargetType
=
"Rectangle"
>
<
Setter
Property
=
"Opacity"
Value
=
"0.3"
/>
<
Setter
Property
=
"RadiusX"
Value
=
"5"
/>
<
Setter
Property
=
"RadiusY"
Value
=
"5"
/>
<
Setter
Property
=
"Width"
Value
=
"100"
/>
<
Setter
Property
=
"Height"
Value
=
"10"
/>
<
Setter
Property
=
"RenderTransformOrigin"
Value
=
"0.5,0.5"
/>
</
Style
>
<
Storyboard
x:Key
=
"SB"
RepeatBehavior
=
"Forever"
Duration
=
"00:00:01.50"
>
<
DoubleAnimation
Storyboard.TargetName
=
"Part5"
BeginTime
=
"-00:00:00.875"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part6"
BeginTime
=
"-00:00:00.750"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part7"
BeginTime
=
"-00:00:00.625"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part8"
BeginTime
=
"-00:00:00.500"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part9"
BeginTime
=
"-00:00:00.375"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part10"
BeginTime
=
"-00:00:00.250"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part11"
BeginTime
=
"-00:00:00.125"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part0"
BeginTime
=
"00:00:00.000"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part1"
BeginTime
=
"00:00:00.125"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part2"
BeginTime
=
"00:00:00.250"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part3"
BeginTime
=
"00:00:00.375"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part4"
BeginTime
=
"00:00:00.500"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part5"
BeginTime
=
"00:00:00.625"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part6"
BeginTime
=
"00:00:00.750"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part7"
BeginTime
=
"00:00:00.875"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part8"
BeginTime
=
"00:00:01.000"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part9"
BeginTime
=
"00:00:01.125"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part10"
BeginTime
=
"00:00:01.250"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
<
DoubleAnimation
Storyboard.TargetName
=
"Part11"
BeginTime
=
"00:00:01.375"
Duration
=
"00:00:01"
From
=
"1.0"
To
=
"0.3"
Storyboard.TargetProperty
=
"Opacity"
/>
</
Storyboard
>
</
ControlTemplate.Resources
>
<
ControlTemplate.Triggers
>
<
EventTrigger
RoutedEvent
=
"Control.Loaded"
>
<
BeginStoryboard
Storyboard
=
"{StaticResource SB}"
/>
</
EventTrigger
>
</
ControlTemplate.Triggers
>
<
Grid
Background
=
"{TemplateBinding Background}"
>
<
Rectangle
x:Name
=
"Part0"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"0"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part1"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"30"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part2"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"60"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part3"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"90"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part4"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"120"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part5"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"150"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part6"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"180"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part7"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"210"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part8"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"240"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part9"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"270"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part10"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"300"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
<
Rectangle
x:Name
=
"Part11"
Fill
=
"{TemplateBinding Foreground}"
Style
=
"{StaticResource Part}"
>
<
Rectangle.RenderTransform
>
<
TransformGroup
>
<
TranslateTransform
X
=
"-100"
/>
<
RotateTransform
Angle
=
"330"
/>
</
TransformGroup
>
</
Rectangle.RenderTransform
>
</
Rectangle
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
Grid.Resources
>
<
TextBlock
Text
=
"Please Wait Loading..."
FontSize
=
"36"
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
/>
<
Control
Style
=
"{StaticResource AnimatedBusyControl}"
>
<!--<
Control.RenderTransform
>
<
ScaleTransform
ScaleX
=
"0.5"
ScaleY
=
"0.5"
/>
</
Control.RenderTransform
>-->
</
Control
>
</
Grid
>
</
Window
>
Best Regards,
DG