DatePicker and TimePicker flyout visual updates #3947

jevansaks · 2021-01-14T19:44:19Z

We want to keep the accent color background for the selection bar but in order to have good contrast we need to change the foreground color of the text that's in the selection bar. There is already a resource we could theoretically override (LoopingSelectorItemForegroundSelected), but that color is only swapped in when the wheels come to rest so while scrolling it doesn't look particularly good.

So I went with a composition-based approach. There is an API to render part of the tree to a composition surface and we can use that in an effect. What I'm doing here is taking the PickerHostGrid and feeding it through CompositionVisualSurface and then into a ColorMatrixEffect. This way I can take the alpha channels of what's in the PickerHostGrid and replace the RGB channels with something else. This lets us do a color swap dynamically even during the scrolling, which gets a really smooth looking "x-ray" kind of effect.

Here it is in action:

mdtauk · 2021-01-14T20:01:51Z

Can I make a couple of suggestions. The Picker box itself is 32px high, but the selected shape is 40px high.
TimePickerFlyoutPresenterHighlightHeight

@chigy has said that it will need WinUI 3.0 before this control can be updated to work with compact sizing, but is it possible to tweak the selected area to match the picker height?

If not, is it possible to adjust the reveal transition, so the selected shape animates from 32px to 40px, to make it seem smoother?

Do these use Acrylic like other flyouts?

Once WinUI 3.0 is out, will consideration be made for #918 #905

Also is there anything to be learned or added to the default controls, from the new Alarms & Clock UI?

…pickerhighlightrect

jevansaks · 2021-01-14T21:45:24Z

/azp run

azure-pipelines · 2021-01-14T21:45:40Z

Azure Pipelines successfully started running 1 pipeline(s).

jevansaks · 2021-01-14T22:30:19Z

Can I make a couple of suggestions. The Picker box itself is 32px high, but the selected shape is 40px high.
TimePickerFlyoutPresenterHighlightHeight

Now that you point it out, it does look pretty odd to have the height jump. 32px selection rect feels a lot better to me too. @chigy says there may be a separate consistency pass being done for these kinds of sizing things by @anawishnoff .

Do these use Acrylic like other flyouts?

They are supposed to. Maybe something is drawing opaque over top or there's just not a very interesting background behind. I'll check.

mdtauk · 2021-01-14T22:36:24Z

Can I make a couple of suggestions. The Picker box itself is 32px high, but the selected shape is 40px high.
TimePickerFlyoutPresenterHighlightHeight

Now that you point it out, it does look pretty odd to have the height jump. 32px selection rect feels a lot better to me too. @chigy says there may be a separate consistency pass being done for these kinds of sizing things by @anawishnoff .

The TimePickerFlyoutPresenterItemHeight/DatePickerFlyoutPresenterItemHeight is 40px, a balance between the 32px mouse target, and 40/48px touch target.

But the TimePickerFlyoutPresenterHighlightHeight/DatePickerFlyoutPresenterHighlightHeight is visual only, so it can be smaller than the item height, and not affect the functionality.

Edit: In fact it may be a hold over from the change in control sizing back from 2018

Do these use Acrylic like other flyouts?

They are supposed to. Maybe something is drawing opaque over top or there's just not a very interesting background behind. I'll check.

In the Gif you posted, it looks almost white #fcfcfc without noise, but it could be the colour compression in creating the Gif.

jevansaks · 2021-01-14T23:21:00Z

In the Gif you posted, it looks almost white #fcfcfc without noise, but it could be the colour compression in creating the Gif.

It's because I was running in a VM where the acrylic logic forces it to opaque. If I override that then it is using acrylic, so we're good here.

mdtauk · 2021-01-14T23:22:18Z

In the Gif you posted, it looks almost white #fcfcfc without noise, but it could be the colour compression in creating the Gif.

It's because I was running in a VM where the acrylic logic forces it to opaque. If I override that then it is using acrylic, so we're good here.

Good to hear!

…pickerhighlightrect

jevansaks · 2021-01-20T22:25:50Z

/azp run

azure-pipelines · 2021-01-20T22:26:06Z

Azure Pipelines successfully started running 1 pipeline(s).

StephenLPeters · 2021-01-20T23:40:06Z

dev/DatePicker/DatePicker_themeresources.xaml

@@ -384,31 +388,35 @@
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
-                            <Grid x:Name="PickerHostGrid">
+                            <Grid>


Is the new grid needed? I think we could avoid it by setting column span on the HighlightRect to 5

HighlightRect needs to draw over the PickerGrid because it's actually drawing opaque content to obscure what the PickerGrid drew with the inverted colors.

Children draw over there parents and their older siblings though, right?

Yes but the Panels that host the children are conspicuously absent from the template because they are Append()-ed from code behind in the picker code. :( So no matter what in that single grid you can't draw over those panels from the template.

Yes but the Panels that host the children are conspicuously absent from the template because they are Append()-ed from code behind in the picker code. :( So no matter what in that single grid you can't draw over those panels from the template.

Is that something that could be changed with WinUI 3 or do you think it would very hard to change the behavior here? Having controls appending elements in their code behind does not sound ideal, especially for templated controls so it might be good to change this.

I saw mention of Acrylic Accent Colour brushes, could on of those be used for the selection rectangle?

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.idl

StephenLPeters · 2021-01-20T23:51:53Z

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.cpp

+            _effectFactory = nullptr;
+        }
+
+        auto compositor = winrt::Window::Current().Compositor();


compositor [](start = 13, length = 10)

nit: const

StephenLPeters · 2021-01-20T23:54:15Z

FeatureAreas.props

@@ -221,7 +221,10 @@
  <!-- Dependencies for ImageIcon -->
  <PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureImageIconEnabled) == 'true'">
  </PropertyGroup>
-    <!-- Dependencies for AnimatedIcon -->
+  <!-- Dependencies for ColorFilterOverlayControl -->
+  <PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureColorFilterOverlayControlEnabled) == 'true'">


I think that the inner loop feature areas need to be updated as well.

Can you be more specific about what is missing or what needs to change?

You will need to add this feature to the DatePicker group in line 73 since we need to build this project if want the styles for DatePicker to work as expected.

Thats right, DatePicker should not be dependent on ColorFilterOverlayControl so this PropertyGroup needs to add that as a ProductOnly dependency.

* Lift datepicker themes * Fix margin but LoopingSelector style is not respected * Update DatePicker styles to match design * Fix colors in control * Update Highlight color * Fix Highligh color for TimePicker dark mode * Fix some colors for dark theme * Fix highlight color on TimePicker, corner radius on highlighted date and dark mode highlighted foreground * Fix margins for accept/dismiss buttons * Fix up/down buttons margin * Fix color keys and date/time pickers borders * Fix everything but the plaveholder font color * Fix focus state for placeholders * Format all files * Remove extra variables * Fix crash for pre 21h1 builds * Activate DatePicker as test * Fix border brushes and update timepicker to match datepicker * Remove extra border on focus + pointer * Remove accent background color for focus state * Fix missing reference to caret icons * Remove left over changes from old focus behaviour * Remove changes from old focus behaviour for TimePicker * Fix contrast missing key * Remove added but unused colors * Remove another unused resource

…ub.com/microsoft/microsoft-ui-xaml into user/jevansaks/datepickerhighlightrect

almedina-ms · 2021-03-29T21:57:27Z

/azp run

azure-pipelines · 2021-03-29T21:57:39Z

Azure Pipelines successfully started running 1 pipeline(s).

Initial checkin for DatePicker highlight rect

acb4abc

ghost added the needs-triage Issue needs to be triaged by the area owners label Jan 14, 2021

Change style default back for the test app

378cc6f

Merge remote-tracking branch 'origin/master' into user/jevansaks/date…

120c1bf

…pickerhighlightrect

ranjeshj added area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Jan 15, 2021

ranjeshj requested review from StephenLPeters and kmelmon January 15, 2021 15:59

Merge remote-tracking branch 'origin/master' into user/jevansaks/date…

d9ee343

…pickerhighlightrect

StephenLPeters reviewed Jan 20, 2021

View reviewed changes

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.idl Outdated Show resolved Hide resolved

StephenLPeters reviewed Jan 20, 2021

View reviewed changes

Fix inner loop solution

6f7347d

ranjeshj approved these changes Jan 26, 2021

View reviewed changes

Updates to make focus rect work (needs extensive comments, stay tuned)

2faf43d

anawishnoff mentioned this pull request Feb 23, 2021

Proposal: Update design of DatePicker and TimePicker controls #4308

Open

almedina-ms added 3 commits March 9, 2021 12:28

Merge branch 'master' into user/jevansaks/datepickerhighlightrect

b2f559d

Merge branch 'master' into user/jevansaks/datepickerhighlightrect

bc91275

Merge branch 'master' into user/jevansaks/datepickerhighlightrect

dba843b

almedina-ms and others added 5 commits March 23, 2021 13:12

Merge branch 'master' into user/jevansaks/datepickerhighlightrect

8606cc5

Rename ColorFilterOverlayControl to MonochromaticOverlayPresenter

89c71ff

Merge branch 'master' into user/jevansaks/datepickerhighlightrect

edc1ed5

Merge branch 'user/jevansaks/datepickerhighlightrect' of https://gith…

e6d4a24

…ub.com/microsoft/microsoft-ui-xaml into user/jevansaks/datepickerhighlightrect

almedina-ms requested review from StephenLPeters and ranjeshj March 29, 2021 23:44

almedina-ms merged commit 7b85ba5 into master Mar 31, 2021

almedina-ms deleted the user/jevansaks/datepickerhighlightrect branch March 31, 2021 17:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DatePicker and TimePicker flyout visual updates #3947

DatePicker and TimePicker flyout visual updates #3947

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021 •

edited

Loading

jevansaks commented Jan 14, 2021

azure-pipelines bot commented Jan 14, 2021

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021 •

edited

Loading

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021

jevansaks commented Jan 20, 2021

azure-pipelines bot commented Jan 20, 2021

StephenLPeters Jan 20, 2021

jevansaks Jan 21, 2021

StephenLPeters Jan 26, 2021

jevansaks Jan 26, 2021

marcelwgn Jan 26, 2021

mdtauk Jan 27, 2021

StephenLPeters Jan 20, 2021

StephenLPeters Jan 20, 2021

jevansaks Jan 21, 2021

ranjeshj Jan 26, 2021

StephenLPeters Jan 26, 2021

almedina-ms commented Mar 29, 2021

azure-pipelines bot commented Mar 29, 2021

DatePicker and TimePicker flyout visual updates #3947

DatePicker and TimePicker flyout visual updates #3947

Conversation

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021 • edited Loading

jevansaks commented Jan 14, 2021

azure-pipelines bot commented Jan 14, 2021

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021 • edited Loading

jevansaks commented Jan 14, 2021

mdtauk commented Jan 14, 2021

jevansaks commented Jan 20, 2021

azure-pipelines bot commented Jan 20, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

almedina-ms commented Mar 29, 2021

azure-pipelines bot commented Mar 29, 2021

mdtauk commented Jan 14, 2021 •

edited

Loading

mdtauk commented Jan 14, 2021 •

edited

Loading