Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > IS THIS A SLIDER CONTROL?

• Dave Navarro Intermediate

  Posted on Jun 18, 2011 (permalink)

  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
  

  Reply

• Kalin Milanov Kalin Milanov

  Posted on Jun 21, 2011 (permalink)

  Hello Dave Navarro,
  
  Please check my answer in the support ticket you have sent.
  
  Best wishes,
  Kalin Milanov
  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

  Reply

• Dave Navarro Intermediate

  Posted on Jun 21, 2011 (permalink)

  <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

  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

  Reply

• Andy Robinson

  Posted on Dec 10, 2011 (permalink)

  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

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Dec 12, 2011 (permalink)

  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

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • SilverlightApplication1.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > IS THIS A SLIDER CONTROL?