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

Busy indicator style

4 Answers 518 Views
BusyIndicator
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 13 Jun 2011, 04:04 PM
Hi,

actually in my project, just before I start a huge treatment, I display a usercontrol with a message "In progress..." to show the user that the treament is in progress.

Now, I'm trying to add a RadBusyIndicator to my usercontrol and I'm facing 2 problems...

1. Can I change the indicator style: color, another kind of spinning wheel like we have on an iPhone
2. If I place the standard RadBusyIndicator on my usercontrol, I call IsBusy=True or False to start or stop the animation but the fact that I'm running a treatment in background, the indicator hang multiple time, the animation is not fluid :(

Can you provide a sample to solve this issue?

Thank's

4 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 16 Jun 2011, 09:15 AM
Hi Oliver,

You can easily customize RadBusyIndicator to have different Fill colors or shape. You can do that by editing the style for RadProgressBar that belongs to the RadBusyIndicator. The ProgressBarStyle contains visual elements-  Paths and Geometry elements that are responsible for the look of the RadBusyIndicator.

Additionaly, if you are experiencing performance issues, this is probably because you are using the UI thread for implementation purposes. The RadBusyIndicator uses the same thread . I suggest that you try executing long-running processes on a separate thread via the BackgroundWorker class, so that the UI thread can remain unblocked.

I hope this helps.


Greetings,
Dani
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
Chiara
Top achievements
Rank 1
answered on 23 Nov 2011, 12:00 PM
Hello Dani, 
I've got a problem with the style of the RadProgressBar:
I replaced ellipses (width 10) of the Metro theme with hexagons (width 15).
How can I increase, in the animation, the space that exists between an hexagon and the other?

Here the xaml of the style:
<ResourceDictionary
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
    xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
    xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
    xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
    xmlns:telerikTransitonControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls"
    xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
    xmlns:filteringEditors="clr-namespace:Telerik.Windows.Controls.Filtering.Editors;assembly=Telerik.Windows.Controls"
    xmlns:telerikShapes="clr-namespace:Telerik.Windows.Shapes;assembly=Telerik.Windows.Controls"
    xmlns:chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:transitionControl="clr-namespace:Telerik.Windows.Controls.TransitionControl;assembly=Telerik.Windows.Controls">
 
 
    <SolidColorBrush x:Key="AccentBrush" Color="#153a8d" />
    <SolidColorBrush x:Key="BasicBrush" Color="Transparent" />
    <SolidColorBrush x:Key="MainBrush" Color="Transparent" />
    <SolidColorBrush x:Key="MarkerBrush" Color="Black"/>
     
    <LinearGradientBrush x:Key="OverlayBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#CCFFFFFF" Offset="0.5"/>
        <GradientStop Color="#4CFFFFFF" Offset="1"/>
        <GradientStop Color="#4CFFFFFF"/>
    </LinearGradientBrush>
 
 
 
    <Style x:Key="BusyIndicatorProgressBarStyle" TargetType="telerik:RadProgressBar">
        <Setter Property="Margin" Value="0" />
        <Setter Property="IsIndeterminate" Value="True" />
        <Setter Property="Maximum" Value="100" />
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadProgressBar">
                    <Grid HorizontalAlignment="Center" Width="180">
 
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard  RepeatBehavior="Forever" AutoReverse="True">
 
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ProgressBarTrack" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
 
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse4">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="102">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse4">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse3">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse2">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse1">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="1"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse3">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="90"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="92">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse2">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="80"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="82">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse1">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="70"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="72">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
 
                        <Path x:Name="ellipse4" Stretch="Fill" Fill="{StaticResource AccentBrush}" Width="15" Height="15" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Collapsed"
                            Data="F1 M 396.667,286.625L 394.917,283.594L 391.417,283.594L 389.667,286.625L 391.417,289.656L 394.917,289.656L 396.667,286.625 Z " >
                            <Path.RenderTransform>
                                <CompositeTransform/>
                            </Path.RenderTransform>
                        </Path>
 
                        <Path x:Name="ellipse3" Stretch="Fill" Fill="{StaticResource AccentBrush}" Width="15" Height="15" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Collapsed"
                            Data="F1 M 396.667,286.625L 394.917,283.594L 391.417,283.594L 389.667,286.625L 391.417,289.656L 394.917,289.656L 396.667,286.625 Z " >
                            <Path.RenderTransform>
                                <CompositeTransform/>
                            </Path.RenderTransform>
                        </Path>
 
                        <Path x:Name="ellipse2" Stretch="Fill" Fill="#f66400" Width="15" Height="15" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Collapsed"
                            Data="F1 M 396.667,286.625L 394.917,283.594L 391.417,283.594L 389.667,286.625L 391.417,289.656L 394.917,289.656L 396.667,286.625 Z " >
                            <Path.RenderTransform>
                                <CompositeTransform/>
                            </Path.RenderTransform>
                        </Path>
 
                        <Path x:Name="ellipse1" Stretch="Fill" Fill="{StaticResource AccentBrush}" Width="15" Height="15" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Visibility="Collapsed"
                            Data="F1 M 396.667,286.625L 394.917,283.594L 391.417,283.594L 389.667,286.625L 391.417,289.656L 394.917,289.656L 396.667,286.625 Z " >
                            <Path.RenderTransform>
                                <CompositeTransform/>
                            </Path.RenderTransform>
                        </Path>
 
                        <Grid x:Name="ProgressBarTrack" Height="15" Background="{StaticResource BasicBrush}" RenderTransformOrigin="0.5 0.5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="SkipValueSpacer" />
                            <Rectangle x:Name="ProgressBarIndicator" Grid.Column="1" Fill="{StaticResource AccentBrush}" />
                        </Grid>
                    </Grid>
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
     
    <Style TargetType="telerik:RadBusyIndicator" >
        <!--<Setter Property="BusyContent" Value="Loading..."/>-->
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="DisplayAfter" Value="00:00:00.1" />
        <Setter Property="Background" Value="{StaticResource MainBrush}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="{StaticResource MarkerBrush}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="ProgressBarStyle" Value="{StaticResource BusyIndicatorProgressBarStyle}" />
        <Setter Property="animation:AnimationManager.AnimationSelector">
            <Setter.Value>
                <animation:AnimationSelector>
                    <animation:FadeAnimation AnimationName="Hide" Direction="Out" TargetElementName="Indicator" />
                    <animation:FadeAnimation AnimationName="Show" Direction="In" TargetElementName="Indicator" />
                </animation:AnimationSelector>
            </Setter.Value>
        </Setter>
        <Setter Property="OverlayStyle">
            <Setter.Value>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="{StaticResource OverlayBrush}"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadBusyIndicator">
                    <Grid>
 
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisibilityStates">
                                <VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Indicator" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Visible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Indicator" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="BusyStatusStates">
                                <VisualState x:Name="Idle">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Content" Storyboard.TargetProperty="(Control.IsEnabled)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Busy">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetName="Content" Storyboard.TargetProperty="(Control.IsEnabled)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>False</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
 
                        <ContentControl x:Name="Content" IsEnabled="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        <Rectangle x:Name="Overlay" Style="{TemplateBinding OverlayStyle}" />
                        <Grid x:Name="Indicator" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <ContentPresenter Grid.Row="0" Margin="6" HorizontalAlignment="Center"  ContentTemplate="{TemplateBinding BusyContentTemplate}" /><!--Content="{TemplateBinding BusyContent}"-->
                            <telerik:RadProgressBar x:Name="ProgressBar" Grid.Row="1" IsIndeterminate="{TemplateBinding IsIndeterminate}" Value="{TemplateBinding ProgressValue}" Style="{TemplateBinding ProgressBarStyle}" />
                        </Grid>
                    </Grid>
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
</ResourceDictionary>

0
Dani
Telerik team
answered on 24 Nov 2011, 10:14 AM
Hi Chiara,

The IsIndeterminate VisualState contains the animations responsible for the positioning of your hexagons on the X axis.

In particular, these are the four animations that animate the CompositeTransform.TranslateX property:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse1">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="70"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="72">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse2">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="80"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="82">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse3">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="90"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="92">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse4">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="102">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseIn" Amplitude="2"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="174"/>
                                        </DoubleAnimationUsingKeyFrames>

You will notice that the four animations have values that maintain a difference of 10px - ellipse1 has 70, ellipse2 has 80, ellipse3 has 90, ellipse4 has 100. Then, in the next key frame, ellipse1 has 72, ellipse2 has 82, ellipse3 has 92, ellipse4 has 102, etc.
 
The 10px difference indicates the actual space between the ellipses, or the paths. If you increase that from 10x to, say, 30px, the result will be that your hexagons will be further away from each other.

I hope this will help.

Since your post refers to RadBusyIndicator for Silverlight, please post any further questions on this topic in the Silverlight forum.


Best wishes,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Chiara
Top achievements
Rank 1
answered on 29 Nov 2011, 06:28 PM
Hi Dani, 
thank you very much!
Tags
BusyIndicator
Asked by
Oliver
Top achievements
Rank 1
Answers by
Dani
Telerik team
Chiara
Top achievements
Rank 1
Share this question
or