How to easily change font size

[Steve Chadbourne]

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

[Dani]

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:

<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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

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

[Steve Chadbourne]

Hi Dani

Any chance you can delete the duplicate answers? I kept getting an server error so kept re-trying.

Cheers

Steve

[Dani]

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.

<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

[Steve Chadbourne]

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

[Dani]

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