IS THIS A SLIDER CONTROL?

5 posts, 0 answers
  1. Dave Navarro
    Dave Navarro avatar
    150 posts
    Member since:
    Jul 2005

    Posted 18 Jun 2011 Link to this post

    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
  2. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 21 Jun 2011 Link to this post

    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
  3. DevCraft banner
  4. Dave Navarro
    Dave Navarro avatar
    150 posts
    Member since:
    Jul 2005

    Posted 21 Jun 2011 Link to this post

    <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
  5. Andy Robinson
    Andy Robinson avatar
    2 posts
    Member since:
    Nov 2009

    Posted 10 Dec 2011 Link to this post

    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
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Dec 2011 Link to this post

    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 >>

Back to Top
DevCraft banner