Force UWP DatePicker to stretch to full container width

Question

I have a DatePicker with HorizontalAlignment set to Stretch, but it only stretches to a certain maximimum width (unlike the blue bar for instance).

I would like to either have the DatePicker's three segments or the middle one stretch proportionally to an arbitrary length.

How can I do this?

Answer 1

The DatePicker has a Button named "FlyoutButton" which limits the MaxWidth of the control itself. You can find it in the Generic.xaml.

So, widening the MaxWidth should work:

<DatePicker
    HorizontalAlignment="Stretch"
    Loaded="DatePickerControl_Loaded">

private void DatePickerControl_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    if ((sender as DatePicker)?
        .FindDescendant<Button>(x => x.Name is "FlyoutButton") is not Button flyoutButton)
    {
        return;
    }

    flyoutButton.MaxWidth = double.PositiveInfinity;
}

BTW, the FindDescendant extension method comes from the CommunityToolkit.WinUI.Extensions NuGet package.