Change FontSize for DateTimePicker

[Lana]

I was wondering if it was possible to change the FontSize of the RadDateTimePicker?  I am setting my fontsize="16" in my .xaml and in the designer it changes to look correct, but as soon as I build and run the font size is set back to a smaller font. 

<telerik:RadDateTimePicker x:Name="cboCalendar" FontSize="16" Style="{StaticResource CalendarInput}" InputMode="DatePicker" Local:Tracker.Property="SelectedDate" VerticalAlignment="Center" Width="425" Height="28" BorderBrush="#FF8C9FAD" />

Any help you could give me would be greatly appreciated.

Thanks,
Lana

[Dani]

Hello Lana,

You should be able to change font size of RadDateTimePicker control with no problem. I tested the case and font size works just as expected.

Maybe the CalendarInput style you are using is the reason in your case. Or any other styling you might have applied to the control.


All the best,
Dani
the Telerik team

[Lukasz]

Hi,

I get the same behavior on my application. No matter what I do the date picker font is always the same size. You can see the font size change reflected inside visual studio but not while the application is running. I have checked and it is because of the windows 8 theme. Is there somewhere I can modify the theme so that the size is reflected based on the local size and not the theme size?

[Masha]

Hi Lukasz,

The Windows8 Theme uses explicitly set FontFamily and FontSize properties for all controls.

One possible approach is to use Implicit Styles. This way you can change font size for the most part of the drop-down content and most importantly, it is a lot shorter.

The next code snippets show how to achieve the described approach using Implicit Styles:
In the xalm:

<ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="CustomRadClockItemStyle" TargetType="telerikInput:RadClockItem" BasedOn="{StaticResource RadClockItemStyle}">
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="FontFamily" Value="Segoe UI"/>
            </Style>

            <Style x:Key="CustomClockStyle" TargetType="telerikInput:RadClock" BasedOn="{StaticResource RadClockStyle}">
                <Setter Property="ItemContainerStyle" Value="{StaticResource CustomRadClockItemStyle}"/>
                <Setter Property="FontFamily" Value="Segoe UI"/>
                <Setter Property="FontSize" Value="20"/>
            </Style>

            <Style x:Key="CustomCalendarViewStyle" TargetType="calendar:CalendarView" BasedOn="{StaticResource CalendarViewStyle}">
                <Setter Property="FontSize" Value="20"/>
            </Style>
            <Style x:Key="CustomCalendarButtonStyle" TargetType="calendar:CalendarButton" BasedOn="{StaticResource CalendarButtonStyle}">
                <Setter Property="FontSize" Value="20"/>
            </Style>

            <Style x:Key="CustomCalendarStyle" TargetType="telerikInput:RadCalendar" BasedOn="{StaticResource RadCalendarStyle}">
                <Setter Property="AreWeekNumbersVisible" Value="False"/>
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="MonthViewStyle" Value="{StaticResource CustomCalendarViewStyle}"/>
                <Setter Property="YearViewStyle" Value="{StaticResource CustomCalendarViewStyle}"/>
                <Setter Property="DecadeViewStyle" Value="{StaticResource CustomCalendarViewStyle}"/>
                <Setter Property="CenturyViewStyle" Value="{StaticResource CustomCalendarViewStyle}"/>
                <Setter Property="DayButtonStyle" Value="{StaticResource CustomCalendarButtonStyle}"/>
                <Setter Property="MonthButtonStyle" Value="{StaticResource CustomCalendarButtonStyle}"/>
                <Setter Property="YearButtonStyle" Value="{StaticResource CustomCalendarButtonStyle}"/>
                <Setter Property="DecadeButtonStyle" Value="{StaticResource CustomCalendarButtonStyle}"/>
            </Style>

            <Style x:Key="CustomMediumDateTimeStyle" TargetType="telerik:RadDateTimePicker" BasedOn="{StaticResource RadDateTimePickerStyle}">
                <Setter Property="FontSize" Value="20"/>
            </Style>

<telerik:RadDateTimePicker
            x:Name="MyDateTimePicker" VerticalAlignment="Top" HorizontalAlignment="Left" Width="200" Margin="30"
            CalendarStyle="{StaticResource CustomCalendarStyle}"
            ClockStyle="{StaticResource CustomClockStyle}"
            Style="{StaticResource CustomMediumDateTimeStyle}" />

The second and the more common thing you can do, is to take all styles and resources for the Windows8 theme and modify the font size manually. You will find the resources in the RadControls installation folder on your machine, and then in the subfolder Themes. You can drill down to the DateTimePicker.xaml file that corresponds to the Windows8 theme and copy the resources from this resource dictionary.

Hope this helps.

Kind regards,
Maria
the Telerik team