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

Custom intervals style

1 Answer 76 Views
TimeBar
This is a migrated thread and some comments may be shown as answers.
Senthilkumar
Top achievements
Rank 1
Senthilkumar asked on 18 Apr 2013, 07:24 AM
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>

1 Answer, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 19 Apr 2013, 08:46 AM
Hi,

 This is to inform you that you have already been answered on the same in the other forum thread started by you (here).
Please avoid duplicate posts as it will be easier for both sides to follow the conversation.

Greetings,
Evgenia
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
TimeBar
Asked by
Senthilkumar
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Share this question
or