Hello,
I need to customize "Date,Month and time" intervals. For example see the attached screen shot(top and bottom) needs to be styled look like in right side design.
This is my code
<telerik:RadTimeBar x:Name="timeBar" PeriodStart="{Binding SuggestedStartDate,Mode=TwoWay}" PeriodEnd="{Binding SuggestedEndDate,Mode=TwoWay}" Loaded="RadTimeBar_Loaded"
VisiblePeriodStart="{Binding SuggestedStartDate,Mode=TwoWay}" VisiblePeriodEnd="{Binding SuggestedEndDate,Mode=TwoWay}"
SelectionStart="{Binding SelectedStartDate,Mode=TwoWay}" SelectionEnd="{Binding SelectedEndDate,Mode=TwoWay}" Grid.Row="1" Height="100" Style="{StaticResource RadTimeBarStyle1}">
<telerik:RadTimeBar.Intervals>
<telerik:DayInterval/>
<telerik:HourInterval/>
</telerik:RadTimeBar.Intervals>
</telerik:RadTimeBar>
Style
<SolidColorBrush x:Key="TimeBar_Foreground" Color="#FF444444"/>
<SolidColorBrush x:Key="TimeBar_Background" Color="White"/>
<SolidColorBrush x:Key="TimeBar_BorderBrush" Color="#FF848484"/>
<SolidColorBrush x:Key="TimeBar_Button_Border_Disabled" Color="#FFCACACA"/>
<LinearGradientBrush x:Key="TimeBar_Button_Background_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFF0F0F0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Button_InnerBorder_Disabled" Color="White"/>
<telerik:TimeSpanTicksConverter x:Key="timespanConverter"/>
<telerik:DateTicksConverter x:Key="dateConverter"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF0F0F0" Offset="0.257"/>
<GradientStop Color="#FFBFBFBF" Offset="0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Slider_InnerBorder" Color="Transparent"/>
<Thickness x:Key="TimeBar_Slider_InnerBorderThickness">0</Thickness>
<System:Double x:Key="TimeBar_Slider_Thumbs_Width">10</System:Double>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Path" Color="Black"/>
<System:Double x:Key="TimeBar_Slider_Thumbs_Path_Height">9</System:Double>
<System:Double x:Key="TimeBar_Slider_Thumbs_Path_Width">5</System:Double>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Shadow" Color="White"/>
<Style x:Key="ThumbStyle2" TargetType="Thumb">
<Setter Property="Width" Value="{StaticResource TimeBar_Slider_Thumbs_Width}"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Thumbs_Path}"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Path x:Name="Path" Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="{StaticResource TimeBar_Slider_Thumbs_Path_Height}" Width="{StaticResource TimeBar_Slider_Thumbs_Path_Width}"/>
<Path Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{StaticResource TimeBar_Slider_Thumbs_Shadow}" HorizontalAlignment="Center" Height="{StaticResource TimeBar_Slider_Thumbs_Path_Height}" RenderTransformOrigin="0.5,0.5" Width="{StaticResource TimeBar_Slider_Thumbs_Path_Width}">
<Path.RenderTransform>
<TranslateTransform X="1"/>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<System:Double x:Key="TimeBar_Slider_Range_Height">9</System:Double>
<Thickness x:Key="TimeBar_Slider_Range_BorderThickness">1</Thickness>
<LinearGradientBrush x:Key="TimeBar_Slider_Range_Border" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Gray" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Range_Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFBE32"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="TimeBar_Slider_Range_Border_CornerRadius">0</CornerRadius>
<Style x:Key="SelectionMiddleThumbStyle2" TargetType="Thumb">
<Setter Property="Height" Value="{StaticResource TimeBar_Slider_Range_Height}"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="BorderThickness" Value="{StaticResource TimeBar_Slider_Range_BorderThickness}"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_Slider_Range_Border}"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Slider_Range_Background}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TimeBar_Slider_Range_Border_CornerRadius}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background" Color="Black"/>
<CornerRadius x:Key="TimeBar_Slider_Handle_InnerBorder_CornerRadius">0</CornerRadius>
<CornerRadius x:Key="TimeBar_Slider_Handle_OuterBorder_CornerRadius">1</CornerRadius>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Over" Color="#FFFFC92B"/>
<Thickness x:Key="TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over">1</Thickness>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Over" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFFD25A" Offset="0.43"/>
<GradientStop Color="#FFFEEBAE" Offset="0.42"/>
</LinearGradientBrush>
<Thickness x:Key="TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over">1</Thickness>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Over" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Over" Color="Black"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828" Offset="0"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFD74E" Offset="0.996"/>
<GradientStop Color="#FFFFDCAB" Offset="0.17"/>
<GradientStop Color="#FFFE9227" Offset="0.57"/>
<GradientStop Color="#FFFFD18F" Offset="0.56"/>
<GradientStop Color="#FFFFBA74" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Pressed" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Pressed" Color="Black"/>
<ControlTemplate x:Key="HandleRepeatButton2" TargetType="RepeatButton">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Over}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TimeBar_Slider_Handle_OuterBorder_CornerRadius}">
<Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="{StaticResource TimeBar_Slider_Handle_InnerBorder_CornerRadius}"/>
</Border>
<Path x:Name="Path" Data="M6,0 L8,0 L8,14 L6,14 L6,12 L4,12 L4,10 L2,10 L2,8 L0,8 L0,6 L2,6 L2,4 L4,4 L4,2 L6,2 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center" Width="4"/>
</Grid>
</ControlTemplate>
<Style x:Key="IncreaseHandleStyle2" TargetType="RepeatButton">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Handle_Path_Background}"/>
<Setter Property="Width" Value="17"/>
<Setter Property="Height" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource HandleRepeatButton2}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleY=" 1" ScaleX=" -1"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DecreaseHandleStyle2" TargetType="RepeatButton">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Handle_Path_Background}"/>
<Setter Property="Width" Value="17"/>
<Setter Property="Height" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource HandleRepeatButton2}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_OuterBorder" Color="#FF848484"/>
<Thickness x:Key="TimeBar_Slider_Thumbs_OuterBorderThickness">1</Thickness>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_InnerBorder" Color="White"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Thumbs_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="#FFD4D4D4" Offset="1"/>
<GradientStop Color="Gainsboro" Offset="0.42"/>
<GradientStop Color="#FFADADAD" Offset="0.43"/>
</LinearGradientBrush>
<CornerRadius x:Key="TimeBar_Slider_Thumbs_InnerBorder_CornerRadius">0</CornerRadius>
<CornerRadius x:Key="TimeBar_Slider_Thumbs_OuterBorder_CornerRadius">0</CornerRadius>
<Thickness x:Key="TimeBar_Slider_Margin">0,1,0,0</Thickness>
<Style x:Key="TrackStyle" TargetType="ContentControl" >
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomSlider2" TargetType="telerik:RadSlider">
<Setter Property="HandlesVisibility" Value="Visible"/>
<Setter Property="IsMouseWheelEnabled" Value="False"/>
<Setter Property="IsSelectionRangeEnabled" Value="True"/>
<Setter Property="StepAction" Value="MoveRange"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Slider_Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_Slider_InnerBorder}"/>
<Setter Property="BorderThickness" Value="{StaticResource TimeBar_Slider_InnerBorderThickness}"/>
<Setter Property="ThumbStyle" Value="{StaticResource ThumbStyle2}"/>
<Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource SelectionMiddleThumbStyle2}"/>
<Setter Property="TrackStyle" Value="{StaticResource TrackStyle}"/>
<Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle2}"/>
<Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle2}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadSlider">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Grid Margin="{StaticResource TimeBar_Slider_Margin}" UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.ColumnSpan="3" Grid.Column="1">
<ContentControl x:Name="Track" Style="{TemplateBinding TrackStyle}"/>
<telerik:TimeBarNonScrollingPanel Slider="{Binding ElementName=PART_Slider}">
<telerik:SelectionIndicator EndDate="{Binding EndDate, ElementName=PART_SelectionThumb}" StartDate="{Binding StartDate, ElementName=PART_SelectionThumb}"/>
</telerik:TimeBarNonScrollingPanel>
</Grid>
<RepeatButton x:Name="DecreaseButton" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{TemplateBinding DecreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
<RepeatButton x:Name="LargeDecreaseButton" Grid.Column="1" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource LargeHandleStyle}"/>
<Grid Grid.Column="2" Visibility="{TemplateBinding ThumbVisibility}">
<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_OuterBorder}" BorderThickness="{StaticResource TimeBar_Slider_Thumbs_OuterBorderThickness}" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_OuterBorder_CornerRadius}">
<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_InnerBorder}" BorderThickness="1" Background="{StaticResource TimeBar_Slider_Thumbs_Background}" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_InnerBorder_CornerRadius}"/>
</Border>
<Thumb x:Name="SingleThumbHost" Style="{TemplateBinding ThumbStyle}" Visibility="Collapsed"/>
<StackPanel x:Name="RangeThumbsPanel" Orientation="Horizontal">
<Thumb x:Name="RangeStartThumb" Style="{TemplateBinding ThumbStyle}"/>
<Thumb x:Name="RangeMiddleThumb" Style="{TemplateBinding SelectionMiddleThumbStyle}"/>
<Thumb x:Name="RangeEndThumb" Style="{TemplateBinding ThumbStyle}"/>
</StackPanel>
</Grid>
<RepeatButton x:Name="LargeIncreaseButton" Grid.Column="3" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource LargeHandleStyle}"/>
<RepeatButton x:Name="IncreaseButton" Grid.Column="4" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding IncreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<telerik:SelectionRangeDateTicksConverter x:Key="selectionRangeConverter"/>
<SolidColorBrush x:Key="TimeBar_SelectionThumbPreview_Background" Color="#FFFFC64B"/>
<Style x:Key="SelectionThumbPreviewStyle" TargetType="telerik:SelectionThumbPreview">
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumbPreview_Background}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:SelectionThumbPreview">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Path Data="M0,0 L10,10 L0,10 z" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Left" Height="10" Stretch="Fill" VerticalAlignment="Bottom" Width="10"/>
<Path Data="M10,0 L10,10 L0,10 z" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Right" Height="10" Stretch="Fill" VerticalAlignment="Bottom" Width="10"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadTimeBarStyle1" TargetType="telerik:RadTimeBar">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Foreground}"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Background}"/>
<Setter Property="BorderThickness" Value="1,0,1,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_BorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTimeBar">
<Border BorderThickness="{TemplateBinding BorderThickness}" Background="#FF1D2029" BorderBrush="#FF1D2029">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" MinHeight="20"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,1" Background="#FF2E323C" Grid.Row="0" BorderBrush="#FF2E323C">
<Border BorderThickness="1" BorderBrush="#FF2E323C"/>
</Border>
<Border BorderThickness="0,1" Background="#FF2E323C" Grid.Row="2" BorderBrush="#FF2E323C">
<Border BorderThickness="1" BorderBrush="#FF2E323C"/>
</Border>
<telerik:TimeBarContentPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<ContentPresenter/>
</telerik:TimeBarContentPanel>
<telerik:ItemContainer x:Name="PART_ItemContainer" ItemsSource="{TemplateBinding IntervalItems}" Grid.Row="1" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}">
<telerik:ItemContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>
</ItemsPanelTemplate>
</telerik:ItemContainer.ItemsPanel>
<telerik:ItemContainer.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</telerik:ItemContainer.Template>
</telerik:ItemContainer>
<telerik:GroupContainer x:Name="PART_GroupContainer" ItemsSource="{TemplateBinding IntervalGroups}" Grid.Row="0" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}">
<telerik:GroupContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>
</ItemsPanelTemplate>
</telerik:GroupContainer.ItemsPanel>
<telerik:GroupContainer.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</telerik:GroupContainer.Template>
</telerik:GroupContainer>
<telerik:TimeBarStackPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<telerik:ShadeControl EndDate="{Binding StartDate, ElementName=PART_SelectionThumb}" StartDate="{TemplateBinding PeriodStart}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
<telerik:SelectionThumb x:Name="PART_SelectionThumb" EndDate="{Binding ActualSelectionEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IntervalGroups="{TemplateBinding IntervalGroups}" IntervalItems="{TemplateBinding IntervalItems}" IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}" MaxSelectionRange="{TemplateBinding MaxSelectionRange}" MinSelectionRange="{TemplateBinding MinSelectionRange}" PeriodStart="{TemplateBinding PeriodStart}" PeriodEnd="{TemplateBinding PeriodEnd}" SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}" StartDate="{Binding ActualSelectionStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" VisiblePeriodRange="{Binding ActualVisiblePeriodRange, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Canvas.ZIndex="2"/>
<telerik:ShadeControl EndDate="{TemplateBinding PeriodEnd}" StartDate="{Binding EndDate, ElementName=PART_SelectionThumb}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
</telerik:TimeBarStackPanel>
<telerik:TimeBarPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<telerik:SelectionThumbPreview x:Name="PART_SelectionThumbPreview" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource SelectionThumbPreviewStyle}"/>
</telerik:TimeBarPanel>
</Grid>
<telerik:RadSlider x:Name="PART_Slider" LargeChange="{Binding LargeChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{Binding PeriodEnd, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}" MinimumRangeSpan="{Binding ActualMinZoomRange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Minimum="{Binding PeriodStart, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Style="{StaticResource CustomSlider2}" SmallChange="{Binding SmallChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Selection="{Binding ActualVisiblePeriodRange, Converter={StaticResource selectionRangeConverter}, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need to customize "Date,Month and time" intervals. For example see the attached screen shot(top and bottom) needs to be styled look like in right side design.
This is my code
<telerik:RadTimeBar x:Name="timeBar" PeriodStart="{Binding SuggestedStartDate,Mode=TwoWay}" PeriodEnd="{Binding SuggestedEndDate,Mode=TwoWay}" Loaded="RadTimeBar_Loaded"
VisiblePeriodStart="{Binding SuggestedStartDate,Mode=TwoWay}" VisiblePeriodEnd="{Binding SuggestedEndDate,Mode=TwoWay}"
SelectionStart="{Binding SelectedStartDate,Mode=TwoWay}" SelectionEnd="{Binding SelectedEndDate,Mode=TwoWay}" Grid.Row="1" Height="100" Style="{StaticResource RadTimeBarStyle1}">
<telerik:RadTimeBar.Intervals>
<telerik:DayInterval/>
<telerik:HourInterval/>
</telerik:RadTimeBar.Intervals>
</telerik:RadTimeBar>
Style
<SolidColorBrush x:Key="TimeBar_Foreground" Color="#FF444444"/>
<SolidColorBrush x:Key="TimeBar_Background" Color="White"/>
<SolidColorBrush x:Key="TimeBar_BorderBrush" Color="#FF848484"/>
<SolidColorBrush x:Key="TimeBar_Button_Border_Disabled" Color="#FFCACACA"/>
<LinearGradientBrush x:Key="TimeBar_Button_Background_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFF0F0F0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Button_InnerBorder_Disabled" Color="White"/>
<telerik:TimeSpanTicksConverter x:Key="timespanConverter"/>
<telerik:DateTicksConverter x:Key="dateConverter"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF0F0F0" Offset="0.257"/>
<GradientStop Color="#FFBFBFBF" Offset="0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Slider_InnerBorder" Color="Transparent"/>
<Thickness x:Key="TimeBar_Slider_InnerBorderThickness">0</Thickness>
<System:Double x:Key="TimeBar_Slider_Thumbs_Width">10</System:Double>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Path" Color="Black"/>
<System:Double x:Key="TimeBar_Slider_Thumbs_Path_Height">9</System:Double>
<System:Double x:Key="TimeBar_Slider_Thumbs_Path_Width">5</System:Double>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Shadow" Color="White"/>
<Style x:Key="ThumbStyle2" TargetType="Thumb">
<Setter Property="Width" Value="{StaticResource TimeBar_Slider_Thumbs_Width}"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Thumbs_Path}"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Path x:Name="Path" Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="{StaticResource TimeBar_Slider_Thumbs_Path_Height}" Width="{StaticResource TimeBar_Slider_Thumbs_Path_Width}"/>
<Path Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{StaticResource TimeBar_Slider_Thumbs_Shadow}" HorizontalAlignment="Center" Height="{StaticResource TimeBar_Slider_Thumbs_Path_Height}" RenderTransformOrigin="0.5,0.5" Width="{StaticResource TimeBar_Slider_Thumbs_Path_Width}">
<Path.RenderTransform>
<TranslateTransform X="1"/>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<System:Double x:Key="TimeBar_Slider_Range_Height">9</System:Double>
<Thickness x:Key="TimeBar_Slider_Range_BorderThickness">1</Thickness>
<LinearGradientBrush x:Key="TimeBar_Slider_Range_Border" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Gray" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Range_Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFBE32"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<CornerRadius x:Key="TimeBar_Slider_Range_Border_CornerRadius">0</CornerRadius>
<Style x:Key="SelectionMiddleThumbStyle2" TargetType="Thumb">
<Setter Property="Height" Value="{StaticResource TimeBar_Slider_Range_Height}"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="BorderThickness" Value="{StaticResource TimeBar_Slider_Range_BorderThickness}"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_Slider_Range_Border}"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Slider_Range_Background}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TimeBar_Slider_Range_Border_CornerRadius}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background" Color="Black"/>
<CornerRadius x:Key="TimeBar_Slider_Handle_InnerBorder_CornerRadius">0</CornerRadius>
<CornerRadius x:Key="TimeBar_Slider_Handle_OuterBorder_CornerRadius">1</CornerRadius>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Over" Color="#FFFFC92B"/>
<Thickness x:Key="TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over">1</Thickness>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Over" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFFD25A" Offset="0.43"/>
<GradientStop Color="#FFFEEBAE" Offset="0.42"/>
</LinearGradientBrush>
<Thickness x:Key="TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over">1</Thickness>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Over" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Over" Color="Black"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828" Offset="0"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFD74E" Offset="0.996"/>
<GradientStop Color="#FFFFDCAB" Offset="0.17"/>
<GradientStop Color="#FFFE9227" Offset="0.57"/>
<GradientStop Color="#FFFFD18F" Offset="0.56"/>
<GradientStop Color="#FFFFBA74" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Pressed" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Pressed" Color="Black"/>
<ControlTemplate x:Key="HandleRepeatButton2" TargetType="RepeatButton">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Over}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TimeBar_Slider_Handle_OuterBorder_CornerRadius}">
<Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="{StaticResource TimeBar_Slider_Handle_InnerBorder_CornerRadius}"/>
</Border>
<Path x:Name="Path" Data="M6,0 L8,0 L8,14 L6,14 L6,12 L4,12 L4,10 L2,10 L2,8 L0,8 L0,6 L2,6 L2,4 L4,4 L4,2 L6,2 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center" Width="4"/>
</Grid>
</ControlTemplate>
<Style x:Key="IncreaseHandleStyle2" TargetType="RepeatButton">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Handle_Path_Background}"/>
<Setter Property="Width" Value="17"/>
<Setter Property="Height" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource HandleRepeatButton2}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleY=" 1" ScaleX=" -1"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DecreaseHandleStyle2" TargetType="RepeatButton">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Slider_Handle_Path_Background}"/>
<Setter Property="Width" Value="17"/>
<Setter Property="Height" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource HandleRepeatButton2}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_OuterBorder" Color="#FF848484"/>
<Thickness x:Key="TimeBar_Slider_Thumbs_OuterBorderThickness">1</Thickness>
<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_InnerBorder" Color="White"/>
<LinearGradientBrush x:Key="TimeBar_Slider_Thumbs_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White"/>
<GradientStop Color="#FFD4D4D4" Offset="1"/>
<GradientStop Color="Gainsboro" Offset="0.42"/>
<GradientStop Color="#FFADADAD" Offset="0.43"/>
</LinearGradientBrush>
<CornerRadius x:Key="TimeBar_Slider_Thumbs_InnerBorder_CornerRadius">0</CornerRadius>
<CornerRadius x:Key="TimeBar_Slider_Thumbs_OuterBorder_CornerRadius">0</CornerRadius>
<Thickness x:Key="TimeBar_Slider_Margin">0,1,0,0</Thickness>
<Style x:Key="TrackStyle" TargetType="ContentControl" >
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomSlider2" TargetType="telerik:RadSlider">
<Setter Property="HandlesVisibility" Value="Visible"/>
<Setter Property="IsMouseWheelEnabled" Value="False"/>
<Setter Property="IsSelectionRangeEnabled" Value="True"/>
<Setter Property="StepAction" Value="MoveRange"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Slider_Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_Slider_InnerBorder}"/>
<Setter Property="BorderThickness" Value="{StaticResource TimeBar_Slider_InnerBorderThickness}"/>
<Setter Property="ThumbStyle" Value="{StaticResource ThumbStyle2}"/>
<Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource SelectionMiddleThumbStyle2}"/>
<Setter Property="TrackStyle" Value="{StaticResource TrackStyle}"/>
<Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle2}"/>
<Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle2}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadSlider">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Grid Margin="{StaticResource TimeBar_Slider_Margin}" UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.ColumnSpan="3" Grid.Column="1">
<ContentControl x:Name="Track" Style="{TemplateBinding TrackStyle}"/>
<telerik:TimeBarNonScrollingPanel Slider="{Binding ElementName=PART_Slider}">
<telerik:SelectionIndicator EndDate="{Binding EndDate, ElementName=PART_SelectionThumb}" StartDate="{Binding StartDate, ElementName=PART_SelectionThumb}"/>
</telerik:TimeBarNonScrollingPanel>
</Grid>
<RepeatButton x:Name="DecreaseButton" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{TemplateBinding DecreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
<RepeatButton x:Name="LargeDecreaseButton" Grid.Column="1" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource LargeHandleStyle}"/>
<Grid Grid.Column="2" Visibility="{TemplateBinding ThumbVisibility}">
<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_OuterBorder}" BorderThickness="{StaticResource TimeBar_Slider_Thumbs_OuterBorderThickness}" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_OuterBorder_CornerRadius}">
<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_InnerBorder}" BorderThickness="1" Background="{StaticResource TimeBar_Slider_Thumbs_Background}" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_InnerBorder_CornerRadius}"/>
</Border>
<Thumb x:Name="SingleThumbHost" Style="{TemplateBinding ThumbStyle}" Visibility="Collapsed"/>
<StackPanel x:Name="RangeThumbsPanel" Orientation="Horizontal">
<Thumb x:Name="RangeStartThumb" Style="{TemplateBinding ThumbStyle}"/>
<Thumb x:Name="RangeMiddleThumb" Style="{TemplateBinding SelectionMiddleThumbStyle}"/>
<Thumb x:Name="RangeEndThumb" Style="{TemplateBinding ThumbStyle}"/>
</StackPanel>
</Grid>
<RepeatButton x:Name="LargeIncreaseButton" Grid.Column="3" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource LargeHandleStyle}"/>
<RepeatButton x:Name="IncreaseButton" Grid.Column="4" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding IncreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<telerik:SelectionRangeDateTicksConverter x:Key="selectionRangeConverter"/>
<SolidColorBrush x:Key="TimeBar_SelectionThumbPreview_Background" Color="#FFFFC64B"/>
<Style x:Key="SelectionThumbPreviewStyle" TargetType="telerik:SelectionThumbPreview">
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumbPreview_Background}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:SelectionThumbPreview">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Path Data="M0,0 L10,10 L0,10 z" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Left" Height="10" Stretch="Fill" VerticalAlignment="Bottom" Width="10"/>
<Path Data="M10,0 L10,10 L0,10 z" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Right" Height="10" Stretch="Fill" VerticalAlignment="Bottom" Width="10"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadTimeBarStyle1" TargetType="telerik:RadTimeBar">
<Setter Property="Foreground" Value="{StaticResource TimeBar_Foreground}"/>
<Setter Property="Background" Value="{StaticResource TimeBar_Background}"/>
<Setter Property="BorderThickness" Value="1,0,1,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TimeBar_BorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadTimeBar">
<Border BorderThickness="{TemplateBinding BorderThickness}" Background="#FF1D2029" BorderBrush="#FF1D2029">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" MinHeight="20"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,1" Background="#FF2E323C" Grid.Row="0" BorderBrush="#FF2E323C">
<Border BorderThickness="1" BorderBrush="#FF2E323C"/>
</Border>
<Border BorderThickness="0,1" Background="#FF2E323C" Grid.Row="2" BorderBrush="#FF2E323C">
<Border BorderThickness="1" BorderBrush="#FF2E323C"/>
</Border>
<telerik:TimeBarContentPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<ContentPresenter/>
</telerik:TimeBarContentPanel>
<telerik:ItemContainer x:Name="PART_ItemContainer" ItemsSource="{TemplateBinding IntervalItems}" Grid.Row="1" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}">
<telerik:ItemContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>
</ItemsPanelTemplate>
</telerik:ItemContainer.ItemsPanel>
<telerik:ItemContainer.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</telerik:ItemContainer.Template>
</telerik:ItemContainer>
<telerik:GroupContainer x:Name="PART_GroupContainer" ItemsSource="{TemplateBinding IntervalGroups}" Grid.Row="0" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}">
<telerik:GroupContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>
</ItemsPanelTemplate>
</telerik:GroupContainer.ItemsPanel>
<telerik:GroupContainer.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</telerik:GroupContainer.Template>
</telerik:GroupContainer>
<telerik:TimeBarStackPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<telerik:ShadeControl EndDate="{Binding StartDate, ElementName=PART_SelectionThumb}" StartDate="{TemplateBinding PeriodStart}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
<telerik:SelectionThumb x:Name="PART_SelectionThumb" EndDate="{Binding ActualSelectionEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IntervalGroups="{TemplateBinding IntervalGroups}" IntervalItems="{TemplateBinding IntervalItems}" IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}" MaxSelectionRange="{TemplateBinding MaxSelectionRange}" MinSelectionRange="{TemplateBinding MinSelectionRange}" PeriodStart="{TemplateBinding PeriodStart}" PeriodEnd="{TemplateBinding PeriodEnd}" SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}" StartDate="{Binding ActualSelectionStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" VisiblePeriodRange="{Binding ActualVisiblePeriodRange, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Canvas.ZIndex="2"/>
<telerik:ShadeControl EndDate="{TemplateBinding PeriodEnd}" StartDate="{Binding EndDate, ElementName=PART_SelectionThumb}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
</telerik:TimeBarStackPanel>
<telerik:TimeBarPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
<telerik:SelectionThumbPreview x:Name="PART_SelectionThumbPreview" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource SelectionThumbPreviewStyle}"/>
</telerik:TimeBarPanel>
</Grid>
<telerik:RadSlider x:Name="PART_Slider" LargeChange="{Binding LargeChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Maximum="{Binding PeriodEnd, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}" MinimumRangeSpan="{Binding ActualMinZoomRange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Minimum="{Binding PeriodStart, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Style="{StaticResource CustomSlider2}" SmallChange="{Binding SmallChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" Selection="{Binding ActualVisiblePeriodRange, Converter={StaticResource selectionRangeConverter}, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>