Initial check-in for colors/brushes, preliminary button brush updates, and adding visual states test page #3514

teaP · 2020-10-28T21:35:19Z

Added new colors and brushes to the common styles.
Updated Button (partially) with new colors and to remove tilt effect.
Added test page with a large number of ControlStateViewers to see all updates in one place.

Felix-Dev · 2020-10-28T21:45:49Z

dev/CommonStyles/CornerRadius_themeresources.xaml

@@ -5,16 +5,16 @@
    xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives">
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
-            <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
-            <CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
+            <CornerRadius x:Key="ControlCornerRadius">4,4,4,4</CornerRadius>


Out of interest, what has changed for MS Design since the discussion in #524 leading to this doubling of the corner radii?

Please don't

@Felix-Dev , I am not sure what part of the discussion you are pointing out of the #524, but nothing has fundamentally changed in terms of how we work. We continue to collaborate with design teams across the company.

@chigy I was only interested in why the (overlay) control corner radii are being doubled as part of this PR (so the motivation behind this change) when #524 settled on 2px for control corner radii and 4px for overlay control corner radii (like flyouts). My question isn't about how the design teams at MS work or collaborate internally or if that has changed since summer last year.

@Felix-Dev , we had overlay corner doubling of the control corner in our previous design. We are merely increasing the control corner to 4px which makes overlay to become 8px. Nothing changed other than the value increased globally?

@chigy I was more looking for an explanation like "customers felt 2px rounded corners were too subtle" or "MS Design felt 2px corner radii didn't fit too nicely with the rest of the corner radii seen in the web/mobile space". Anyway, I'll leave it at that.

I agree with @Felix-Dev Here. He is simply asking why the pixel values changed. What is the reasoning behind it? As app developers we need to know so we can evaluate our own updates to match changes like this.

To copy material is the right answer. 2px is the best choice since other platforms rounding too much and causing a distraction.

mdtauk · 2020-10-28T21:57:43Z

Are you able to share details about this token-experiment @teaP

I am assuming this is related to the concept of Design Tokens and possible integration with Figma?

@Felix-Dev when did the Control Corner Radius change to 4epx? Also why was this change made?

test/MUXControlsTestApp/Utilities/ControlStateViewer/ControlStateViewer.xaml.cs

dev/CommonStyles/TestUI/VisualStatesPage.xaml.cs

yaira2 · 2020-10-28T23:03:45Z

@teaP I fear that this will cause design issues in many apps. Developers who put special effort into working around design issues caused by the last change to the CornerRadius are going to have to go through this again, here are just a couple of the issues caused with the last change, #2134 #2401. Both of those examples are things can be fixed by retemplating the control, however, I don't think it's a good idea to make changes to the corner radius again until the mentioned issues are fixed. Fixing those first will prevent extra work for developers and it will help apps move towards a more consistent design.

mdtauk · 2020-10-28T23:08:13Z

@teaP I fear that this will cause design issues in many apps. Developers who put special effort into working around design issues caused by the last change to the CornerRadius are going to have to go through this again, here are just a couple of the issues caused with the last change, #2134 #2401. Both of those examples are things can be fixed by retemplating the control, however, I don't think it's a good idea to make changes to the corner radius again until the mentioned issues are fixed. Fixing those first will prevent extra work for developers and it will help apps move towards a more consistent design.

If these changes are intended for WinUI 3.0 only - then I think the huge version change could enable making these kinds of changes. I am not against them, based on what I see in the code - but I am curious why the changes are coming, and what the end goal is - so I can comment or provide feedback with some idea of the direction.

mdtauk · 2020-10-28T23:19:09Z

@mdtauk I am fine with a change to the radius, however a couple issues need to be solved, mainly making sure that it's applied consistently. The current iteration is not consistent, so as a temporary solution, many developers manually set the corner radius to solve these inconsistencies. Making another change to the radius is going to break all those manual changes unless the reason developers made the changes manually in the first place is solved.

Looking at the new names for the Button brushes - I think that is exactly what is being planned for.

I see things like an elevation border which appears to be a linear gradient so the top of the control/element gets a highlight, adding some subtle depth. And a new naming convention for Primary, Secondary, Tertiary, Disabled brushes used for the Rest, Hover, Pressed, Disabled visual states.

Design tokens may make it much easier to affect the look of a control from within something like Adobe XD or Figma - and it produce the code you then copy and paste into XAML.

teaP · 2020-10-29T04:26:14Z

/azp run

azure-pipelines · 2020-10-29T04:26:21Z

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

chigy · 2020-10-29T16:31:25Z

Are you able to share details about this token-experiment @teaP

I am assuming this is related to the concept of Design Tokens and possible integration with Figma?

@Felix-Dev when did the Control Corner Radius change to 4epx? Also why was this change made?

@mdtauk ,
Great question! Yes, it is related to Design Token we have announced in our past talks. While we cannot share a detail of where we are or what exactly is happening, you can think of this as you are being included in our progress.

Yes, we are changing the Control Corner Radius to 4epx.

mdtauk · 2020-10-29T17:04:35Z

@mdtauk ,
Great question! Yes, it is related to Design Token we have announced in our past talks. While we cannot share a detail of where we are or what exactly is happening, you can think of this as you are being included in our progress.

Yes, we are changing the Control Corner Radius to 4epx.

Very interesting. Do you have some idea when the community will hear about the future plans?

Also to what extent these changes may fundamentally change how Xaml works, and what changes developers may need to make in their apps?

chigy · 2020-10-29T17:42:50Z

@mdtauk ,
Great question! Yes, it is related to Design Token we have announced in our past talks. While we cannot share a detail of where we are or what exactly is happening, you can think of this as you are being included in our progress.
Yes, we are changing the Control Corner Radius to 4epx.

Very interesting. Do you have some idea when the community will hear about the future plans?

Also to what extent these changes may fundamentally change how Xaml works, and what changes developers may need to make in their apps?

@mdtauk , I am not at the position to comment when we can or plan to share, but I'm sure this community will be the first to find out. :)

The idea of design token is it should be transparent to the developers as long as they are using controls "as is". As is any changes we make, retemplating or customization make it more work for developers but it is not unique to token.

JaiganeshKumaran · 2020-10-30T03:19:08Z

The problem is the corner rendering in XAML is already very bad compared to other platforms. Increasing to 4epx will make it even worse by default.

mdtauk · 2020-10-30T13:37:05Z

The problem is the corner rendering in XAML is already very bad compared to other platforms. Increasing to 4epx will make it even worse by default.

I can see some logic in the decision. XAML for WinUI bases it's layout on a 4px grid. So having the corners use 4px and 8px as a minimum, could solve some potential scaling issues.

I just have no idea where the discussion took place to change it, and feel like I missed something. Unless of course this decision took place offline, or internally without including the community in the disscussion.

The previous change to 2px and 4 px radii was talked about quite a bit, as it was being implemented.

JaiganeshKumaran · 2020-10-30T13:39:01Z

Or don't use rounded corners at all. Windows apps don't need to consistent with other apps.

mdtauk · 2020-10-30T13:44:21Z

Or don't use rounded corners at all. Windows apps don't need to consistent with other apps.

This is more an aesthetic choice here, and I personally like the rounded corners, as it adds a sense of the controls actually being designed compared to just boxes. It gives a level of polish, and when the corners make their way to the shell and windows themselves, it will no longer feel as out of place to you.

JaiganeshKumaran · 2020-10-30T13:46:35Z

When MS chose 2px as the default I was happy because most other platforms round their controls too much and reduce usability. Please don't increase it

jevansaks · 2020-10-30T16:02:28Z

The problem is the corner rendering in XAML is already very bad compared to other platforms. Increasing to 4epx will make it even worse by default.

@JaiganeshKumaran Yes, I'm not sure how we didn't notice this when we first did the rounded corners but it's a XAML / Composition bug that we will be fixing.

I just have no idea where the discussion took place to change it, and feel like I missed something. Unless of course this decision took place offline, or internally without including the community in the disscussion.

@mdtauk We welcome feedback on the design changes. I'm sure you know that design choices are personal and can be polarizing. Even across Microsoft it's hard for us to agree on any one design system or aesthetic. We bring the community in to the discussions when we can but WinUI's job is to be the native embodiment of the Fluent design system, we don't drive all aspects of the design. This can be frustrating for us too sometimes.

We understand that changes can be disruptive so we welcome feedback like you all are providing. I'd love to hear specific feedback about how we can make these changes easier to adopt. We're doing this experimentation in a branch as the default just so we can evaluate the look and impact. But in order to bring it to main we may need to add knobs to help turn off some or all of the change for folks who don't have time to update their app designs. Please let us know what ideas you have for minimizing the impact to developers.

JaiganeshKumaran · 2020-11-03T04:30:56Z

@teaP Please don't remove the tilt effect. It's a great effect that I like and I don't find on other platforms. Please don't make Fluent an ugly design like the rest of the web and mobile.

JaiganeshKumaran · 2020-11-03T04:33:53Z

WinUI is blindly copying other platforms and trends and removing everything that made Fluent fluent. This is bad for Windows design

robloo · 2020-11-03T04:47:52Z

Wow, not happy a change to 4px/8px slipped in unannounced like this. I had to update almost 40 custom controls to sync with the 2px/4px corner radius last time. Was not planning on making significant changes there for a while and definitely not before WinUI 3.0. @jevansaks @ranjeshj @StephenLPeters My strong request is that you don't make increment styling updates like this. We all know Microsoft is cooking up a big design refresh. Please only commit code after it is fully fleshed out and discussed. Then commit the new styling all at once so we can all plan for it and sync with it at once.

Edit: I see actually this is a feature branch. Still, please be careful with the main branch changes.

mdtauk · 2020-11-03T07:27:45Z

Wow, not happy a change to 4px/8px slipped in unannounced like this. I had to update almost 40 custom controls to sync with the 2px/4px corner radius last time. Was not planning on making significant changes there for a while and definitely not before WinUI 3.0. @jevansaks @ranjeshj @StephenLPeters My strong request is that you don't make increment styling updates like this. We all know Microsoft is cooking up a big design refresh. Please only commit code after it is fully fleshed out and discussed. Then commit the new styling all at once so we can all plan for it and sync with it at once.

Edit: I see actually this is a feature branch. Still, please be careful with the main branch changes.

When the changes go to the main branch, you should be using the ControlCornerRadius theme resource, and the OverlayCornerRadius one. That way the change can be made to those two resources, and they propagate down to your controls or other things where you are setting the corner radii

robloo · 2020-11-03T13:21:38Z

@mdtauk I already use this resource. They are custom controls. In a perfect world, yes, the update would be transparent. However, corner radius can clip things that shouldn't be clipped, etc. All the designs need to be reviewed and adjusted. It is true that this should go faster the second time now that corner radius was already added (adding the property is where it didn't exist was quite time consuming).

mdtauk · 2020-11-03T13:58:28Z

@mdtauk I already use this resource. They are custom controls. In a perfect world, yes, the update would be transparent. However, corner radius can clip things that shouldn't be clipped, etc. All the designs need to be reviewed and adjusted. It is true that this should go faster the second time now that corner radius was already added (adding the property is where it didn't exist was quite time consuming).

I believe this is what's happening, and this branch is the start, as well as the rumoured "Sun Valley" Windows design coming next year.

JaiganeshKumaran · 2020-11-03T14:01:47Z

@mdtauk We asked for a consistent design between old Windows and new Windows and not a consistent design with dumb mobile/web platforms.

mdtauk · 2020-11-03T14:28:06Z

@mdtauk We asked for a consistent design between old Windows and new Windows and not a consistent design with dumb mobile/web platforms.

See, I'd rather old Windows catch up with modern fluent design, rather than holding back the Frameworks, with outdated control designs and UI

JaiganeshKumaran · 2020-11-03T14:32:33Z

@mdtauk That's right but I would like to see the web adopt "Fluent UI" adopt WinUI look and feel and not the other way around. The removal of the tilt effect in this pull request shows this clearly.

mdtauk · 2020-11-03T15:44:50Z

@mdtauk That's right but I would like to see the web adopt "Fluent UI" adopt WinUI look and feel and not the other way around. The removal of the tilt effect in this pull request shows this clearly.

The Tilt Effect is a remnant of Metro from Windows Phone. It is also not an effect that works well on the web, or with smaller buttons.

There is a form of Acrylic that can work on the Web, but obviously not going through to the desktop.

JaiganeshKumaran · 2020-11-03T15:46:01Z

@mdtauk I like the tilt effect. It's so good and modern why remove it on Windows?

mdtauk · 2020-11-03T15:54:50Z

@mdtauk I like the tilt effect. It's so good and modern why remove it on Windows?

In the Windows Phone days I repeatedly asked for that Tilt effect to be added to the inbox controls, and it eventually was added in Windows 8

But the design language has moved on, like those progress rings with the dots.

You seem to act like Windows is being forced to abandon it's current design language - but the same people who designed that, also designed the Web controls, and so it is just a natural evolution of the direction Fluent Design is taking. The web versions just iterated faster, because its much easier to update those controls - and now its time for Windows to refresh their designs.

chigy · 2020-11-03T18:11:33Z

Design is an iterative process that we continue to improve based on findings. Sometimes we introduce something that goes out of style just like a style of clothing. As we work on the series of UI updates here, we are also building the foundation that can be updated whenever the style change happens. It is not a matter of if, it is matter of when.

For those of you who want to give feedback on the design, please join us in the following and other issues that can be more specific about particular changes: #3544 , #3546 , #3549

…, and adding visual states test page (#3514) * add visual states test page * add visual states test page * Add new colors, update Button* brushes * Tweaked CSV, added accent button * Fix bad merge * Added elevation border brushes * Temporarily disable failing tests so other work can be unblocked.

JaiganeshKumaran · 2020-11-04T02:18:34Z

@chigy I understand but please don't remove the tilt effect. I don't find it on other platforms and I like it and even want to see it on other platforms. Don't just remove something since it can't be implemented on the web. I do appreciate certain new styles like the new text box border or the proposed #3549

…, and adding visual states test page (#3514) * add visual states test page * add visual states test page * Add new colors, update Button* brushes * Tweaked CSV, added accent button * Fix bad merge * Added elevation border brushes * Temporarily disable failing tests so other work can be unblocked.

* Move build to windevbuildagents (#3511) * Remove infobar from innerloop when it isn't explicitly included. (#3512) * Remove infobar from innerloop when it isn't explicitly included. * Update InnerLoopAreas.props Remove feature area from InnerLoopAreas * add condition * revert innerloop solution file * revert innerloop solution file * Update script to add API test projects and add empty dependency list in FeatureArea.props file (#3474) * Update new control script to add API test project * Update script to add dependencies, clean up script * * Rename FindElementOfTypeInSubtree -> FindVisualChildByType (#3438) * FindVisualChildByName() now an extension method * internal code cleanup * IsSelectionRequried -> IsSelectionRequired (#3404) * IsSelectionRequried -> IsSelectionRequired * TreeViewListAutomationPeer::IsSelectionRequired() always returns false. * Update the test infra to account for the test app having a different name when built from the inner loop solution. (#3359) * Feature/expander (#3492) Adding expander control (#3492). * Initial check-in for colors/brushes, preliminary button brush updates, and adding visual states test page (#3514) * add visual states test page * add visual states test page * Add new colors, update Button* brushes * Tweaked CSV, added accent button * Fix bad merge * Added elevation border brushes * Temporarily disable failing tests so other work can be unblocked. * NavView: Fix CornerRadius for overflow menu and NavViewItem children flyout menu (#3082) * Fix corner radius for the overflow menu and the children flyout menu. * Add two interaction tests. * Small comment improvements. * Small comment improvement. * Move top NavigationView specific overflow button tests from CommonTests to TopModeTests. * Now close opened flyout in API test before finishing. * Rename FindElementOfTypeInParentTree -> FindVisualParentByType * Add missing resource files to LocConfig (#3567) * Cache IsFullScreenMode and invalidate the value only when SizeChanged is raised (#3569) * Fix issue with ProgressRing not acting correctly when moving backwards (#3565) * Add workaround for awkward progress ring behavior. * Update progresring backwards behavior * move pager resources under strings/en-us folder (#3593) * make footer menu items public (#3519) * update progress ring idl (#3599) * TabView: Fix newly-added items not respecting TabWidthMode [compact] when using an ItemsSource collection (#3118) * Fix the following issues when populating the TabView via its ItemsSource API: * crash when clearing the ItemsSource * TabWidthMode [compact] being ignored in XAML Markup and for newly-added items * small comment improvement * Added two API tests and modified existing test. * Unrelated code which was commented out is run again. * Add API test. * Simplified API test. * Merge API tests. * Add API contract checks for corner radius. * Ensure that listview selected index is not outside of the item range. * Update TabView.cpp Co-authored-by: Ranjesh <28935693+ranjeshj@users.noreply.github.com> * Switch to using ThemeResource for icon in InfoBar (#3603) * Allow winui to detect if it's in CBS package (#3520) * build cbs * Revert "build cbs" This reverts commit 24b6812. * cbs: * Update dev/dll/SharedHelpers.cpp Co-authored-by: Jevan Saks <jevansa@microsoft.com> * Update dev/dll/XamlControlsResources.cpp Co-authored-by: Jevan Saks <jevansa@microsoft.com> * remove check for old platform and add assert * make pipeline build cbs resources.pri and manifest * Update dev/dll/XamlControlsResources.cpp * Update dev/dll/XamlControlsResources.cpp * fail fast * Update dev/dll/XamlControlsResources.cpp * fix package name when generate CBSManifest Co-authored-by: Jevan Saks <jevansa@microsoft.com> * Doc/roadmap updates (#3618) * Updating ordering * Updating feature roadmap * More updates to feature roadmap, roadmap graphic * Update bug_report.md (#3622) * Fix readme to mention Preview 3 instead of P2 (#3621) * Update NavigationView pane scrolling behavior (#3602) * Add initial layout updating, add test page * Add first interaction tests * Fix behavior, add scrolling behavior * CR feedback * Add hacky workaround for weird sizing behavior * Update layout, add separator * Fix updating behavior * Remove hacky workaround, fix test * Add fault tolerance to tests * Update verification files * Change Preview 2 to Preview 3 (#3626) * Update preview_upgrade_instructions.md (#3636) * TeachingTip: Fix background for light-dismissable tip (#3440) * Add missing visual state setters. * Extend API test. * update loc strings (#3650) * File Pipeline build break: Update Nuget from 5.2 to 5.8 (#3664) * Fixing an issue where we needed a FileWrites to avoid file deletion. (#3661) * Remove explicit sizes of InfoBar (#3653) * Remove explicit sizes of InfoBar * Set minheight for centering * Switch to lightweight styling resources * Update CommandBarFlyout closing animation to include button moving (#3594) * Update more-button animation behavior * Fix background issue * CR feedback * update intellisense file (#3651) * Update AcrylicBrushes and add new AcrylicBrushes (#3498) * Add new brushes, update CommandbarFlyout and NavigationView to use new brushes * Update brushes * Update brush references * Update project file * Update navigationview resources * Hacky workaround XAML compiler bug * Add check * Add comment * Fix typo * Add ImageIcon (#3629) * Add ImageIcon * Respond to feedback and use an svg image with an MIT license. * Fix broken test * Platform check the IsLoaded check which was introduced in RS5 * Fix Innerloop Solution (#3697) * Add ImageIcon * Respond to feedback and use an svg image with an MIT license. * Fix broken test * Platform check the IsLoaded check which was introduced in RS5 * Add preprocessor declaration around imageIconSource code in MakeIconElementFrom * Update InfoBarPanel API names (#3704) * Update API names * Remove grid.columns * Adding PipsPager (#3592) * PipsControl initial structure * PipsControl update file structure * Add boilerplate code * Add styles and update logic * Remove Grid inside the PipsControl * some layout fixes * Update common styles * Fix nav buttons visibility logic * Update themeresources and fix infinite scrolling * Clean up the code * Remove InneLoopAreasProps from PR * Add automation * Update resources file * Fix button visibility for automation * Fix navigaiton buttons disappearing bug * Update .idl file and add style as properties * Add handlers for button visibility changes * Add style handlers and update accessibility * Add basic test with flipview * Fix update of max number of pages * Fix maxdisplayedpages onchange handler and address small PR issues * remove commented code * Update Naming * Fix naming and fix pointer hover event * Update Tests and leave some comments * Update naming and tests * Fix sv change size and override virtual methods * Address PR comments * Address PR issues * Fix button not showing up on initial launch * Clean up the code * Update API tests * Partially Update Tests * Fix spacing * Update Strings * Attempt to fix tests * Attempt to fix tests * Fall back to manual scroll if fresh API is not available * Move API check to SharedHelpers * Fix naming Co-authored-by: Ranjesh Jaganathan <28935693+ranjeshj@users.noreply.github.com> * fix tests * ImageIcon test fix Co-authored-by: Keith Mahoney <41657372+kmahone@users.noreply.github.com> Co-authored-by: Stephen L Peters <stpete@microsoft.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Felix-Dev <FelixDev91@gmail.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: EJ <lalotahoma@icloud.com> Co-authored-by: T Paine <30241445+teaP@users.noreply.github.com> Co-authored-by: Jevan Saks <jevansa@microsoft.com> Co-authored-by: Canhua Li <licanhua@live.com> Co-authored-by: Ana Wishnoff <anawish@microsoft.com> Co-authored-by: Morten Nielsen <1378165+dotMorten@users.noreply.github.com> Co-authored-by: Thomas Claudius Huber <thomas@thomasclaudiushuber.com> Co-authored-by: Luke Longley <18177025+llongley@users.noreply.github.com> Co-authored-by: Vsevolod <sevkorobot@gmail.com>

…e 2.5 (#3887) * Initial check-in for colors/brushes, preliminary button brush updates, and adding visual states test page (#3514) * add visual states test page * add visual states test page * Add new colors, update Button* brushes * Tweaked CSV, added accent button * Fix bad merge * Added elevation border brushes * Temporarily disable failing tests so other work can be unblocked. * merge master into feature branch (#3556) * Move build to windevbuildagents (#3511) * Remove infobar from innerloop when it isn't explicitly included. (#3512) * Remove infobar from innerloop when it isn't explicitly included. * Update InnerLoopAreas.props Remove feature area from InnerLoopAreas * add condition * revert innerloop solution file * revert innerloop solution file * Update script to add API test projects and add empty dependency list in FeatureArea.props file (#3474) * Update new control script to add API test project * Update script to add dependencies, clean up script * * Rename FindElementOfTypeInSubtree -> FindVisualChildByType (#3438) * FindVisualChildByName() now an extension method * internal code cleanup * IsSelectionRequried -> IsSelectionRequired (#3404) * IsSelectionRequried -> IsSelectionRequired * TreeViewListAutomationPeer::IsSelectionRequired() always returns false. * Update the test infra to account for the test app having a different name when built from the inner loop solution. (#3359) * Feature/expander (#3492) Adding expander control (#3492). Co-authored-by: Keith Mahoney <41657372+kmahone@users.noreply.github.com> Co-authored-by: Stephen L Peters <stpete@microsoft.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Felix-Dev <FelixDev91@gmail.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: EJ <lalotahoma@icloud.com> * update controls to use design token colors, update styles (#3728) * merge master into feature branch (#3734) * Move build to windevbuildagents (#3511) * Remove infobar from innerloop when it isn't explicitly included. (#3512) * Remove infobar from innerloop when it isn't explicitly included. * Update InnerLoopAreas.props Remove feature area from InnerLoopAreas * add condition * revert innerloop solution file * revert innerloop solution file * Update script to add API test projects and add empty dependency list in FeatureArea.props file (#3474) * Update new control script to add API test project * Update script to add dependencies, clean up script * * Rename FindElementOfTypeInSubtree -> FindVisualChildByType (#3438) * FindVisualChildByName() now an extension method * internal code cleanup * IsSelectionRequried -> IsSelectionRequired (#3404) * IsSelectionRequried -> IsSelectionRequired * TreeViewListAutomationPeer::IsSelectionRequired() always returns false. * Update the test infra to account for the test app having a different name when built from the inner loop solution. (#3359) * Feature/expander (#3492) Adding expander control (#3492). * Initial check-in for colors/brushes, preliminary button brush updates, and adding visual states test page (#3514) * add visual states test page * add visual states test page * Add new colors, update Button* brushes * Tweaked CSV, added accent button * Fix bad merge * Added elevation border brushes * Temporarily disable failing tests so other work can be unblocked. * NavView: Fix CornerRadius for overflow menu and NavViewItem children flyout menu (#3082) * Fix corner radius for the overflow menu and the children flyout menu. * Add two interaction tests. * Small comment improvements. * Small comment improvement. * Move top NavigationView specific overflow button tests from CommonTests to TopModeTests. * Now close opened flyout in API test before finishing. * Rename FindElementOfTypeInParentTree -> FindVisualParentByType * Add missing resource files to LocConfig (#3567) * Cache IsFullScreenMode and invalidate the value only when SizeChanged is raised (#3569) * Fix issue with ProgressRing not acting correctly when moving backwards (#3565) * Add workaround for awkward progress ring behavior. * Update progresring backwards behavior * move pager resources under strings/en-us folder (#3593) * make footer menu items public (#3519) * update progress ring idl (#3599) * TabView: Fix newly-added items not respecting TabWidthMode [compact] when using an ItemsSource collection (#3118) * Fix the following issues when populating the TabView via its ItemsSource API: * crash when clearing the ItemsSource * TabWidthMode [compact] being ignored in XAML Markup and for newly-added items * small comment improvement * Added two API tests and modified existing test. * Unrelated code which was commented out is run again. * Add API test. * Simplified API test. * Merge API tests. * Add API contract checks for corner radius. * Ensure that listview selected index is not outside of the item range. * Update TabView.cpp Co-authored-by: Ranjesh <28935693+ranjeshj@users.noreply.github.com> * Switch to using ThemeResource for icon in InfoBar (#3603) * Allow winui to detect if it's in CBS package (#3520) * build cbs * Revert "build cbs" This reverts commit 24b6812. * cbs: * Update dev/dll/SharedHelpers.cpp Co-authored-by: Jevan Saks <jevansa@microsoft.com> * Update dev/dll/XamlControlsResources.cpp Co-authored-by: Jevan Saks <jevansa@microsoft.com> * remove check for old platform and add assert * make pipeline build cbs resources.pri and manifest * Update dev/dll/XamlControlsResources.cpp * Update dev/dll/XamlControlsResources.cpp * fail fast * Update dev/dll/XamlControlsResources.cpp * fix package name when generate CBSManifest Co-authored-by: Jevan Saks <jevansa@microsoft.com> * Doc/roadmap updates (#3618) * Updating ordering * Updating feature roadmap * More updates to feature roadmap, roadmap graphic * Update bug_report.md (#3622) * Fix readme to mention Preview 3 instead of P2 (#3621) * Update NavigationView pane scrolling behavior (#3602) * Add initial layout updating, add test page * Add first interaction tests * Fix behavior, add scrolling behavior * CR feedback * Add hacky workaround for weird sizing behavior * Update layout, add separator * Fix updating behavior * Remove hacky workaround, fix test * Add fault tolerance to tests * Update verification files * Change Preview 2 to Preview 3 (#3626) * Update preview_upgrade_instructions.md (#3636) * TeachingTip: Fix background for light-dismissable tip (#3440) * Add missing visual state setters. * Extend API test. * update loc strings (#3650) * File Pipeline build break: Update Nuget from 5.2 to 5.8 (#3664) * Fixing an issue where we needed a FileWrites to avoid file deletion. (#3661) * Remove explicit sizes of InfoBar (#3653) * Remove explicit sizes of InfoBar * Set minheight for centering * Switch to lightweight styling resources * Update CommandBarFlyout closing animation to include button moving (#3594) * Update more-button animation behavior * Fix background issue * CR feedback * update intellisense file (#3651) * Update AcrylicBrushes and add new AcrylicBrushes (#3498) * Add new brushes, update CommandbarFlyout and NavigationView to use new brushes * Update brushes * Update brush references * Update project file * Update navigationview resources * Hacky workaround XAML compiler bug * Add check * Add comment * Fix typo * Add ImageIcon (#3629) * Add ImageIcon * Respond to feedback and use an svg image with an MIT license. * Fix broken test * Platform check the IsLoaded check which was introduced in RS5 * Fix Innerloop Solution (#3697) * Add ImageIcon * Respond to feedback and use an svg image with an MIT license. * Fix broken test * Platform check the IsLoaded check which was introduced in RS5 * Add preprocessor declaration around imageIconSource code in MakeIconElementFrom * Update InfoBarPanel API names (#3704) * Update API names * Remove grid.columns * Adding PipsPager (#3592) * PipsControl initial structure * PipsControl update file structure * Add boilerplate code * Add styles and update logic * Remove Grid inside the PipsControl * some layout fixes * Update common styles * Fix nav buttons visibility logic * Update themeresources and fix infinite scrolling * Clean up the code * Remove InneLoopAreasProps from PR * Add automation * Update resources file * Fix button visibility for automation * Fix navigaiton buttons disappearing bug * Update .idl file and add style as properties * Add handlers for button visibility changes * Add style handlers and update accessibility * Add basic test with flipview * Fix update of max number of pages * Fix maxdisplayedpages onchange handler and address small PR issues * remove commented code * Update Naming * Fix naming and fix pointer hover event * Update Tests and leave some comments * Update naming and tests * Fix sv change size and override virtual methods * Address PR comments * Address PR issues * Fix button not showing up on initial launch * Clean up the code * Update API tests * Partially Update Tests * Fix spacing * Update Strings * Attempt to fix tests * Attempt to fix tests * Fall back to manual scroll if fresh API is not available * Move API check to SharedHelpers * Fix naming Co-authored-by: Ranjesh Jaganathan <28935693+ranjeshj@users.noreply.github.com> * fix tests * ImageIcon test fix Co-authored-by: Keith Mahoney <41657372+kmahone@users.noreply.github.com> Co-authored-by: Stephen L Peters <stpete@microsoft.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Felix-Dev <FelixDev91@gmail.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: EJ <lalotahoma@icloud.com> Co-authored-by: T Paine <30241445+teaP@users.noreply.github.com> Co-authored-by: Jevan Saks <jevansa@microsoft.com> Co-authored-by: Canhua Li <licanhua@live.com> Co-authored-by: Ana Wishnoff <anawish@microsoft.com> Co-authored-by: Morten Nielsen <1378165+dotMorten@users.noreply.github.com> Co-authored-by: Thomas Claudius Huber <thomas@thomasclaudiushuber.com> Co-authored-by: Luke Longley <18177025+llongley@users.noreply.github.com> Co-authored-by: Vsevolod <sevkorobot@gmail.com> * add missing PipsPager generatd file (#3755) * Allow microsoft-ui-xaml to support multiple sets of styles (#3690) * update customtask * update project to use the customtool and support UseVisualStyle * support new flag in api * missing one file change for custombuild task * update to new api and address some comments * fix the -> * script to move master xaml to v2.5 and add them to proj * manually correct the missing items * vcxproj back to UTF8 * standard the name and replace previous with 2dot5 * batch remove last line for project * remove pips and address commentss * trim last line * remove newline at the end of file * fix ##[error]dev\dll\XamlControlsResources.cpp(249,0): Error C26449: gsl::span or std::string_view created from a temporary will be invalid when the temporary is invalidated (gsl.view). * remove return type in lambda * remove Expander_v2.5.xaml, move merge.bat to tools and fix the test failure * fix test * Fix RadioButtons colouring bug (#3756) * fix radioButtons colouring bug * changes from comments * Slider Visual Update (#3768) * visual update * re-add missing key * add innerthumb size animation * add colour transitions * changes from comments * colour transitions fix * prepare for merge * Update pfx and cer used for test signing (#3882) * update pfx * update CalendarView.xml master * update default setting and codegen update avoid crash on expander, reveal, NavView and progressbar * resolve merge conflict * enable test * Fix the Latest still using 2.5 styles Co-authored-by: T Paine <30241445+teaP@users.noreply.github.com> Co-authored-by: Ranjesh <28935693+ranjeshj@users.noreply.github.com> Co-authored-by: Keith Mahoney <41657372+kmahone@users.noreply.github.com> Co-authored-by: Stephen L Peters <stpete@microsoft.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Felix-Dev <FelixDev91@gmail.com> Co-authored-by: Tony Xia <xia_tony@hotmail.com> Co-authored-by: EJ <lalotahoma@icloud.com> Co-authored-by: Jevan Saks <jevansa@microsoft.com> Co-authored-by: Ana Wishnoff <anawish@microsoft.com> Co-authored-by: Morten Nielsen <1378165+dotMorten@users.noreply.github.com> Co-authored-by: Thomas Claudius Huber <thomas@thomasclaudiushuber.com> Co-authored-by: Luke Longley <18177025+llongley@users.noreply.github.com> Co-authored-by: Vsevolod <sevkorobot@gmail.com> Co-authored-by: Karen Lai <7976322+karenbtlai@users.noreply.github.com>