
Steve Chadbourne
Top achievements
Rank 1
Steve Chadbourne
asked on 28 Nov 2011, 06:50 AM
Hi
I have managed to change most of the appearance of the date time picker to fit in with my application by using a modified metro theme.
The only thing that I can't seem to do is change the font size.
Is there an easy way to do this?
I really don't want to have to generate a huge style file using blend - I don't have Blend for starters and I have downloaded an example date time style and it's huge. I just don't have the time to pick through it. I just want to increase the font size.
Any ideas?
Cheers
Steve
I have managed to change most of the appearance of the date time picker to fit in with my application by using a modified metro theme.
The only thing that I can't seem to do is change the font size.
Is there an easy way to do this?
I really don't want to have to generate a huge style file using blend - I don't have Blend for starters and I have downloaded an example date time style and it's huge. I just don't have the time to pick through it. I just want to increase the font size.
Any ideas?
Cheers
Steve
13 Answers, 1 is accepted
0
Hi Steve,
The approach to set a specific FontSize different than the default is trivial. You can either set it directly via the FontSize attached property:
Or you can create a simple explicit style:
I hope this helps.
Kind regards,
Dani
the Telerik team
The approach to set a specific FontSize different than the default is trivial. You can either set it directly via the FontSize attached property:
<
telerik:RadDateTimePicker
VerticalAlignment
=
"Top"
HorizontalAlignment
=
"Left"
Width
=
"200"
FontSize
=
"20"
Margin
=
"30"
/>
Or you can create a simple explicit style:
<
Window.Resources
>
<
Style
x:Key
=
"RadDateTimePickerStyle1"
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
>
<
Setter
Property
=
"FontSize"
Value
=
"20"
/>
</
Style
>
</
Window.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
telerik:RadDateTimePicker
VerticalAlignment
=
"Top"
HorizontalAlignment
=
"Left"
Width
=
"200"
Margin
=
"30"
Style
=
"{DynamicResource RadDateTimePickerStyle1}"
/>
</
Grid
>
I hope this helps.
Kind regards,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:03 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:04 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:04 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:04 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:06 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:07 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:08 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:11 AM
Hi Dani
I tried setting the FontSize both directly and through a style.
This is my XAML
and this is my Style:
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
I tried setting the FontSize both directly and through a style.
This is my XAML
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
Height
=
"45"
BorderBrush
=
"Transparent"
FontSize
=
"40"
/>
and this is my Style:
<
Style
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type Controls:RadDateTimePicker}"
>
<
Setter
Property
=
"CalendarStyle"
Value
=
"{DynamicResource CalendarStyle}"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"Controls:RadCalendar"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
</
Style
>
I have attached a screenshot. The Close button at the bottom looks like it has taken the font size but the control itself has not changed size.
Cheers
Steve
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:16 AM
Hi Dani
Any chance you can delete the duplicate answers? I kept getting an server error so kept re-trying.
Cheers
Steve
Any chance you can delete the duplicate answers? I kept getting an server error so kept re-trying.
Cheers
Steve
0
Hi Steve,
I am sorry, I did not quite realise you were using the Metro theme. The Metro theme is typographically different than other themes. It uses explicitly set Fontfamily and FontSize properties for all controls.
One possible approach is to use the following mark-up. It will result in changing font size for the most part of the drop-down content and most importantly, it is short. Please, note that you will still not have enlarged font size for the calendar header and week days.
The second and the more common thing you can do, is to take all styles and resources for the metro theme and modify the font size manually. You will find the resources in the RadControls installation folder on your machine, then Themes folder. You can drill down to the DateTimePicker.xaml file that corresponds to the Metro theme and copy the resources from this resource dictionary.
I hope this will be helpful.
Regards,
Dani
the Telerik team
I am sorry, I did not quite realise you were using the Metro theme. The Metro theme is typographically different than other themes. It uses explicitly set Fontfamily and FontSize properties for all controls.
One possible approach is to use the following mark-up. It will result in changing font size for the most part of the drop-down content and most importantly, it is short. Please, note that you will still not have enlarged font size for the calendar header and week days.
<
Window.Resources
>
<
Style
x:Key
=
"RadClockItemStyle"
TargetType
=
"telerik:RadClockItem"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=telerik:RadClockItem}}"
>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"Segoe UI"
/>
</
Style
>
<
Style
x:Key
=
"ClockStyle"
TargetType
=
"telerik:RadClock"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=telerik:RadClock}}"
>
<
Setter
Property
=
"ItemContainerStyle"
Value
=
"{StaticResource RadClockItemStyle}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"Segoe UI"
/>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
<
Setter
Property
=
"SnapsToDevicePixels"
Value
=
"True"
/>
</
Style
>
<
Style
x:Key
=
"CalendarViewStyle"
TargetType
=
"input:CalendarView"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=input:CalendarView}}"
>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
</
Style
>
<
Style
x:Key
=
"CalendarButtonStyle"
TargetType
=
"input:CalendarButton"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=input:CalendarButton}}"
>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
</
Style
>
<
Style
x:Key
=
"CalendarStyle"
TargetType
=
"telerik:RadCalendar"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=telerik:RadCalendar}}"
>
<
Setter
Property
=
"AreWeekNumbersVisible"
Value
=
"False"
/>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
<
Setter
Property
=
"MonthViewStyle"
Value
=
"{StaticResource CalendarViewStyle}"
/>
<
Setter
Property
=
"YearViewStyle"
Value
=
"{StaticResource CalendarViewStyle}"
/>
<
Setter
Property
=
"DecadeViewStyle"
Value
=
"{StaticResource CalendarViewStyle}"
/>
<
Setter
Property
=
"CenturyViewStyle"
Value
=
"{StaticResource CalendarViewStyle}"
/>
<
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
x:Key
=
"MediumDateTimeStyle"
TargetType
=
"{x:Type telerik:RadDateTimePicker}"
BasedOn
=
"{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:MetroTheme, ElementType=telerik:RadDateTimePicker}}"
>
<
Setter
Property
=
"FontSize"
Value
=
"40"
/>
</
Style
>
</
Window.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
telerik:RadDateTimePicker
x:Name
=
"KernDateTimePicker"
VerticalAlignment
=
"Top"
HorizontalAlignment
=
"Left"
Width
=
"200"
Margin
=
"30"
CalendarStyle
=
"{StaticResource CalendarStyle}"
ClockStyle
=
"{StaticResource ClockStyle}"
Style
=
"{StaticResource MediumDateTimeStyle}"
InputMode
=
"DateTimePicker"
/>
</
Grid
>
The second and the more common thing you can do, is to take all styles and resources for the metro theme and modify the font size manually. You will find the resources in the RadControls installation folder on your machine, then Themes folder. You can drill down to the DateTimePicker.xaml file that corresponds to the Metro theme and copy the resources from this resource dictionary.
I hope this will be helpful.
Regards,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0

Steve Chadbourne
Top achievements
Rank 1
answered on 28 Nov 2011, 10:15 PM
Hi Dani
What are the steps involved in changing the Metro DateTimePicker resources? I have found the file in the install folder but now what? Where do I copy it to? How do I best include it in my project? How do I tell the Metro theme to use this rather than its default styles/resources?
Cheers
Steve
What are the steps involved in changing the Metro DateTimePicker resources? I have found the file in the install folder but now what? Where do I copy it to? How do I best include it in my project? How do I tell the Metro theme to use this rather than its default styles/resources?
Cheers
Steve
0
Hello Steve,
The resources should be placed in your project - in App.xaml or in the Resources of whichever Window holds your RadDateTimePicker.
After updating any needed namespace references, you should be able to apply the RadDateTimePicker style to your instance of RadDateTimePicker. Then, you are free to apply fontsize changes.
Attached you can find an illustrative sample. I hope it helps.
Greetings,
Dani
the Telerik team
The resources should be placed in your project - in App.xaml or in the Resources of whichever Window holds your RadDateTimePicker.
After updating any needed namespace references, you should be able to apply the RadDateTimePicker style to your instance of RadDateTimePicker. Then, you are free to apply fontsize changes.
Attached you can find an illustrative sample. I hope it helps.
Greetings,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>