How do I create a Busy Indicator like this sample

3 posts, 0 answers
  1. Debasis
    Debasis avatar
    9 posts
    Member since:
    May 2011

    Posted 11 May 2011 Link to this post

    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. Pana
    Admin
    Pana avatar
    748 posts

    Posted 12 May 2011 Link to this post

    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
  3. DevCraft banner
  4. Debasis
    Debasis avatar
    9 posts
    Member since:
    May 2011

    Posted 12 May 2011 Link to this post

    Hi Pana,

    Thank you for your help.

    Let me test this sample.

    Best Regards,
    Debasis
Back to Top