How to easily change font size

14 posts, 0 answers
  1. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 28 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  5. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  6. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  7. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  8. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  9. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  10. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  11. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  12. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    Hi Dani

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

    Cheers

    Steve
  13. Dani
    Admin
    Dani avatar
    848 posts

    Posted 28 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  14. Steve Chadbourne
    Steve Chadbourne avatar
    23 posts
    Member since:
    Nov 2009

    Posted 28 Nov 2011 Link to this post

    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
  15. Dani
    Admin
    Dani avatar
    848 posts

    Posted 29 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready