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

IS THIS A SLIDER CONTROL?

4 Answers 75 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Dave Navarro
Top achievements
Rank 2
Dave Navarro asked on 18 Jun 2011, 09:14 PM
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

4 Answers, 1 is accepted

Sort by
0
Kalin Milanov
Telerik team
answered on 21 Jun 2011, 01:37 PM
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
0
Dave Navarro
Top achievements
Rank 2
answered on 21 Jun 2011, 04:42 PM
<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
0
Andy Robinson
Top achievements
Rank 1
answered on 10 Dec 2011, 08:05 AM
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
0
Tina Stancheva
Telerik team
answered on 12 Dec 2011, 01:53 PM
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 >>

Tags
Slider
Asked by
Dave Navarro
Top achievements
Rank 2
Answers by
Kalin Milanov
Telerik team
Dave Navarro
Top achievements
Rank 2
Andy Robinson
Top achievements
Rank 1
Tina Stancheva
Telerik team
Share this question
or