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

Timeline Customization

4 Answers 194 Views

TimeLine

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

4 Answers, 1 is accepted

answered on 03 Aug 2012, 03:30 PM

Hi Aril,

There is no easy straightforward way to dynamically change the background of the regions your speaking of. One reason is that the background of the areas you are speaking of is actually the background of the entire viewable surface. The control doesn't create a separate background for each time region when the items is generated. It's actually a DataTemplate on top of what you see as a "background".

You can accomplish this, but it'll take some creativity on your part. I've included the entire control template of RadTimeLine for you below. You can add your own element to the data template and programmatically change the background color depending on what month it is in.

Also, you can find some more information and inspiration by taking a look at the Customizing TimeLine Items help documentation. You'll see again that it is actually a DataTemplate you're modifying.

Good Luck,
Lancelot

RadTimeLine ControlTemplate

<UserControl.Resources>

<SolidColorBrush x:Key="Timeline_Foreground" Color="#FF444444"/>

<FontFamily x:Key="FontFamily">Portable User Interface</FontFamily>

<SolidColorBrush x:Key="Timeline_Background" Color="White"/>

<SolidColorBrush x:Key="Timeline_BorderBrush" Color="#FF848484"/>

<LinearGradientBrush x:Key="Timeline_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="Timeline_Slider_InnerBorder" Color="Transparent"/>

<Thickness x:Key="Timeline_Slider_InnerBorderThickness">0</Thickness>

<System:Double x:Key="Timeline_Slider_Thumbs_Width">10</System:Double>

<SolidColorBrush x:Key="Timeline_Slider_Thumbs_Path" Color="Black"/>

<System:Double x:Key="Timeline_Slider_Thumbs_Path_Height">9</System:Double>

<System:Double x:Key="Timeline_Slider_Thumbs_Path_Width">5</System:Double>

<SolidColorBrush x:Key="Timeline_Slider_Thumbs_Shadow" Color="White"/>

<Style x:Key="Timeline_ThumbStyle" TargetType="Thumb">

<Setter Property="Width" Value="{StaticResource Timeline_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 Timeline_Slider_Thumbs_Path}"/>

<Setter Property="Cursor" Value="SizeWE"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Thumb">

<Grid>

<telerik:CommandManager.InputBindings>

<telerik:InputBindingCollection>

<telerik:MouseBinding Command="timeBars:RadTimeBarCommands.ExpandVisiblePeriodToStart" Gesture="LeftDoubleClick"/>

</telerik:InputBindingCollection>

</telerik:CommandManager.InputBindings>

<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 Timeline_Slider_Thumbs_Path_Height}" Width="{StaticResource Timeline_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 Timeline_Slider_Thumbs_Shadow}" HorizontalAlignment="Center" Height="{StaticResource Timeline_Slider_Thumbs_Path_Height}" RenderTransformOrigin="0.5,0.5" Width="{StaticResource Timeline_Slider_Thumbs_Path_Width}">

<Path.RenderTransform>

<TranslateTransform X="1"/>

</Path.RenderTransform>

</Path>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="Timeline_AlternateThumbStyle" TargetType="Thumb">

<Setter Property="Width" Value="{StaticResource Timeline_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 Timeline_Slider_Thumbs_Path}"/>

<Setter Property="Cursor" Value="SizeWE"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Thumb">

<Grid>

<telerik:CommandManager.InputBindings>

<telerik:InputBindingCollection>

<telerik:MouseBinding Command="timeBars:RadTimeBarCommands.ExpandVisiblePeriodToEnd" Gesture="LeftDoubleClick"/>

</telerik:InputBindingCollection>

</telerik:CommandManager.InputBindings>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>

<Path.RenderTransform>

<TranslateTransform X="1"/>

</Path.RenderTransform>

</Path>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<System:Double x:Key="Timeline_Slider_Range_Height">9</System:Double>

<Thickness x:Key="Timeline_Slider_Range_BorderThickness">1</Thickness>

<LinearGradientBrush x:Key="Timeline_Slider_Range_Border" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="Black" Offset="0"/>

<GradientStop Color="Gray" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="Timeline_Slider_Range_Background" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFBE32"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

<CornerRadius x:Key="Timeline_Slider_Range_Border_CornerRadius">0</CornerRadius>

<Style x:Key="Timeline_SelectionMiddleThumbStyle" TargetType="Thumb">

<Setter Property="Height" Value="{StaticResource Timeline_Slider_Range_Height}"/>

<Setter Property="IsTabStop" Value="True"/>

<Setter Property="BorderThickness" Value="{StaticResource Timeline_Slider_Range_BorderThickness}"/>

<Setter Property="BorderBrush" Value="{StaticResource Timeline_Slider_Range_Border}"/>

<Setter Property="Background" Value="{StaticResource Timeline_Slider_Range_Background}"/>

<Setter Property="Cursor" Value="Hand"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Thumb">

<Grid>

<telerik:CommandManager.InputBindings>

<telerik:InputBindingCollection>

<telerik:MouseBinding Command="timeBars:RadTimeBarCommands.ExpandVisiblePeriod" Gesture="LeftDoubleClick"/>

</telerik:InputBindingCollection>

</telerik:CommandManager.InputBindings>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource Timeline_Slider_Range_Border_CornerRadius}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="Timeline_TrackStyle" TargetType="ContentControl">

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ContentControl">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<SolidColorBrush x:Key="Timeline_Slider_Handle_Path_Background" Color="Black"/>

<CornerRadius x:Key="Timeline_Slider_Handle_InnerBorder_CornerRadius">0</CornerRadius>

<CornerRadius x:Key="Timeline_Slider_Handle_OuterBorder_CornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="Timeline_Slider_Handle_OuterBorder_Over" Color="#FFFFC92B"/>

<Thickness x:Key="Timeline_Slider_Handle_OuterBorder_BorderThickness_Over">1</Thickness>

<LinearGradientBrush x:Key="Timeline_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="Timeline_Slider_Handle_InnerBorder_BorderThickness_Over">1</Thickness>

<SolidColorBrush x:Key="Timeline_Slider_Handle_InnerBorder_Over" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="Timeline_Slider_Handle_Path_Background_Over" Color="Black"/>

<LinearGradientBrush x:Key="Timeline_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="Timeline_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="Timeline_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="Timeline_Slider_Handle_Path_Background_Pressed" Color="Black"/>

<ControlTemplate x:Key="Timeline_HandleRepeatButton" 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 Timeline_Slider_Handle_OuterBorder_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_OuterBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_Background_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_InnerBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_InnerBorder_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_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 Timeline_Slider_Handle_OuterBorder_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="Border">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_OuterBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_Background_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_InnerBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_InnerBorder_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Timeline_Slider_Handle_Path_Background_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="{StaticResource Timeline_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="Timeline_IncreaseHandleStyle" TargetType="RepeatButton">

<Setter Property="Foreground" Value="{StaticResource Timeline_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 Timeline_HandleRepeatButton}"/>

<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="Timeline_DecreaseHandleStyle" TargetType="RepeatButton">

<Setter Property="Foreground" Value="{StaticResource Timeline_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 Timeline_HandleRepeatButton}"/>

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="BorderBrush" Value="Transparent"/>

<Setter Property="Background" Value="Transparent"/>

</Style>

<Style x:Key="Timeline_LargeHandleStyle" TargetType="RepeatButton">

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="RepeatButton">

<Grid Background="Transparent"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<SolidColorBrush x:Key="Timeline_Slider_Thumbs_OuterBorder" Color="#FF848484"/>

<Thickness x:Key="Timeline_Slider_Thumbs_OuterBorderThickness">1</Thickness>

<SolidColorBrush x:Key="Timeline_Slider_Thumbs_InnerBorder" Color="White"/>

<Thickness x:Key="Timeline_Slider_Thumbs_InnerBorderThickness">1</Thickness>

<LinearGradientBrush x:Key="Timeline_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="Timeline_Slider_Thumbs_InnerBorder_CornerRadius">0</CornerRadius>

<CornerRadius x:Key="Timeline_Slider_Thumbs_OuterBorder_CornerRadius">0</CornerRadius>

<Thickness x:Key="Timeline_Slider_Margin">0,1,0,0</Thickness>

<Style x:Key="Timeline_Slider" TargetType="telerik:RadSlider">

<Setter Property="HandlesVisibility" Value="Collapsed"/>

<Setter Property="Height" Value="17"/>

<Setter Property="IsMouseWheelEnabled" Value="False"/>

<Setter Property="IsSelectionRangeEnabled" Value="True"/>

<Setter Property="StepAction" Value="MoveRange"/>

<Setter Property="Background" Value="{StaticResource Timeline_Slider_Background}"/>

<Setter Property="BorderBrush" Value="{StaticResource Timeline_Slider_InnerBorder}"/>

<Setter Property="BorderThickness" Value="{StaticResource Timeline_Slider_InnerBorderThickness}"/>

<Setter Property="ThumbStyle" Value="{StaticResource Timeline_ThumbStyle}"/>

<Setter Property="AlternateThumbStyle" Value="{StaticResource Timeline_AlternateThumbStyle}"/>

<Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource Timeline_SelectionMiddleThumbStyle}"/>

<Setter Property="TrackStyle" Value="{StaticResource Timeline_TrackStyle}"/>

<Setter Property="IncreaseHandleStyle" Value="{StaticResource Timeline_IncreaseHandleStyle}"/>

<Setter Property="DecreaseHandleStyle" Value="{StaticResource Timeline_DecreaseHandleStyle}"/>

<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 Timeline_Slider_Margin}" UseLayoutRounding="True">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid Grid.ColumnSpan="3" Grid.Column="1">

<ContentControl x:Name="Track" Style="{TemplateBinding TrackStyle}"/>

</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 Timeline_LargeHandleStyle}"/>

<Grid Grid.Column="2">

<Border BorderBrush="{StaticResource Timeline_Slider_Thumbs_OuterBorder}" BorderThickness="{StaticResource Timeline_Slider_Thumbs_OuterBorderThickness}" CornerRadius="{StaticResource Timeline_Slider_Thumbs_OuterBorder_CornerRadius}">

<Border BorderBrush="{StaticResource Timeline_Slider_Thumbs_InnerBorder}" BorderThickness="{StaticResource Timeline_Slider_Thumbs_InnerBorderThickness}" Background="{StaticResource Timeline_Slider_Thumbs_Background}" CornerRadius="{StaticResource Timeline_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}" Visibility="{TemplateBinding ThumbVisibility}"/>

<Thumb x:Name="RangeMiddleThumb" Style="{TemplateBinding SelectionMiddleThumbStyle}"/>

<Thumb x:Name="RangeEndThumb" Style="{TemplateBinding AlternateThumbStyle}" Visibility="{TemplateBinding ThumbVisibility}"/>

</StackPanel>

</Grid>

<RepeatButton x:Name="LargeIncreaseButton" Grid.Column="3" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource Timeline_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>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<telerik:Office_BlackTheme x:Key="Theme"/>

<DataTemplate x:Key="TimelineItemTemplate">

<Telerik_Windows_Controls_Timeline:TimelineItemControl telerik:StyleManager.Theme="{StaticResource Theme}"/>

</DataTemplate>

<DataTemplate x:Key="TimelineInstantItemTemplate">

<Telerik_Windows_Controls_Timeline:TimelineInstantItemControl telerik:StyleManager.Theme="{StaticResource Theme}"/>

</DataTemplate>

<Style x:Key="TimelinePeriodHeaderStyle" TargetType="Border">

<Setter Property="Height" Value="23"/>

<Setter Property="VerticalAlignment" Value="Top"/>

</Style>

<Style x:Key="TimelineGroupPeriodHeaderStyle" TargetType="Border">

<Setter Property="Height" Value="15"/>

<Setter Property="VerticalAlignment" Value="Top"/>

</Style>

<SolidColorBrush x:Key="Timeline_Button_Bottom_BorderBrush" Color="Transparent"/>

<Thickness x:Key="Timeline_Button_Bottom_Thickness">0</Thickness>

<LinearGradientBrush x:Key="Timeline_Button_Bottom_Background" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF848484" Offset="0"/>

<GradientStop Color="#FFCCCCCC" Offset="1"/>

</LinearGradientBrush>

<telerik:TimeSpanTicksConverter x:Key="timespanConverter"/>

<telerik:DateTicksConverter x:Key="dateConverter"/>

<telerik:SelectionRangeDateTicksConverter x:Key="selectionRangeConverter"/>

<Style x:Key="RadTimelineStyle1" TargetType="telerik:RadTimeline">

<Setter Property="Foreground" Value="{StaticResource Timeline_Foreground}"/>

<Setter Property="FontFamily" Value="{StaticResource FontFamily}"/>

<Setter Property="Background" Value="{StaticResource Timeline_Background}"/>

<Setter Property="BorderThickness" Value="1,0,1,1"/>

<Setter Property="BorderBrush" Value="{StaticResource Timeline_BorderBrush}"/>

<Setter Property="SliderStyle" Value="{StaticResource Timeline_Slider}"/>

<Setter Property="TimelineItemTemplate" Value="{StaticResource TimelineItemTemplate}"/>

<Setter Property="TimelineInstantItemTemplate" Value="{StaticResource TimelineInstantItemTemplate}"/>

<Setter Property="PeriodHeaderStyle" Value="{StaticResource TimelinePeriodHeaderStyle}"/>

<Setter Property="GroupPeriodHeaderStyle" Value="{StaticResource TimelineGroupPeriodHeaderStyle}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadTimeline">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid Grid.Row="0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Border BorderBrush="{StaticResource Timeline_Button_Bottom_BorderBrush}" BorderThickness="{StaticResource Timeline_Button_Bottom_Thickness}" Background="{StaticResource Timeline_Slider_Range_Background}" Height="4" Grid.Row="1" VerticalAlignment="Top"/>

<Border Background="{TemplateBinding Background}" Margin="0,4,0,0" Grid.Row="1"/>

<Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer x:Name="PART_TimelineGroupPeriodContainer" ItemHeaderStyle="{TemplateBinding GroupPeriodHeaderStyle}" ItemsSource="{TemplateBinding IntervalGroups}" Grid.Row="0" telerik:StyleManager.Theme="{StaticResource Theme}">

<Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer.ItemsPanel>

<ItemsPanelTemplate>

<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>

</ItemsPanelTemplate>

</Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer.ItemsPanel>

<Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer.Template>

<ControlTemplate>

<ItemsPresenter/>

</ControlTemplate>

</Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer.Template>

</Telerik_Windows_Controls_Timeline:TimelineGroupPeriodContainer>

<Telerik_Windows_Controls_Timeline:TimelinePeriodContainer x:Name="PART_TimelinePeriodContainer" ItemHeaderStyle="{TemplateBinding PeriodHeaderStyle}" ItemsSource="{TemplateBinding IntervalItems}" Grid.Row="1" telerik:StyleManager.Theme="{StaticResource Theme}">

<Telerik_Windows_Controls_Timeline:TimelinePeriodContainer.ItemsPanel>

<ItemsPanelTemplate>

<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>

</ItemsPanelTemplate>

</Telerik_Windows_Controls_Timeline:TimelinePeriodContainer.ItemsPanel>

<Telerik_Windows_Controls_Timeline:TimelinePeriodContainer.Template>

<ControlTemplate>

<ItemsPresenter/>

</ControlTemplate>

</Telerik_Windows_Controls_Timeline:TimelinePeriodContainer.Template>

</Telerik_Windows_Controls_Timeline:TimelinePeriodContainer>

<Telerik_Windows_Controls_Timeline:TimelineItemContainer x:Name="PART_TimelineItemContainer" ItemsSource="{TemplateBinding GroupedDataItems}" Grid.Row="0" Grid.RowSpan="2" SelectionRegionControl="{Binding ElementName=PART_SelectionRegion}" telerik:StyleManager.Theme="{StaticResource Theme}">

<Telerik_Windows_Controls_Timeline:TimelineItemContainer.Template>

<ControlTemplate>

<ItemsPresenter/>

</ControlTemplate>

</Telerik_Windows_Controls_Timeline:TimelineItemContainer.Template>

</Telerik_Windows_Controls_Timeline:TimelineItemContainer>

<Telerik_Windows_Controls_Timeline:SelectionRegionPanel Grid.Row="0" Grid.RowSpan="2" Slider="{Binding ElementName=PART_Slider}">

<Telerik_Windows_Controls_Timeline:SelectionRegion x:Name="PART_SelectionRegion" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</Telerik_Windows_Controls_Timeline:SelectionRegionPanel>

</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="{TemplateBinding SliderStyle}" 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>

</UserControl.Resources>

answered on 08 Aug 2012, 12:17 PM

Hi Arıl,

In case your month intervals are the small intervals on the timeline (the ones under the timeline), you can use a custom template for the TimelinePeriodControl and bind the background using a converter. For example:

<local:CustomItemToColorConverter x:Key="CustomItemToColorConverter" />

<Style TargetType="timelines:TimelinePeriodControl">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="timelines:TimelinePeriodControl">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="4" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Border Grid.Row="0"

BorderThickness="{StaticResource Timeline_Button_Bottom_Thickness}"

BorderBrush="{StaticResource Timeline_Button_Bottom_BorderBrush}"

Background="Transparent"

SnapsToDevicePixels="True" />

<Border Style="{TemplateBinding ElementStyle}"

Grid.Row="1"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

SnapsToDevicePixels="True">

<Border.Background>

<SolidColorBrush Color="{Binding Converter={StaticResource CustomItemToColorConverter}}" />

</Border.Background>

<Border Style="{TemplateBinding HeaderStyle}">

<TextBlock Text="{Binding Label}"

Padding="5 0"

Width="Auto"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

The convert method of your converter should be as the following:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

Color color = Colors.Transparent;

if (value != null && value is IPeriodSpan)

{

int month = ((IPeriodSpan)value).StartDate.Month;

switch (month)

{

case 1:

color = Colors.Blue;

break;

case 2:

color = Colors.Red;

break;

case 3:

color = Colors.Green;

break;

default:

color = Colors.Transparent;

break;

}

return color;

}

In case the month intervals are the larger intervals on your timeline, you can use the same approach for the TimelineGroupPeriodControl style.

For additional information on modifying the default styles of our controls, please refer to our online documentation.

All the best,
Tsvetie
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 09 Jan 2013, 01:15 PM

radtimeline.png

Hi,
I just want to see Date header's foreground white. I implicitly override TextBlock's foreground to white and I override Control's template and set all of Foreground's to White. Sure I set control's own Foreground to White. But it is still seen in a fuzzy color as you see on attachement.

What is your suggestion? Here are the details of control;

King Regards!

<telerik:RadTimeline Height="120"
PeriodStart="{Binding StartDate,Mode=TwoWay}"
PeriodEnd="{Binding EndDate,Mode=TwoWay}"
Grid.Row="0" x:Name="RadTimeLineHistory" StartPath="ActivityDate" Background="Transparent"
Foreground="White"
BorderBrush="#00848484"
Template="{StaticResource RadTimelineControlTemplateDefault}">
<telerik:RadTimeline.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
</Style>
</telerik:RadTimeline.Resources>

Here goes RadTimelineControlTemplateDefault I set all of it's part's foreground to White I think.

<ControlTemplate x:Key="RadTimelineControlTemplateDefault" TargetType="telerik1:RadTimeline">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
>
<Border.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
</Style>
</Border.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>





<telerik1:TimelineAnnotationsPanel x:Name="PART_TimelineAnnotationsPanel" Slider="{Binding ElementName=PART_Slider}" Grid.Row="0">

<Grid Canvas.ZIndex="100">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>


<Border Grid.Row="1"
BorderBrush="{StaticResource Timeline_Button_Bottom_BorderBrush}"
BorderThickness="{StaticResource Timeline_Button_Bottom_Thickness}"
Background="{StaticResource Timeline_Button_Bottom_Background}"
Height="4" VerticalAlignment="Top" />


<telerik1:TimelineGroupPeriodContainer x:Name="PART_TimelineGroupPeriodContainer" Grid.Row="0"
ItemsSource="{TemplateBinding IntervalGroups}"
ItemHeaderStyle="{TemplateBinding GroupPeriodHeaderStyle}"
Foreground="White">
<telerik1:TimelineGroupPeriodContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik1:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>
</ItemsPanelTemplate>
</telerik1:TimelineGroupPeriodContainer.ItemsPanel>
<telerik1:TimelineGroupPeriodContainer.Template>
<ControlTemplate>
<ItemsPresenter OpacityMask="White" />
</ControlTemplate>
</telerik1:TimelineGroupPeriodContainer.Template>
</telerik1:TimelineGroupPeriodContainer>

<telerik1:TimelinePeriodContainer x:Name="PART_TimelinePeriodContainer" Grid.Row="1"
telerik1:ActualSizeProxy.IsEnabled="True"
ItemsSource="{TemplateBinding IntervalItems}"
ItemHeaderStyle="{TemplateBinding PeriodHeaderStyle}"
telerik1:StyleManager.Theme="{StaticResource Theme}" Foreground="White">
<telerik1:TimelinePeriodContainer.ItemsPanel>
<ItemsPanelTemplate>
<telerik1:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}" />
</ItemsPanelTemplate>
</telerik1:TimelinePeriodContainer.ItemsPanel>
<telerik1:TimelinePeriodContainer.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</telerik1:TimelinePeriodContainer.Template>
</telerik1:TimelinePeriodContainer>

</Grid>

<telerik1:TimelineItemContainer x:Name="PART_TimelineItemContainer"
GroupExpandMode="{TemplateBinding GroupExpandMode}"
ItemsSource="{TemplateBinding GroupedDataItems}"
SelectionRegionControl="{Binding ElementName=PART_SelectionRegion}"
telerik1:StyleManager.Theme="{StaticResource Theme}" Foreground="White">
<telerik1:TimelineItemContainer.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</telerik1:TimelineItemContainer.Template>
</telerik1:TimelineItemContainer>

</telerik1:TimelineAnnotationsPanel>

<telerik1:SelectionRegionPanel Slider="{Binding ElementName=PART_Slider}" Grid.Row="0">
<telerik1:SelectionRegion x:Name="PART_SelectionRegion"
telerik1:StyleManager.Theme="{StaticResource Theme}" Foreground="White" />
</telerik1:SelectionRegionPanel>

<telerik1:RadSlider x:Name="PART_Slider" Grid.Row="1"
telerik1:StyleManager.Theme="{StaticResource Theme}"
Style="{TemplateBinding SliderStyle}"
Minimum="{Binding PeriodStart, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Maximum="{Binding PeriodEnd, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}"
MinimumRangeSpan="{Binding ActualMinZoomRange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Selection="{Binding ActualVisiblePeriodRange, Converter={StaticResource selectionRangeConverter}, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SmallChange="{Binding SmallChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}"
LargeChange="{Binding LargeChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}"
ThumbVisibility="{Binding ScrollMode, Converter={StaticResource scrollModeToThumbVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Visibility="{Binding ScrollMode, Converter={StaticResource scrollModeToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Background="{x:Null}" />
</Grid>
</Border>
</ControlTemplate>

answered on 14 Jan 2013, 12:28 PM

Hello Davut,

The foreground of the timeline date strings is determined by the Foreground property of TimelineGroupPeriodControl and TimelinePeriodControl. In case you are using NoXaml Telerik DLLs, you can change the foreground with the following implicit styles:

<Style TargetType="telerik:TimelineGroupPeriodControl" BasedOn="{StaticResource TimelineGroupPeriodControlStyle}">

<Setter Property="Foreground" Value="White" />

</Style>

<Style TargetType="telerik:TimelinePeriodControl" BasedOn="{StaticResource TimelinePeriodControlStyle}">

<Setter Property="Foreground" Value="White" />

</Style>

You can read more about our implicit styles support here.

Kind regards,
Tsvetie
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Timeline Customization

4 Answers, 1 is accepted