Change FontSize of Windows.UI.Xaml.Controls.DatePicker popup in xamarin forms

Question

I have a custom renderer in my xamarin forms project to edit the styles of the DatePicker for UWP. I've fixed a sizing issue and now im just trying to edit the fontsize of the text in the datePicker popup when you click the datepicker to update the date. This is what i'm meaning:

I currently have the following custom renderer code to change the mid width and fontsize for the base datePicker entry control so it looks like

This is the renderer code:

class MyDatePickerRenderer : DatePickerRenderer
{
    #region Parent override
    protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null || Element == null)
            return;

        if (Control != null)
        {
            Control.MinWidth = 150;                                
        }

        if (Element != null)
        {                
            Element.FontSize = 12;                     
        }
    }
    #endregion
}

Any ideas on how to change the fontsize of datePicker popup?

Answer 1

For changing the font size of popup view, you could refer this case. The control of popup view is LoopingSelector. And the default font size is 15 in LoopingSelector style like the following.

<Style TargetType="LoopingSelector">
    <Setter Property="ShouldLoop" Value="True" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel VerticalAlignment="Center">
                    <TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" FontSize="15" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Control">
                <Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DownButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <ScrollViewer x:Name="ScrollViewer"
                VerticalSnapPointsType="Mandatory"
                VerticalSnapPointsAlignment="Near"
                VerticalScrollBarVisibility="Hidden"
                HorizontalScrollMode="Disabled"
                ZoomMode="Disabled"
                Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
                    <RepeatButton x:Name="UpButton"
                Content="&#xE70E;"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                FontSize="8"
                Height="22"
                Padding="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Top"
                Visibility="Collapsed"
                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                Background="{ThemeResource LoopingSelectorButtonBackground}"
                IsTabStop="False" />
                    <RepeatButton x:Name="DownButton"
                Content="&#xE70D;"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                FontSize="8"
                Height="22"
                Padding="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Bottom"
                Visibility="Collapsed"
                Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
                Background="{ThemeResource LoopingSelectorButtonBackground}"
                IsTabStop="False" />

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

If you want to change it. you just modify the following font size to another value. Then place complete style in <Application.Resources> in the App.xaml file where in xamarin uwp project.

<TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" FontSize="20" />