Proposal: Update design of DatePicker and TimePicker controls

[anawishnoff]

Proposal: Update design of DatePicker and TimePicker controls

Summary

I'm proposing design changes to the DatePicker and TimePicker controls. These changes are mostly based around rounding the visuals seen in Date/TimePicker, in both rest and non-rest states. Some work has already been done to update the colors and shapes within Date/TimePicker, but this proposes work that will finish the job and align the design of this control with the new designs proposed for ListView.

Rationale

• Many controls in WinUI have rounded corners, so Date/TimePicker items should follow that trend and embrace the modern, Fluent look.

Scope

Capability	Priority
The horizontal "selection bar" in Date/TimePicker should have rounded corners, and sufficient padding from the edge of the control.	Must
Hovered items should have a grey rounded backplate, similar to the proposed hover state for ListView items.	Must
When any of the action glyphs are hovered (check, x, scroll buttons) they should have a rounded grey backplate, similar to list items.	Must
Date/TimePicker should have smooth entrance and exit animations that match those of other updated controls such as CommandBarFlyout and MenuFlyout.	Must
These changes will not affect the functionality of Date/TimePicker.	Won't

Important Notes

Design Mockups

Below: Old and new versions of DatePicker.

Below: Old and new versions of TimePicker.

Below: A close-up showing the rounded backplate on the buttons.

[mdtauk]

Will the 40px highlighted size change to 32px to match the height of the picker before the flyout renders?

[anawishnoff]

@mdtauk Yes, the selection rectangle would have a height of 32px.

[mdtauk]

Will it also be possible to improve the entrance and exit animation of the Flyouts for Date and Time Picker? The MenuFlyout and the CommandBarFlyout have nice smooth flowing animations, but Date and Time Picker just appears on screen.

Back in the Windows 8 days, these controls animated up and down from the Button/Form control you click on to show the flyout.

[nc-x]

My laptop (unfortunately) does not have a nice display, because of which the backplate / highlight is pretty much invisible to me. Same issue in #4304 and #4305. They need better contrast, otherwise the applications using WinUI will be unusable for a lot of people.

[anawishnoff]

@nc-x Thanks for pointing that out - I'll look into this!

@mdtauk Another great point. I agree that Date/TimePicker should match the nice entrance and exit animations of other more updated controls. I'm going to add that to my proposal above - thanks!

[jordan-msftfan]

Is this proposal has already been done on #4460?