microsoft / microsoft/microsoft-ui-xaml

TimePicker and DatePicker should honor explicit Width and Height on their visible selector controls

Open
#11,737 0 comments 0 reactions 0 assignees View on GitHub
area-DateTimePickers needs-triage
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

### Problem

`TimePicker`, `DatePicker`, and `CalendarDatePicker` do not fully honor explicit `Width` and `Height` values on their visible, closed selector control.

The outer `FrameworkElement` accepts the requested dimensions, but the default templates keep sizing the inner selector button from fixed theme resources and intrinsic content. This makes the controls difficult to place side by side and can cause clipping or overflow when a compact size is requested.

### Minimal repro

```xml

```

The same behavior is relevant to `CalendarDatePicker` when it is constrained to a compact explicit size.

### Current template details

The current WinUI templates define fixed selector sizing resources and apply them to the inner `FlyoutButton`:

- [`TimePicker_themeresources.xaml`](https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/main/controls/dev/CommonStyles/TimePicker_themeresources.xaml) defines `TimePickerThemeMinWidth` as `242` and `TimePickerThemeMaxWidth` as `456`.
- [`DatePicker_themeresources.xaml`](https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/main/controls/dev/CommonStyles/DatePicker_themeresources.xaml) defines `DatePickerThemeMinWidth` as `296` and `DatePickerThemeMaxWidth` as `456`.
- Both templates apply the fixed minimum/maximum to the internal selector button instead of deriving the closed selector dimensions from the parent control's explicit layout constraints.

### Expected behavior

When the caller explicitly sets `Width` and/or `Height`:

1. The closed selector control should render at the requested size, subject to normal content/layout constraints.
2. The internal hour/minute/period or day/month/year columns should resize with the selector instead of retaining a larger fixed minimum.
3. The requested height should size the closed selector button predictably, including correct handling of `Header`.
4. When `Width` and `Height` are not explicitly set, the existing comfortable default dimensions should remain unchanged.
5. The flyout/presenter may retain an independent minimum width if needed for usable picker columns; the closed control and flyout should not be forced to share the same minimum.

### Related issues

- #8950 — Inconsistent control height and spacing between the control and its `Header` for `TimePicker` and `CalendarDatePicker`
- #6709 — DatePicker MaxWidth

### Environment

Observed with WinUI 3 / `Microsoft.ui.xaml.dll` 3.2.1 on Windows 11. The issue also appears directly attributable to the current WinUI control templates and should be reproducible in a minimal WinUI 3 XAML app.

Contributor guide

Open the contributing guide

Research direction

Start with TimePicker_themeresources.xaml and DatePicker_themeresources.xaml, then reproduce the minimal WinUI 3 XAML example with explicit Width, Height, and Header values. Check the closed selector sizing for TimePicker, DatePicker, and CalendarDatePicker while preserving comfortable defaults and allowing the flyout to keep an independent minimum width. Done means explicit dimensions are honored without clipping or overflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.