Need help styling my RadDateTimePicker controls

7 posts, 0 answers
  1. Tony
    Tony avatar
    111 posts
    Member since:
    May 2011

    Posted 28 Mar 2012 Link to this post

    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
  2. Tony
    Tony avatar
    111 posts
    Member since:
    May 2011

    Posted 02 Apr 2012 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Tony
    Tony avatar
    111 posts
    Member since:
    May 2011

    Posted 03 Apr 2012 Link to this post

    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
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 04 Apr 2012 Link to this post

    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 >>
  6. Tony
    Tony avatar
    111 posts
    Member since:
    May 2011

    Posted 04 Apr 2012 Link to this post

    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
  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 10 Apr 2012 Link to this post

    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 >>
  8. Tony
    Tony avatar
    111 posts
    Member since:
    May 2011

    Posted 10 Apr 2012 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready