Busy indicator style

5 posts, 0 answers
  1. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 13 Jun 2011 Link to this post

    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
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 16 Jun 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Chiara
    Chiara avatar
    31 posts
    Member since:
    Oct 2011

    Posted 23 Nov 2011 Link to this post

    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>

  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 24 Nov 2011 Link to this post

    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 >>
  6. Chiara
    Chiara avatar
    31 posts
    Member since:
    Oct 2011

    Posted 29 Nov 2011 Link to this post

    Hi Dani, 
    thank you very much!
Back to Top
UI for WPF is Visual Studio 2017 Ready