Is there a way to customize the date picker flyout in win ui 3?

Question

I want to change the colour of the selection element (the blue bar indicating the current date selection) to #020066 and change the fontfamily of the flyout.

I've tried using the theme resources for date picker flyout presenter provided in github but it isn't doing anything.

I haven't really used anything UWP related before so I don't know if I'm missing something. Or is that UI Element uneditable?

Edit:

I found a way to change the font of the datepicker and the color using the app.xaml file.

You override the contentcontroltheme and the datepickerhighlightfill properties like this:

<SolidColorBrush x:Key="DatePickerFlyoutPresenterHighlightFill" Color="#020066"/>
<FontFamily x:Key="ContentControlThemeFontFamily">/Assets/Fonts/Righteous Regular.ttf/#Righteous</FontFamily>

I hope this helps.

Answer 1

This flyout is a DatePickerFlyoutPresenter and from the generic.xaml, you can learn that this is a Grid named HighlightRect.

To change the Background of the HighlightRect:

public MainPage()
{
    this.InitializeComponent();
    this.DatePickerControl.LayoutUpdated += DatePickerControl_LayoutUpdated;
}

private void DatePickerControl_LayoutUpdated(object? sender, object e)
{
    if (VisualTreeHelper
        .GetOpenPopupsForXamlRoot(this.XamlRoot)
        .FirstOrDefault() is Popup popup &&
        popup.Child.FindDescendant<Grid>(x => x.Name is "HighlightRect") is Grid highlightRect &&
        popup.Child.FindDescendants().OfType<LoopingSelector>() is IEnumerable<LoopingSelector> loopingSelectors)
    {
        highlightRect.Background = new SolidColorBrush(Colors.LightGreen);

        foreach (LoopingSelector loopingSelector in loopingSelectors)
        {
            loopingSelector.FontSize = 20;
        }
    }
}

NOTE:

FindDescendant comes from the CommunityToolkit.WinUI.Extensions NuGet package.