IS THIS A SLIDER CONTROL?

[Dave Navarro]

Hello,

On the demo pages you have a control that is located just below the tab control. It appears as a blue bar but it also acts as a page loading progress bar. Here's one page that shows it; http://demos.telerik.com/silverlight/#GridView/FirstLook

My question is; is that a slider control? I've searched the sample project and have not found it yet.

Would you please be so kind as to tell me what page / project that is located in or better yet, do you have some sample code that you can post that shows how you wired up the control to the page loading event?

Many thanks in advance,

~ Dave Navarro

[Kalin Milanov]

Hello Dave Navarro,

Please check my answer in the support ticket you have sent.

Best wishes,
Kalin Milanov
the Telerik team

[Dave Navarro]

<From my support ticket.../>

Hi David,

What you see there is a highly customized busy indicator. The busy indicator itself uses a progress bar to show the progress (the one that looks like a slider).

The implementation of the control is rather simple. Here is the XAML we use.

The BusyIndicator:

<telerik:RadBusyIndicatorGrid.Row="1"Grid.ColumnSpan="2"IsBusy="{Binding IsBusy, ElementName=exampleContentControl}"Margin="0,1,0,0"
ProgressValue="{Binding ProgressPercentage, ElementName=exampleContentControl}"IsIndeterminate="False"
Style="{StaticResource BusyIndicatorStyle}"
BusyContentTemplate="{StaticResource BusyContentDataTemplate}"
BusyContent="{Binding}"d:IsHidden="True"/>

The content (the small icons and the GridView text you see while it is loading)

<DataTemplatex:Key="BusyContentDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>

<TextBlockText="{Binding CurrentPage.ParentControl.Text}"VerticalAlignment="Bottom"HorizontalAlignment="Center"
Foreground="#19000000"FontSize="100"FontFamily="/Telerik.Windows.QuickStartUITheme;component/Fonts/MyriadPro-Light.otf#Myriad Pro Light"/>
<TextBlockText="LOADING EXAMPLES"FontSize="9"Foreground="#FF3D4350"Opacity="0.75"VerticalAlignment="Bottom"HorizontalAlignment="Center"/>

<StackPanelOrientation="Horizontal"HorizontalAlignment="Center"VerticalAlignment="Top"Grid.Row="1">
<BorderVerticalAlignment="Top"BorderThickness="1"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="16"Height="16"Margin="2,0"Opacity="0.55"/>
<BorderVerticalAlignment="Top"BorderThickness="1.5"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="24"Height="24"Margin="3,0"Opacity="0.6"/>
<BorderVerticalAlignment="Top"BorderThickness="2"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="32"Height="32"Margin="4,0"Opacity="0.85"/>
<ImageVerticalAlignment="Top"Source="{Binding CurrentPage.ParentControl.IconBig}"Width="46"Height="46"Margin="5,0"Opacity="1"/>
<BorderVerticalAlignment="Top"BorderThickness="2"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="32"Height="32"Margin="4,0"Opacity="0.85"/>
<BorderVerticalAlignment="Top"BorderThickness="1.5"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="24"Height="24"Margin="3,0"Opacity="0.6"/>
<BorderVerticalAlignment="Top"BorderThickness="1"BorderBrush="#FF19A0EA"Background="White"CornerRadius="2"Width="16"Height="16"Margin="2,0"Opacity="0.55"/>
</StackPanel>
</Grid>
</DataTemplate>

The styles to make it look like in the demos site

<ControlTemplatex:Key="ProgressBarTemplate"TargetType="telerik:RadProgressBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupx:Name="OrientationStates">
<VisualStatex:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFramesDuration="00:00:00"Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)"Storyboard.TargetName="transformationRoot">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransformAngle="0"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualStatex:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFramesDuration="00:00:00"Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)"Storyboard.TargetName="transformationRoot">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransformAngle="-90"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroupx:Name="CommonStates">
<VisualStatex:Name="Determinate"/>
<VisualStatex:Name="Indeterminate">
<StoryboardRepeatBehavior="Forever">
<ObjectAnimationUsingKeyFramesDuration="00:00:00"Storyboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="IndeterminateRoot">
<DiscreteObjectKeyFrameKeyTime="00:00:00"Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFramesDuration="00:00:00"Storyboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="DeterminateRoot">
<DiscreteObjectKeyFrameKeyTime="00:00:00"Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X"Storyboard.TargetName="IndeterminateGradientFill">
<SplineDoubleKeyFrameKeyTime="0"Value="0"/>
<SplineDoubleKeyFrameKeyTime="00:00:.5"Value="20"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:LayoutTransformControlx:Name="transformationRoot">
<Gridx:Name="Root">
<Borderx:Name="ProgressBarTrack"BorderThickness="{TemplateBinding BorderThickness}"Background="Transparent"/>
<Gridx:Name="ProgressBarRootGrid">
<Borderx:Name="ProgressBarRootGradient"BorderThickness="{TemplateBinding BorderThickness}"Margin="{TemplateBinding BorderThickness}"Canvas.ZIndex="1"/>
<Gridx:Name="IndeterminateRoot"Visibility="Collapsed">
<Borderx:Name="IndeterminateSolidFill"Background="{TemplateBinding Foreground}"Margin="{TemplateBinding BorderThickness}"Opacity="1"RenderTransformOrigin="0.5,0.5"/>
<Rectanglex:Name="IndeterminateGradientFill"Margin="{TemplateBinding BorderThickness}"Opacity="0.7"RadiusY="1"RadiusX="1">
<Rectangle.Fill>
<LinearGradientBrushEndPoint="0,1"MappingMode="Absolute"SpreadMethod="Repeat"StartPoint="20,1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransformX="0"/>
<SkewTransformAngleX="-30"/>
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStopColor="#CCFFFFFF"Offset="0"/>
<GradientStopColor="#00FFFFFF"Offset=".50"/>
<GradientStopColor="#CCFFFFFF"Offset="1.10"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Gridx:Name="DeterminateRoot">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="Auto"/>
<ColumnDefinitionWidth="Auto"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<Rectanglex:Name="SkipValueSpacer"Fill="Transparent"Height="1"Width="0"/>
<Rectanglex:Name="ProgressBarIndicator"Grid.Column="1"Fill="{TemplateBinding Foreground}"HorizontalAlignment="Left"StrokeThickness="0"VerticalAlignment="Center"Height="4"/>
<GridGrid.Column="1"HorizontalAlignment="Right"RenderTransformOrigin="0.5,0.5"VerticalAlignment="Center"Height="14"Width="32">
<Grid.Background>
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
<GradientStopColor="#FF137CB5"Offset="0"/>
<GradientStopColor="#FF2CB2FB"Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<StackPanelOrientation="Horizontal"HorizontalAlignment="Center"VerticalAlignment="Center">
<TextBlockTextWrapping="Wrap"Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"Foreground="White"HorizontalAlignment="Center"VerticalAlignment="Center"FontSize="9"/>
<TextBlockTextWrapping="Wrap"Text="%"Foreground="White"FontSize="10"HorizontalAlignment="Center"VerticalAlignment="Center"/>
</StackPanel>
<Pathx:Name="stripe_bend_Copy"Data="M5,0 L5,5 L0,5 z"HorizontalAlignment="Left"Margin="-6,0,0,0"Stretch="Fill"StrokeThickness="0"Width="6"UseLayoutRounding="False"Height="5"VerticalAlignment="Bottom"RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransformScaleY="-1"/>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
<GradientStopColor="#FF004872"Offset="1"/>
<GradientStopColor="#FF197BAD"/>
</LinearGradientBrush>
</Path.Fill>
</Path>


</Grid>

</Grid>
</Grid>
</Grid>
</telerik:LayoutTransformControl>
</Grid>
</ControlTemplate>
<Stylex:Key="ProgressBarStyle"TargetType="telerik:RadProgressBar">
<SetterProperty="Maximum"Value="100"/>
<SetterProperty="Orientation"Value="Horizontal"/>
<SetterProperty="IsTabStop"Value="False"/>
<SetterProperty="Template"Value="{StaticResource ProgressBarTemplate}"/>
</Style>
<ControlTemplatex:Key="BusyIndicatorTemplate"TargetType="telerik:RadBusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupx:Name="VisibilityStates">
<VisualStatex:Name="Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFramesBeginTime="00:00:00"Duration="00:00:00.001"Storyboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="Overlay">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="shadow_A">
<DiscreteObjectKeyFrameKeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="ProgressBar">
<DiscreteObjectKeyFrameKeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrameKeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualStatex:Name="Visible">
<Storyboard>
<ObjectAnimationUsingKeyFramesBeginTime="00:00:00"Duration="00:00:00.001"Storyboard.TargetProperty="(UIElement.Visibility)"Storyboard.TargetName="Overlay">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroupx:Name="BusyStatusStates">
<VisualStatex:Name="Idle">
<Storyboard>
<ObjectAnimationUsingKeyFramesBeginTime="00:00:00"Duration="00:00:00.001"Storyboard.TargetProperty="(Control.IsEnabled)"Storyboard.TargetName="Content">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualStatex:Name="Busy">
<Storyboard>
<ObjectAnimationUsingKeyFramesBeginTime="00:00:00"Duration="00:00:00.001"Storyboard.TargetProperty="(Control.IsEnabled)"Storyboard.TargetName="Content">
<DiscreteObjectKeyFrameKeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControlx:Name="Content"ContentTemplate="{TemplateBinding ContentTemplate}"Content="{TemplateBinding Content}"HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"IsEnabled="False"VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectanglex:Name="Overlay"Style="{TemplateBinding OverlayStyle}"Fill="WhiteSmoke"/>
<Rectanglex:Name="shadow_A"Height="10"VerticalAlignment="Top"StrokeThickness="0"Margin="0,0,0,0">
<Rectangle.OpacityMask>
<LinearGradientBrushEndPoint="1,0.5"StartPoint="0,0.5">
<GradientStopColor="White"Offset="0.5"/>
<GradientStopColor="#4C000000"/>
<GradientStopColor="#4C000000"Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
<GradientStopColor="#66000000"Offset="0"/>
<GradientStopOffset="0.7"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<telerik:RadProgressBarx:Name="ProgressBar"IsIndeterminate="{TemplateBinding IsIndeterminate}"Value="{TemplateBinding ProgressValue}"VerticalAlignment="Top"Style="{StaticResource ProgressBarStyle}"BorderThickness="0"Margin="0,-9,0,0">
<telerik:RadProgressBar.Foreground>
<LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
<GradientStopColor="#FF2CB2FB"Offset="1"/>
<GradientStopColor="#FF137CB5"Offset="0"/>
</LinearGradientBrush>
</telerik:RadProgressBar.Foreground>
</telerik:RadProgressBar>
<ContentPresenterx:Name="contentPresenter"Content="{TemplateBinding BusyContent}"ContentTemplate="{TemplateBinding BusyContentTemplate}"HorizontalAlignment="Center"VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
<Stylex:Key="BusyIndicatorStyle"TargetType="telerik:RadBusyIndicator">
<SetterProperty="BusyContent"Value="Loading..."/>
<SetterProperty="IsTabStop"Value="False"/>
<SetterProperty="DisplayAfter"Value="0"/>
<SetterProperty="BorderThickness"Value="1"/>
<SetterProperty="HorizontalContentAlignment"Value="Stretch"/>
<SetterProperty="VerticalContentAlignment"Value="Stretch"/>
<SetterProperty="Template"Value="{StaticResource BusyIndicatorTemplate}"/>
</Style>

I hope this helps.

Greetings,
Kalin Milanov
the Telerik team

[Andy Robinson]

I'm trying to implement this code in my solution but struggling with where each piece belongs.  I've started by trying to include the "The styles to make it look like in the demos site" in a Styles.XAML resource dictionary but it's not happy with some of the elements.  Could you provide a simplified solution that shows where each of these pieces of code are implemented.

Thanks,
Andy

[Tina Stancheva]

Hi Andy,

I attached a solution demonstrating how to use the customized RadBusyIndicator in a sample scenario. Please have a look at it and let me know if this is what you had in mind.

Regards,
Tina Stancheva
the Telerik team