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

Need help styling my RadDateTimePicker controls

6 Answers 460 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 28 Mar 2012, 09:00 PM
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:

<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>
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

6 Answers, 1 is accepted

Sort by
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.
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:

<UserControl x:Class="CarSystem.CustomControls.Searcher"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             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
Dani
Telerik team
answered on 04 Apr 2012, 08:38 AM
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
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
0
Dani
Telerik team
answered on 10 Apr 2012, 02:29 PM
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
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.

<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
Tags
DateTimePicker
Asked by
Tony
Top achievements
Rank 1
Answers by
Tony
Top achievements
Rank 1
Dani
Telerik team
Share this question
or