This is a migrated thread and some comments may be shown as answers.

How do I create a Busy Indicator like this sample

2 Answers 286 Views

BusyIndicator

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Debasis asked on 11 May 2011, 01:22 PM

busy-indicator.gif

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.

<Window

x:Class="AnimatedBusyControl.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

2 Answers, 1 is accepted

answered on 12 May 2011, 09:29 AM

RadFancyIndicator.zip

Hi Debasis,

I have updated the progress bar of the RadBusyIndicator for you. You will have to do the additional changes to the RadBusyIndicator's BusyContent area. The complete xaml for RadBusyIndicator of RadBusyIndicator is attached so this should not be a problem. The loader however looks pretty much like the WPF version you have attached.

Regards,
Pana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items