How to increase the font size of the date that is selected on a CalendarDatePicker

Question

I have a CalendarDatePicker control on my UWP app. I am not able to increase the size of the font of the date that is selected using the FontSize attribute.

How can I easily do this without overriding a lot of styles?

Here is the basic code I have:

<Page
    x:Class="CalendarPickerExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CalendarPickerExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <CalendarDatePicker FontSize="30" />
    </Grid>

</Page>

No matter what size I set the FontSize attribute on the CalendarDatePicker, the size of the font of the selected date does not increase.

Please help!

Answer 1

You can check the properties of the control using Live Visual Tree tool, in your case you want to change the size of the internal TextBlock:

You can modify the TextBlock font size in a copy of the default style https://msdn.microsoft.com/en-us/library/windows/apps/mt299110.aspx

As you can see, it is hardcoded to 15 in the default template:

<TextBlock x:Name="DateText"
                   HorizontalAlignment="Left"
                   Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                   Text="{TemplateBinding PlaceholderText}"
                   Grid.Row="1"
                   FontSize="15"
                   Padding="12, 0, 0, 2"
                   VerticalAlignment="Center" />

Answer 2

You can use the Visual Tree Extensions from the UWP Community Toolkit to grab the textbox control by name or type and modify its FontSize property:

 <CalendarDatePicker x:Name="Calender"/>

-

 Calender.FindDescendantByName("DateText").FontSize = 30;