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

Change FontSize for DateTimePicker

3 Answers 194 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Lana
Top achievements
Rank 1
Lana asked on 17 Jan 2012, 06:12 PM
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

3 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 18 Jan 2012, 08:31 AM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Lukasz
Top achievements
Rank 1
answered on 02 Nov 2012, 07:16 PM
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?
0
Masha
Telerik team
answered on 07 Nov 2012, 09:55 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
DateTimePicker
Asked by
Lana
Top achievements
Rank 1
Answers by
Dani
Telerik team
Lukasz
Top achievements
Rank 1
Masha
Telerik team
Share this question
or