I have a WPF application that is designed to be used on laptops with touch screens by police officers while they are driving. Everything is enlarged to be easy to read at a glance and to hit with sausage fingers. Since the application is running in a police car, it has day and night modes. The purpose of night mode is to change the colors of the controls so as not to be too bright or affect night vision.
The RadDateTimePicker controls I'm using have resisted all of my attempts to get their colors to change. No matter what I do, they always look exactly the same.
Here is what I have done for the TextBox controls in my application. This lives in the app.xaml, so it applies to all TextBox controls in my application:
The DynamicResources shown are only a few of the ones I've defined. My app changes the Brushes associated with the various DynamicResources by swapping ResourceDictionaries in the MergedDictionaries property of the Application object. This is working well. Except for the RadTimePicker controls.
How do I get my RadDateTimePicker controls to work with my color changing method? The content templates of your styles are confusing to read and I don't know what part of the control belongs with which part of the template.
Tony
The RadDateTimePicker controls I'm using have resisted all of my attempts to get their colors to change. No matter what I do, they always look exactly the same.
Here is what I have done for the TextBox controls in my application. This lives in the app.xaml, so it applies to all TextBox controls in my application:
<
Style
TargetType
=
"{x:Type TextBox}"
>
<
Setter
Property
=
"Background"
Value
=
"{DynamicResource UnfocusedBackground}"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{DynamicResource ControlBorder}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{DynamicResource UnfocusedForeground}"
/>
<
Style.Triggers
>
<
Trigger
Property
=
"IsFocused"
Value
=
"True"
>
<
Setter
Property
=
"Background"
Value
=
"{DynamicResource FocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{DynamicResource FocusedForeground}"
/>
</
Trigger
>
</
Style.Triggers
>
</
Style
>
How do I get my RadDateTimePicker controls to work with my color changing method? The content templates of your styles are confusing to read and I don't know what part of the control belongs with which part of the template.
Tony
6 Answers, 1 is accepted
0
Tony
Top achievements
Rank 1
answered on 02 Apr 2012, 03:25 PM
I have been able to make some progress on this. Things aren't exactly where I want them to be, but I'm closer. Some details:
I modified a copy of the RadDateTimePicker control's template in my app.xaml. In the existing IsEnabled trigger, I added setters to set the foreground and background properties of the BackgroundVisual, PART_DateTimeInput, and PART_DropDownButton objects in the visual tree. I also added setters to the IsKeyboardFocusWithin trigger to change the background and foreground properties of the same elements. Now, when the cursor is actually in the RadDateTimePicker control, the foreground and background colors change as desired.
The problem is that in "night mode", the background color is supposed to be a dark shade of gray when the control does not have focus, but it's still white.
I used Snoop to inspect the visual tree of one of the RadDateTimePickers on my form with the application in "night mode". It turns out that the RadDateTimePicker out-of-the-box uses a RadWatermarkTextBox control as PART_DateTimeInput. Inside of this control, there is a Border, named Border, whose background color is set to White.
I'm not sure where this white background is coming from. I think this should be transparent or null, not white. Why do you have a Border called BackgroundVisual behind all of it if not to set the color of the control's background??
Anyway, I guess I have to make a copy of the RadWatermarkTextBox control's template and edit it in Expression Blend.
Tony
Edit: I just made a copy of the RadWatermarkTextBox control's template in Expression Blend. The Border's background color is template bound to the background color of the control. Yet, when I change the Background color of the RadWatermarkTextBox element of the RadDateTimePicker control in my Trigger, the background of this Border's background color doesn't change. It stays white.
I'm going to change it to {x:Null} in my copy and see what happens.
I modified a copy of the RadDateTimePicker control's template in my app.xaml. In the existing IsEnabled trigger, I added setters to set the foreground and background properties of the BackgroundVisual, PART_DateTimeInput, and PART_DropDownButton objects in the visual tree. I also added setters to the IsKeyboardFocusWithin trigger to change the background and foreground properties of the same elements. Now, when the cursor is actually in the RadDateTimePicker control, the foreground and background colors change as desired.
The problem is that in "night mode", the background color is supposed to be a dark shade of gray when the control does not have focus, but it's still white.
I used Snoop to inspect the visual tree of one of the RadDateTimePickers on my form with the application in "night mode". It turns out that the RadDateTimePicker out-of-the-box uses a RadWatermarkTextBox control as PART_DateTimeInput. Inside of this control, there is a Border, named Border, whose background color is set to White.
I'm not sure where this white background is coming from. I think this should be transparent or null, not white. Why do you have a Border called BackgroundVisual behind all of it if not to set the color of the control's background??
Anyway, I guess I have to make a copy of the RadWatermarkTextBox control's template and edit it in Expression Blend.
Tony
Edit: I just made a copy of the RadWatermarkTextBox control's template in Expression Blend. The Border's background color is template bound to the background color of the control. Yet, when I change the Background color of the RadWatermarkTextBox element of the RadDateTimePicker control in my Trigger, the background of this Border's background color doesn't change. It stays white.
I'm going to change it to {x:Null} in my copy and see what happens.
0
Tony
Top achievements
Rank 1
answered on 03 Apr 2012, 04:47 PM
OK, this is getting weird.
My form has 2 RadDateTimePicker controls on it. I have used Expression Blend to make a copy of the content template of one of those controls. I've placed that copy in the app.xaml file and it's set up so all RadDateTimePicker controls will use it. Here's the Xaml for the 2 RadDateTimePicker controls in the form in question:
Now, here's the weird thing. The second RadDateTimePicker, named EndDatePicker, has all of the formatting specified in my app.xaml, but the first one does not. Specificially, the RadWatermark's background color won't change in this control! This is bizarre.
Here's the Xaml for the RadDateTimePicker style:
Can you look at this and tell me what the problem is?
Tony
My form has 2 RadDateTimePicker controls on it. I have used Expression Blend to make a copy of the content template of one of those controls. I've placed that copy in the app.xaml file and it's set up so all RadDateTimePicker controls will use it. Here's the Xaml for the 2 RadDateTimePicker controls in the form in question:
<
UserControl
x:Class
=
"CarSystem.CustomControls.Searcher"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
Height
=
"620"
Loaded
=
"UserControl_Loaded"
Width
=
"990"
>
<
Grid
Background
=
"{DynamicResource ContentBackground}"
FocusManager.IsFocusScope
=
"True"
Name
=
"LayoutRoot"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"110"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Grid
Grid.Column
=
"0"
Grid.Row
=
"0"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
GroupBox
BorderBrush
=
"{DynamicResource ControlBorder}"
FontSize
=
"16"
FontWeight
=
"Bold"
Foreground
=
"{DynamicResource TextForeground}"
Grid.Column
=
"1"
Grid.Row
=
"0"
Header
=
"Start Date:"
Margin
=
"5,0"
>
<
telerik:RadDateTimePicker
FontSize
=
"14"
FontWeight
=
"Bold"
Height
=
"35"
Margin
=
"5"
Name
=
"StartDatePicker"
SelectionChanged
=
"DateTimePicker_SelectionChanged"
TabIndex
=
"2"
VerticalAlignment
=
"Center"
/>
</
GroupBox
>
<
GroupBox
BorderBrush
=
"{DynamicResource ControlBorder}"
FontSize
=
"16"
FontWeight
=
"Bold"
Foreground
=
"{DynamicResource TextForeground}"
Grid.Column
=
"1"
Grid.Row
=
"1"
Header
=
"End Date:"
Margin
=
"5,0"
>
<
telerik:RadDateTimePicker
FontSize
=
"14"
FontWeight
=
"Bold"
Height
=
"35"
Margin
=
"5"
Name
=
"EndDatePicker"
SelectionChanged
=
"DateTimePicker_SelectionChanged"
TabIndex
=
"3"
VerticalAlignment
=
"Center"
/>
</
GroupBox
>
</
Grid
>
</
Grid
>
</
UserControl
>
Now, here's the weird thing. The second RadDateTimePicker, named EndDatePicker, has all of the formatting specified in my app.xaml, but the first one does not. Specificially, the RadWatermark's background color won't change in this control! This is bizarre.
Here's the Xaml for the RadDateTimePicker style:
<
Style
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
Border
x:Name
=
"BackgroundVisual"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
/>
<
Border
x:Name
=
"MouseOverVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
IsHitTestVisible
=
"False"
Opacity
=
"0"
Visibility
=
"Collapsed"
/>
<
telerik:RadWatermarkTextBox
x:Name
=
"PART_DateTimeInput"
BorderThickness
=
"0"
Grid.Column
=
"0"
CurrentText
=
"{Binding CurrentDateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Margin
=
"{TemplateBinding BorderThickness}"
MinHeight
=
"0"
Padding
=
"{TemplateBinding Padding}"
SelectionOnFocus
=
"SelectAll"
TextAlignment
=
"{TemplateBinding TextAlignment}"
Text
=
"{Binding DateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
TabIndex
=
"0"
VerticalAlignment
=
"Stretch"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
WatermarkTemplate
=
"{TemplateBinding DateTimeWatermarkTemplate}"
WatermarkContent
=
"{TemplateBinding DateTimeWatermarkContent}"
>
</
telerik:RadWatermarkTextBox
>
<
Border
x:Name
=
"FocusVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
IsHitTestVisible
=
"False"
Visibility
=
"Collapsed"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"{TemplateBinding BorderThickness}"
CornerRadius
=
"0"
/>
</
Border
>
<
telerik:RadDropDownButton
x:Name
=
"PART_DropDownButton"
CloseOnEnter
=
"True"
Grid.Column
=
"1"
DropDownIndicatorVisibility
=
"Collapsed"
Focusable
=
"False"
telerik:DateTimePickerExtensions.FocusContentOnOpen
=
"True"
HorizontalAlignment
=
"Stretch"
HorizontalContentAlignment
=
"Stretch"
IsTabStop
=
"False"
IsOpen
=
"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Margin
=
"-1,0,0,0"
Padding
=
"0"
PopupPlacementTarget
=
"{Binding ElementName=PART_DateTimeInput}"
TabIndex
=
"1"
VerticalAlignment
=
"Stretch"
VerticalContentAlignment
=
"Stretch"
Width
=
"80"
>
<
telerik:RadDropDownButton.DropDownContent
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
telerik:RadCalendar
x:Name
=
"PART_Calendar"
Culture
=
"{TemplateBinding Culture}"
Grid.Column
=
"0"
DisplayDateEnd
=
"{Binding DisplayDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
DateSelectionMode
=
"{TemplateBinding DateSelectionMode}"
DisplayDateStart
=
"{Binding DisplayDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
DisplayDate
=
"{Binding DisplayDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding CalendarStyle}"
SelectableDateEnd
=
"{Binding SelectableDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectionMode
=
"Single"
SelectedDate
=
"{Binding SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectableDateStart
=
"{Binding SelectableDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
telerik:RadCalendar
>
<
telerik:DateTimePickerClock
x:Name
=
"PART_Clock"
Culture
=
"{TemplateBinding Culture}"
Grid.Column
=
"1"
EndTime
=
"{TemplateBinding EndTime}"
Header
=
"Clock"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding ClockStyle}"
SelectedTime
=
"{Binding SelectedTime, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
StartTime
=
"{TemplateBinding StartTime}"
TimeInterval
=
"{Binding TimeInterval, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
telerik:DateTimePickerClock
>
<
Border
x:Name
=
"CloseButtonContainer"
BorderBrush
=
"{DynamicResource ControlBorder}"
BorderThickness
=
"1,0,1,1"
Background
=
"{DynamicResource ContentBackground}"
Grid.ColumnSpan
=
"2"
Grid.Row
=
"1"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"1,0,1,1"
>
<
telerik:RadToggleButton
x:Name
=
"PART_Close"
Background
=
"{DynamicResource ButtonBackground}"
Content
=
"Close"
HorizontalAlignment
=
"Right"
IsThreeState
=
"False"
IsBackgroundVisible
=
"False"
IsChecked
=
"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Margin
=
"2"
Padding
=
"8,3"
>
<
telerik:RadToggleButton.Style
>
<
Style
TargetType
=
"{x:Type telerik:RadToggleButton}"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadToggleButton}"
>
<
Grid
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome
RenderNormal
=
"False"
RenderMouseOver
=
"{TemplateBinding IsMouseOver}"
RenderPressed
=
"{TemplateBinding IsPressed}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
ContentStringFormat
=
"{TemplateBinding ContentStringFormat}"
Margin
=
"{TemplateBinding Padding}"
/>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
telerik:RadToggleButton.Style
>
</
telerik:RadToggleButton
>
</
Border
>
</
Border
>
</
Grid
>
</
telerik:RadDropDownButton.DropDownContent
>
<
telerik:RadDropDownButton.Template
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadDropDownButton}"
>
<
Grid
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
ContentStringFormat
=
"{TemplateBinding ContentStringFormat}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Popup
x:Name
=
"DropDownPopup"
AllowsTransparency
=
"True"
Focusable
=
"False"
IsOpen
=
"{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement
=
"Bottom"
StaysOpen
=
"False"
>
<
ContentPresenter
x:Name
=
"DropDownPopupContent"
ContentTemplate
=
"{TemplateBinding DropDownContentTemplate}"
Content
=
"{TemplateBinding DropDownContent}"
/>
</
Popup
>
</
Grid
>
</
ControlTemplate
>
</
telerik:RadDropDownButton.Template
>
<
Grid
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome
x:Name
=
"ButtonChrome"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
CornerRadius
=
"0,1,1,0"
RenderMouseOver
=
"{Binding IsMouseOver, ElementName=PART_DropDownButton}"
RenderFocused
=
"{TemplateBinding IsKeyboardFocusWithin}"
RenderActive
=
"{TemplateBinding IsMouseOver}"
RenderEnabled
=
"{TemplateBinding IsEnabled}"
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome
>
<
ContentControl
x:Name
=
"DropDownIcon"
Background
=
"White"
Foreground
=
"Black"
IsTabStop
=
"False"
>
<
ContentControl.Template
>
<
ControlTemplate
TargetType
=
"{x:Type ContentControl}"
>
<
Grid
>
<
Path
x:Name
=
"CalendarIconBackground"
Data
=
"M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
Height
=
"7"
Margin
=
"4,5,4,4"
Stroke
=
"{TemplateBinding Background}"
Width
=
"7"
/>
<
Path
x:Name
=
"CalendarIconForeground"
Data
=
"M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
Height
=
"7"
Margin
=
"4,4,4,5"
Stroke
=
"{TemplateBinding Foreground}"
Width
=
"7"
/>
</
Grid
>
</
ControlTemplate
>
</
ContentControl.Template
>
</
ContentControl
>
</
Grid
>
</
telerik:RadDropDownButton
>
<
Popup
x:Name
=
"PART_InputPopup"
AllowsTransparency
=
"True"
telerik:PopupExtensions.IsOpen
=
"{Binding IsTooltipOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
telerik:PopupExtensions.Owner
=
"{Binding RelativeSource={RelativeSource TemplatedParent}}"
Placement
=
"Top"
telerik:PopupExtensions.Placement
=
"Top"
telerik:PopupExtensions.PlacementTarget
=
"{Binding ElementName=PART_DateTimeInput}"
StaysOpen
=
"False"
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding TooltipTemplate}"
Content
=
"{TemplateBinding TooltipContent}"
/>
</
Popup
>
</
Grid
>
<
ControlTemplate.Triggers
>
<
MultiTrigger
>
<
MultiTrigger.Conditions
>
<
Condition
Property
=
"IsEnabled"
Value
=
"True"
/>
<
Condition
Property
=
"IsMouseOver"
Value
=
"True"
/>
</
MultiTrigger.Conditions
>
<
MultiTrigger.EnterActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0.115"
Value
=
"1"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
BeginStoryboard
>
</
MultiTrigger.EnterActions
>
<
MultiTrigger.ExitActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0.15"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.15"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Collapsed</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
BeginStoryboard
>
</
MultiTrigger.ExitActions
>
<
Setter
Property
=
"Foreground"
TargetName
=
"DropDownIcon"
Value
=
"Black"
/>
<
Setter
Property
=
"Background"
TargetName
=
"DropDownIcon"
Value
=
"White"
/>
</
MultiTrigger
>
<
Trigger
Property
=
"IsDropDownOpen"
Value
=
"True"
>
<
Setter
Property
=
"Foreground"
TargetName
=
"DropDownIcon"
Value
=
"Black"
/>
<
Setter
Property
=
"Background"
TargetName
=
"DropDownIcon"
Value
=
"White"
/>
</
Trigger
>
<
Trigger
Property
=
"IsEnabled"
Value
=
"False"
>
<
Setter
Property
=
"BorderBrush"
TargetName
=
"BackgroundVisual"
Value
=
"{DynamicResource ControlBorder}"
/>
<
Setter
Property
=
"Opacity"
TargetName
=
"MouseOverVisual"
Value
=
"0"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"MouseOverVisual"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"Background"
TargetName
=
"BackgroundVisual"
Value
=
"{DynamicResource UnfocusedBackground}"
/>
<
Setter
Property
=
"Background"
TargetName
=
"PART_DateTimeInput"
Value
=
"{DynamicResource UnfocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"PART_DateTimeInput"
Value
=
"{DynamicResource UnfocusedForeground}"
/>
<
Setter
Property
=
"Background"
TargetName
=
"PART_DropDownButton"
Value
=
"{DynamicResource ButtonBackgorund}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"PART_DropDownButton"
Value
=
"{DynamicResource ButtonForegorund}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource ButtonForeground}"
/>
<
Setter
Property
=
"Background"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource ButtonBackground}"
/>
</
Trigger
>
<
Trigger
Property
=
"IsKeyboardFocusWithin"
Value
=
"True"
>
<
Setter
Property
=
"Background"
TargetName
=
"BackgroundVisual"
Value
=
"{DynamicResource FocusedBackground}"
/>
<
Setter
Property
=
"Background"
TargetName
=
"PART_DateTimeInput"
Value
=
"{DynamicResource FocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"PART_DateTimeInput"
Value
=
"{DynamicResource FocusedForeground}"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"FocusVisual"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"InputMode"
Value
=
"DatePicker"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"PART_Clock"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"CloseButtonContainer"
Value
=
"Collapsed"
/>
</
Trigger
>
<
Trigger
Property
=
"InputMode"
Value
=
"TimePicker"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"PART_Calendar"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"CloseButtonContainer"
Value
=
"Collapsed"
/>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Can you look at this and tell me what the problem is?
Tony
0
Hi Tony,
Since you need two styles for RadDateTimePicker, I suggest you keep two separate resource dictionaries, each with a separate style. You can then add or remove dictionaries to Application.Current.Resources.MergedDictionaries at runtime and switch between the two.
It is recommended that you switch resource dictionaries rather than switch a list of dynamic brushes. It is a cleaner and easier solution.
Since 2012 Q1 SP1, RadControls have significantly improved support for implicit styling, so you should be able to easily make and apply the switch.
Greetings,
Dani
the Telerik team
Since you need two styles for RadDateTimePicker, I suggest you keep two separate resource dictionaries, each with a separate style. You can then add or remove dictionaries to Application.Current.Resources.MergedDictionaries at runtime and switch between the two.
It is recommended that you switch resource dictionaries rather than switch a list of dynamic brushes. It is a cleaner and easier solution.
Since 2012 Q1 SP1, RadControls have significantly improved support for implicit styling, so you should be able to easily make and apply the switch.
Greetings,
Dani
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Tony
Top achievements
Rank 1
answered on 04 Apr 2012, 02:12 PM
Dani:
That is exactly what I'm doing. The effect is that the color for each brush resource are changed, but I'm not changing the brushes themselves.
I can try putting two different styles for the RadDateTimePicker in each resource dictionary. It can't hurt.
Tony
That is exactly what I'm doing. The effect is that the color for each brush resource are changed, but I'm not changing the brushes themselves.
I can try putting two different styles for the RadDateTimePicker in each resource dictionary. It can't hurt.
Tony
0
Hi Tony,
If you are still experiencing an issue, you can send a sample working project reproducing this issue, so that we can test if there is anything wrong with RadDateTimePicker style.
Greetings,
Dani
the Telerik team
If you are still experiencing an issue, you can send a sample working project reproducing this issue, so that we can test if there is anything wrong with RadDateTimePicker style.
Greetings,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Tony
Top achievements
Rank 1
answered on 10 Apr 2012, 06:22 PM
I was able to get this to work for me this morning, after reviewing the control template intermittently for the last three weeks.
Here's my revised template for the RadDateTimePicker that works.
As you can see, I added a trigger on the IsKeyboardFocusWithin property that sets the focused colors for the control. And I added setters that set the unfocused colors for the control as the default.
This was a tough one. I had the trigger to set the focused colors working 3 weeks ago, but the complexity of the control's template threw me off. It turns out that what I was missing all this time was the setters to set the unfocused colors as the defaults. Once I added that, it all worked fine.
Tony
Here's my revised template for the RadDateTimePicker that works.
<
Style
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
>
<
Setter
Property
=
"Background"
Value
=
"{DynamicResource UnfocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{DynamicResource UnfocusedForeground}"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
Border
x:Name
=
"BackgroundVisual"
Background
=
"{TemplateBinding Background}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
/>
<
Border
x:Name
=
"MouseOverVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
IsHitTestVisible
=
"False"
Opacity
=
"0"
Visibility
=
"Collapsed"
/>
<
telerik:RadWatermarkTextBox
x:Name
=
"PART_DateTimeInput"
Background
=
"{TemplateBinding Background}"
BorderThickness
=
"0"
Foreground
=
"{TemplateBinding Foreground}"
Grid.Column
=
"0"
CurrentText
=
"{Binding CurrentDateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Margin
=
"{TemplateBinding BorderThickness}"
MinHeight
=
"0"
Padding
=
"{TemplateBinding Padding}"
SelectionOnFocus
=
"SelectAll"
TextAlignment
=
"{TemplateBinding TextAlignment}"
Text
=
"{Binding DateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
TabIndex
=
"0"
VerticalAlignment
=
"Stretch"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
WatermarkTemplate
=
"{TemplateBinding DateTimeWatermarkTemplate}"
WatermarkContent
=
"{TemplateBinding DateTimeWatermarkContent}"
>
</
telerik:RadWatermarkTextBox
>
<
Border
x:Name
=
"FocusVisual"
BorderBrush
=
"#FFFFC92B"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.ColumnSpan
=
"2"
CornerRadius
=
"1"
IsHitTestVisible
=
"False"
Visibility
=
"Collapsed"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"{TemplateBinding BorderThickness}"
CornerRadius
=
"0"
/>
</
Border
>
<
telerik:RadDropDownButton
x:Name
=
"PART_DropDownButton"
CloseOnEnter
=
"True"
Grid.Column
=
"1"
DropDownIndicatorVisibility
=
"Collapsed"
Focusable
=
"False"
telerik:DateTimePickerExtensions.FocusContentOnOpen
=
"True"
HorizontalAlignment
=
"Stretch"
HorizontalContentAlignment
=
"Stretch"
IsTabStop
=
"False"
IsOpen
=
"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Margin
=
"-1,0,0,0"
Padding
=
"0"
PopupPlacementTarget
=
"{Binding ElementName=PART_DateTimeInput}"
TabIndex
=
"1"
VerticalAlignment
=
"Stretch"
VerticalContentAlignment
=
"Stretch"
Width
=
"80"
>
<
telerik:RadDropDownButton.DropDownContent
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
telerik:RadCalendar
x:Name
=
"PART_Calendar"
Culture
=
"{TemplateBinding Culture}"
Grid.Column
=
"0"
DisplayDateEnd
=
"{Binding DisplayDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
DateSelectionMode
=
"{TemplateBinding DateSelectionMode}"
DisplayDateStart
=
"{Binding DisplayDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
DisplayDate
=
"{Binding DisplayDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding CalendarStyle}"
SelectableDateEnd
=
"{Binding SelectableDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectionMode
=
"Single"
SelectedDate
=
"{Binding SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
SelectableDateStart
=
"{Binding SelectableDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
telerik:RadCalendar
>
<
telerik:DateTimePickerClock
x:Name
=
"PART_Clock"
Culture
=
"{TemplateBinding Culture}"
Grid.Column
=
"1"
EndTime
=
"{TemplateBinding EndTime}"
Header
=
"Clock"
IsReadOnly
=
"{TemplateBinding IsReadOnly}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding ClockStyle}"
SelectedTime
=
"{Binding SelectedTime, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
StartTime
=
"{TemplateBinding StartTime}"
TimeInterval
=
"{Binding TimeInterval, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
telerik:DateTimePickerClock
>
<
Border
x:Name
=
"CloseButtonContainer"
BorderBrush
=
"{DynamicResource ControlBorder}"
BorderThickness
=
"1,0,1,1"
Background
=
"{DynamicResource ContentBackground}"
Grid.ColumnSpan
=
"2"
Grid.Row
=
"1"
>
<
Border
BorderBrush
=
"Transparent"
BorderThickness
=
"1,0,1,1"
>
<
telerik:RadToggleButton
x:Name
=
"PART_Close"
Background
=
"{DynamicResource ButtonBackground}"
Content
=
"Close"
HorizontalAlignment
=
"Right"
IsThreeState
=
"False"
IsBackgroundVisible
=
"False"
IsChecked
=
"{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Margin
=
"2"
Padding
=
"8,3"
>
<
telerik:RadToggleButton.Style
>
<
Style
TargetType
=
"{x:Type telerik:RadToggleButton}"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadToggleButton}"
>
<
Grid
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome
RenderNormal
=
"False"
RenderMouseOver
=
"{TemplateBinding IsMouseOver}"
RenderPressed
=
"{TemplateBinding IsPressed}"
>
<
telerik:StyleManager.Theme
>
<
telerik:Office_BlackTheme
/>
</
telerik:StyleManager.Theme
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
ContentStringFormat
=
"{TemplateBinding ContentStringFormat}"
Margin
=
"{TemplateBinding Padding}"
/>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
telerik:RadToggleButton.Style
>
</
telerik:RadToggleButton
>
</
Border
>
</
Border
>
</
Grid
>
</
telerik:RadDropDownButton.DropDownContent
>
<
telerik:RadDropDownButton.Template
>
<
ControlTemplate
TargetType
=
"{x:Type telerik:RadDropDownButton}"
>
<
Grid
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
ContentStringFormat
=
"{TemplateBinding ContentStringFormat}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
<
Popup
x:Name
=
"DropDownPopup"
AllowsTransparency
=
"True"
Focusable
=
"False"
IsOpen
=
"{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement
=
"Bottom"
StaysOpen
=
"False"
>
<
ContentPresenter
x:Name
=
"DropDownPopupContent"
ContentTemplate
=
"{TemplateBinding DropDownContentTemplate}"
Content
=
"{TemplateBinding DropDownContent}"
/>
</
Popup
>
</
Grid
>
</
ControlTemplate
>
</
telerik:RadDropDownButton.Template
>
<
Grid
>
<
Telerik_Windows_Controls_Chromes:ButtonChrome
x:Name
=
"ButtonChrome"
Background
=
"{DynamicResource ButtonBackground}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Foreground
=
"{DynamicResource ButtonForeground}"
CornerRadius
=
"0,1,1,0"
RenderMouseOver
=
"{Binding IsMouseOver, ElementName=PART_DropDownButton}"
RenderFocused
=
"{TemplateBinding IsKeyboardFocusWithin}"
RenderActive
=
"{TemplateBinding IsMouseOver}"
RenderEnabled
=
"{TemplateBinding IsEnabled}"
>
</
Telerik_Windows_Controls_Chromes:ButtonChrome
>
<
ContentControl
x:Name
=
"DropDownIcon"
Background
=
"White"
Foreground
=
"Black"
IsTabStop
=
"False"
>
<
ContentControl.Template
>
<
ControlTemplate
TargetType
=
"{x:Type ContentControl}"
>
<
Grid
>
<
Path
x:Name
=
"CalendarIconBackground"
Data
=
"M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
Height
=
"7"
Margin
=
"4,5,4,4"
Stroke
=
"{TemplateBinding Background}"
Width
=
"7"
/>
<
Path
x:Name
=
"CalendarIconForeground"
Data
=
"M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
Height
=
"7"
Margin
=
"4,4,4,5"
Stroke
=
"{TemplateBinding Foreground}"
Width
=
"7"
/>
</
Grid
>
</
ControlTemplate
>
</
ContentControl.Template
>
</
ContentControl
>
</
Grid
>
</
telerik:RadDropDownButton
>
<
Popup
x:Name
=
"PART_InputPopup"
AllowsTransparency
=
"True"
telerik:PopupExtensions.IsOpen
=
"{Binding IsTooltipOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
telerik:PopupExtensions.Owner
=
"{Binding RelativeSource={RelativeSource TemplatedParent}}"
Placement
=
"Top"
telerik:PopupExtensions.Placement
=
"Top"
telerik:PopupExtensions.PlacementTarget
=
"{Binding ElementName=PART_DateTimeInput}"
StaysOpen
=
"False"
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding TooltipTemplate}"
Content
=
"{TemplateBinding TooltipContent}"
/>
</
Popup
>
</
Grid
>
<
ControlTemplate.Triggers
>
<
MultiTrigger
>
<
MultiTrigger.Conditions
>
<
Condition
Property
=
"IsEnabled"
Value
=
"True"
/>
<
Condition
Property
=
"IsMouseOver"
Value
=
"True"
/>
</
MultiTrigger.Conditions
>
<
MultiTrigger.EnterActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0.115"
Value
=
"1"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
BeginStoryboard
>
</
MultiTrigger.EnterActions
>
<
MultiTrigger.ExitActions
>
<
BeginStoryboard
>
<
Storyboard
>
<
DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
LinearDoubleKeyFrame
KeyTime
=
"0:0:0.15"
Value
=
"0"
/>
</
DoubleAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"MouseOverVisual"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.15"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Collapsed</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
BeginStoryboard
>
</
MultiTrigger.ExitActions
>
<
Setter
Property
=
"Background"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource TextBackground}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource TextForeground}"
/>
</
MultiTrigger
>
<
Trigger
Property
=
"IsDropDownOpen"
Value
=
"True"
>
<
Setter
Property
=
"Background"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource TextBackground}"
/>
<
Setter
Property
=
"Foreground"
TargetName
=
"DropDownIcon"
Value
=
"{DynamicResource TextForeground}"
/>
</
Trigger
>
<
Trigger
Property
=
"IsEnabled"
Value
=
"False"
>
<
Setter
Property
=
"Background"
Value
=
"{DynamicResource UnfocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{DynamicResource UnfocusedForeground}"
/>
<
Setter
Property
=
"Opacity"
TargetName
=
"MouseOverVisual"
Value
=
"0"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"MouseOverVisual"
Value
=
"Collapsed"
/>
</
Trigger
>
<
Trigger
Property
=
"IsKeyboardFocusWithin"
Value
=
"True"
>
<
Setter
Property
=
"Background"
Value
=
"{DynamicResource FocusedBackground}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{DynamicResource FocusedForeground}"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"FocusVisual"
Value
=
"Visible"
/>
</
Trigger
>
<
Trigger
Property
=
"InputMode"
Value
=
"DatePicker"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"PART_Clock"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"CloseButtonContainer"
Value
=
"Collapsed"
/>
</
Trigger
>
<
Trigger
Property
=
"InputMode"
Value
=
"TimePicker"
>
<
Setter
Property
=
"Visibility"
TargetName
=
"PART_Calendar"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"Visibility"
TargetName
=
"CloseButtonContainer"
Value
=
"Collapsed"
/>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
As you can see, I added a trigger on the IsKeyboardFocusWithin property that sets the focused colors for the control. And I added setters that set the unfocused colors for the control as the default.
This was a tough one. I had the trigger to set the focused colors working 3 weeks ago, but the complexity of the control's template threw me off. It turns out that what I was missing all this time was the setters to set the unfocused colors as the defaults. Once I added that, it all worked fine.
Tony