Issue changing the drop down color scheme

[Tony]

My WPF application runs on computers installed in police cars.  As such, it needs to have a "night mode" that has more subdued colors that don't hurt the officer's eyes in the dark.

My application has a search screen which contains a couple of RadDateTimePicker controls.  I've made a copy of the default template for the RadCalendar control that is contained in the RadDateTimePicker control's drop down area and I've been changing the XAML so it uses dynamic resource brushes defined in merged dictionaries.  The switch to night mode and back to day mode is used by changing the merged dictionary to one that has other brushes with the same names but different colors.

My problem is in the CalendarButton controls that make up the calendar.  They contain a Telerik ButtonChrome control which does not have any color properties.  When I open my application and use Snoop to look at the drop down after opening it, I can see that the ButtonChrome control contains a grid that contains a number of Border controls in it.  Those Border controls are not in the XAML; they must be created by the ButtonChrome.

The problem is that the colors used by the ButtonChrome don't work with my color scheme.  I have to use a dark background with lighter colors in the foreground for night mode.  The colors in that ButtonChrome are just the opposite.  There's no obvious way using XAML that I can change the colors used by the ButtonChrome.

Is there any way I can change the colors used without having to write my own ButtonChrome class?

I am using RadControls for WPF version 2013.1.220.45.

[Tony]

Hello?  Is there anyone paying attention in this forum?

[Vladi]

Hi,

In order to customize the CalendarButtons Background and Foreground you will need to customize the DayButtonStyle through the CalendarStyle and set the Foreground and Background properties to the desired brushes. Note that depending on the theme you are using you may need to customize the MonthViewStyle's Template of the RadCalendarStyle in order to change the hole Background color of the Calendar in the DateTimePicker.

Also by customizing the ClockStyle you can set the Foreground and Background of the clock in the control.

The next code snippet shows the described approach using Implicit Styles:

<Window.Resources>
    <Style x:Key="CalendarButtonStyle" TargetType="calendar:CalendarButton" BasedOn="{StaticResource CalendarButtonStyle}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Black"/>
    </Style>

    <Style x:Key="RadCalendarStyle" TargetType="telerik:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}">
        <Setter Property="DayButtonStyle" Value="{StaticResource CalendarButtonStyle}" />
        <Setter Property="MonthButtonStyle" Value="{StaticResource CalendarButtonStyle}" />
        <Setter Property="YearButtonStyle" Value="{StaticResource CalendarButtonStyle}" />
        <Setter Property="DecadeButtonStyle" Value="{StaticResource CalendarButtonStyle}" />
    </Style>

    <Style TargetType="telerik:RadClock" x:Key="RadClockStyle" BasedOn="{StaticResource RadClockStyle}">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Black"/>
    </Style>
</Window.Resources>
<Grid>
    <telerik:RadDateTimePicker CalendarStyle="{StaticResource RadCalendarStyle}"
                                ClockStyle="{StaticResource RadClockStyle}"/>
</Grid>

Hope this is helpful.

Regards,
Vladi
the Telerik team

[Tony]

Vladi:

Thanks for the reply, however, it's not exactly what I'm looking for.  I think the problem was that I wasn't clear enough in my question.

The problem isn't that I can't get the foreground and background colors right, it's that I can't get the colors used while the mouse is hovering over the button, or when the button for a particular day is selected to appear correctly.  The ButtonChrome named "Selection" uses only the default background color, which is OK for my daytime color scheme, but not for my night time scheme.  What happens is the foreground color in night mode is Yellow, which doesn't have enough contrast for the linear gradient brush that's used as the background.

I need to change the background color for when the mouse is hovering over a particular day, or when a particular day is selected, so it is black.

I have two resource dictionaries, one called DayTime.xaml and the other NightTime.xaml.  In both of these dictionaries are resources named CalendarSelectedBackground, CalendarSelectedBorder, and CalendarSelectedForeground.  I want the ButtonChrome in the DayButton style to use these brushes when selected or hovered over.

How do I get the CalendarButton to use these brushes?

[Vladi]

Hello,

You can do this very easily in Expression Blend. Just drop a DateTimePicker control into the design surface, right-click it and choose from the menu:

• Edit Additional Templates -> Edit CalendarStyle -> Edit a Copy.
• Then go to Object-> Edit Additional Styles -> Edit CalendarStyle
• Then again Object-> Edit Additional Styles -> Edit DayButtonStyle -> Edit a Copy.

Blend will generate all the needed resources, so you will be able to customize the buttons to fit your requirements.

You might also need to edit the SelectionChrome element, which is represented from a ButtonChrome control. You can also find more information in this KB article about how to customize the ButtonChrome.

Kind regards,
Vladi
the Telerik team

[Tony]

Vladi:

Thanks, using the information you provided, I was able to get everything working the way I needed it to.

Tony