WinUI 3/WASDK 1.3 How do I shorten the width of the month on a DatePicker control?

Question

DatePicker

I am trying to see what I could use here: https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/DatePicker_themeresources.xaml But it just confuses me. Thanks in advance!

Answer 1

You can try it this way.

MainPage.xaml

<DatePicker x:Name="DatePickerControl" />

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.DatePickerControl.LayoutUpdated += DatePickerControl_LayoutUpdated;
    }

    private void DatePickerControl_LayoutUpdated(object? sender, object e)
    {
        double monthControlWidth = 70;

        if (this.DatePickerControl.FindDescendant<Grid>(x => x.Name is "FlyoutButtonContentGrid") is Grid flyoutButtonContentGrid &&
            flyoutButtonContentGrid.ColumnDefinitions.Count > 0)
        {
            flyoutButtonContentGrid.ColumnDefinitions[0].Width = new GridLength(monthControlWidth, GridUnitType.Star);
        }

        if (VisualTreeHelper.GetOpenPopupsForXamlRoot(this.DatePickerControl.XamlRoot)
            .FirstOrDefault() is Popup popup &&
            popup.Child is DatePickerFlyoutPresenter datePickerFlyoutPresenter &&
            datePickerFlyoutPresenter.FindDescendant<Grid>(x => x.Name is "PickerHostGrid") is Grid pickerHostGrid &&
            pickerHostGrid.ColumnDefinitions.Count > 0)
        {
            pickerHostGrid.ColumnDefinitions[0].Width = new GridLength(monthControlWidth, GridUnitType.Star);
        }
    }
}

You can find the names of each element in the generic.xaml.