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 156 Views
BusyIndicator
This is a migrated thread and some comments may be shown as answers.
Debasis
Top achievements
Rank 1
Debasis asked on 11 May 2011, 01:22 PM
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"
   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

Sort by
0
Pana
Telerik team
answered on 12 May 2011, 09:29 AM
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
0
Debasis
Top achievements
Rank 1
answered on 12 May 2011, 10:23 AM
Hi Pana,

Thank you for your help.

Let me test this sample.

Best Regards,
Debasis
Tags
BusyIndicator
Asked by
Debasis
Top achievements
Rank 1
Answers by
Pana
Telerik team
Debasis
Top achievements
Rank 1
Share this question
or