Change FontSize for DateTimePicker

4 posts, 0 answers
  1. Lana
    Lana avatar
    13 posts
    Member since:
    Jul 2010

    Posted 17 Jan 2012 Link to this post

    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.


  2. Dani
    Dani avatar
    848 posts

    Posted 18 Jan 2012 Link to this post

    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,
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Lukasz
    Lukasz avatar
    1 posts
    Member since:
    Apr 2011

    Posted 02 Nov 2012 Link to this post


    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?
  4. Masha
    Masha avatar
    355 posts

    Posted 07 Nov 2012 Link to this post

    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 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"/>
                <Style x:Key="CustomRadClockItemStyle" TargetType="telerikInput:RadClockItem" BasedOn="{StaticResource RadClockItemStyle}">
                    <Setter Property="FontSize" Value="20"/>
                    <Setter Property="FontFamily" Value="Segoe UI"/>
                <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 x:Key="CustomCalendarViewStyle" TargetType="calendar:CalendarView" BasedOn="{StaticResource CalendarViewStyle}">
                    <Setter Property="FontSize" Value="20"/>
                <Style x:Key="CustomCalendarButtonStyle" TargetType="calendar:CalendarButton" BasedOn="{StaticResource CalendarButtonStyle}">
                    <Setter Property="FontSize" Value="20"/>
                <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 x:Key="CustomMediumDateTimeStyle" TargetType="telerik:RadDateTimePicker" BasedOn="{StaticResource RadDateTimePickerStyle}">
                    <Setter Property="FontSize" Value="20"/>
                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,
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top