4 Answers, 1 is accepted
0
Lancelot
Top achievements
Rank 1
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
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
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
>
<
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
=
"Border"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
CornerRadius
=
"{StaticResource Timeline_Slider_Handle_OuterBorder_CornerRadius}"
>
<
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
=
"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}"
/>
</
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
>
</
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
>
0
Hi Arıl,
The convert method of your converter should be as the following:
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
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
>
</
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.
0
Davut
Top achievements
Rank 1
answered on 09 Jan 2013, 01:15 PM
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>
<!-- Timeline Background -->
<!--Border Grid.Row="0"
Height="{Binding (timeBars:ActualSizeProxy.ActualHeight), ElementName=PART_TimelinePeriodContainer}"
VerticalAlignment="Bottom">
<Border Margin="0 4 0 0"
Background="{TemplateBinding Background}" />
</Border-->
<!-- /Timeline Background -->
<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>
<!-- No Items -->
<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" />
<!-- /No Items -->
<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>
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>
<!-- Timeline Background -->
<!--Border Grid.Row="0"
Height="{Binding (timeBars:ActualSizeProxy.ActualHeight), ElementName=PART_TimelinePeriodContainer}"
VerticalAlignment="Bottom">
<Border Margin="0 4 0 0"
Background="{TemplateBinding Background}" />
</Border-->
<!-- /Timeline Background -->
<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>
<!-- No Items -->
<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" />
<!-- /No Items -->
<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>
0
Hello Davut,
You can read more about our implicit styles support here.
Kind regards,
Tsvetie
the Telerik team
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.