[UX] UX improvements and fixes

[niels9001]

@gregwoo-microsoft @chingucoding This turned out to be a larger PR than I anticipated due to the many things that were somehow linked, and a lot of legacy code.

Major changes:

• New design and cleanup of the ItemsPage.
• A ton of design improvements, so all pages now renderly nicely on every viewpoint.
• UI controls will now be hidden, e.g.: whenever there are no 'related controls' the related controls button wouldn't show.
• Images now bleed from edge-to-edge, based on new design specs.
• Removing PageHeader usercontrol (because it was only used on the ItemsPage itself).

Tour:

Gallery.mp4

[gregwoo-microsoft]

Thank you so much for implementing this Niels. This is great. I listed my comments below:

• The new top buttons are great, they make it easier to access documentation links. Should we remove the related controls button? I don't think that it brings a ton of value (since related controls are already visible in the navView panel on the left). Removing it would leave more space for other buttons (like a Figma button).
• The style icon doesn't appear like a button on my end, I don't see borders around it. Is that normal?

• It would nice to increase the margin below the buttons so that there is a bit of space between the buttons and the content when scrolling

• The settings page needs to have more space at the top (this might be linked to the other settings page issues)

• Same thing for the search results page, we should increase the top margin (maybe not as much as the current WinUI 3 Gallery but just a bit to have some extra space)

• Teaching tip sample: I think that we should change the sentences used in that sample so that it doesn't refer to the app's theme anymore (since it's no longer being targeted at the Theme button) --> for instance change the name of the sample to just "Show a targeted TeachingTip with hero content"

Let me know what you think!

[niels9001]

@gregwoo-microsoft Thanks, addressed the feedback!

Except for the Settingspage.. I'm leaving that for now since we'll use the new SettingsControls and that requires a rewrite of the page anyways (that'll be my next PR :))

[marcelwgn]

Opening any page seems to crash now:

Exception thrown: 'System.InvalidCastException' in System.Private.CoreLib.dll
Exception thrown at 0x00007FF8982C06BC (KernelBase.dll) in WinUIGallery.DesktopWap.exe: WinRT originate error - 0x80004002 : 'Unable to cast object of type 'Microsoft.UI.Xaml.Controls.NavigationViewItemSeparator' to type 'Microsoft.UI.Xaml.Controls.NavigationViewItem'.'.
onecore\com\combase\winrt\error\restrictederror.cpp(1017)\combase.dll!00007FF89A7CB92A: (caller: 00007FF89A7D0E9F) ReturnHr(274) tid(3fc0) 8007007E The specified module could not be found.

Further thoughts:

• Clicking on the "All controls" section seems to move selection to the design guidance section.
• Not sure if we need a separator inside the design guidance section, I would probably remove it
• Mayber reworking the individual samples is better done in a separate PR, it's already exhausting to review as is. Refactoring individual samples makes this even harder.
• Adding the "Controls" NVI Header is a very good idea
• When using touchpad, you can scroll the home page into the following temporary situation (because scrollview allows scrolling outside)
  

[marcelwgn]

Is that really the best way to do that? Wouldn't having a GitHub Icon Asset in the assets folder be easier maintenance wise?

[marcelwgn]

What do you think about new icons for the categories? Right now it seems a bit out of place having these monocolor icons next to the colorful ones:

Also, do we not want users to toggle the sample theme on the design guidance pages anymore? Or was that broken, in which case we can leave it as is.

[gregwoo-microsoft]

Thanks a lot @niels9001 for working on this!

What do you think about new icons for the categories? Right now it seems a bit out of place having these monocolor icons next to the colorful ones:

Yeah we had looked into adding those icons in the past but the design team had advised against it for that reason. Having a mix of colored + non-colored icons feels inconsistent.

Other comments:

• Can we slightly increase the window's launch width? Right now when you open the app, you only see 1 column of controls which looks odd.

• I don't think that we should have sticky headers for the typography & colors page --> other control pages don't have this behavior so it seems weird to have it there + the header of the colors page is too big so it takes most of the window's height. I'm in favor of removing the sticky headers for now.
• Can we please revert the changes made to the Icons page? I can't scroll on the page and the layout is no longer consistent with the other pages.

[niels9001]

Thanks a lot @niels9001 for working on this!

What do you think about new icons for the categories? Right now it seems a bit out of place having these monocolor icons next to the colorful ones:

Yeah we had looked into adding those icons in the past but the design team had advised against it for that reason. Having a mix of colored + non-colored icons feels inconsistent.

Yeah this was more of a trial haha - especially since the old icons are still using the W8/W10 style. Will revert!

Other comments:

• Can we slightly increase the window's launch width? Right now when you open the app, you only see 1 column of controls which looks odd.

Yeah this happened because the design spec wanted the cards to have the same width as 2 tiles + spacing.. which makes sense visually, but now we run into these kinds of issues. Changing the window size feels like it might be tricky and might bring additional issues, as WASDK apps due this based on screen ratio. The AdaptiveGridview would be a great solution for this.. but shall I just revert it for now?

• I don't think that we should have sticky headers for the typography & colors page --> other control pages don't have this behavior so it seems weird to have it there + the header of the colors page is too big so it takes most of the window's height. I'm in favor of removing the sticky headers for now.

Ooooh.. I figured the sticky header was intended in the design mockup 😅. My bad! The thought was that you could always switch between brushes vs. scrolling all the way up and then switch. If we decide not to go with the sticky headers for the colors page we can remove some other stuff here as well for the design guidance stuff. I'll revert!

• Can we please revert the changes made to the Icons page? I can't scroll on the page and the layout is no longer consistent with the other pages.

The previous version only shows 9 or so icons :(.. this version takes advantage of all screen real estate but see your point. I'll have a look what we can optimize still to have something in between :)!

[niels9001]

@gregwoo-microsoft @chingucoding We're using ItemsRepeater for the icon tool - is there a specific reason why we do this vs. GridView? ItemsRepeater doesn't support keyboard navigation out of the box where GridView does.. not sure if it's a huge priority though. Let me know!

[niels9001]

@gregwoo-microsoft @chingucoding Addressed feedback, reverted some changes made, added missing Elevation brushes and warning tooltip:

[marcelwgn]

Regarding ItemsRepeater, we opted to use that since styling GridViewItems can be quite difficult while ItemsRepeater is very unopinionated in that regard.

Further feedback, the links seem to be stuck to text on A11y pages

[gregwoo-microsoft]

Thanks a lot Niels for implementing those changes.

I've tried compiling the last few bits we need to merge this PR. Let me know what you think @niels9001 and @chingucoding.

• Add new home banner (I know Niels managed to make it work but listing it for completeness)

• Move the 'external link' icon to the bottom right of the card instead of the top right (the design team gave this feedback. They think that it is best to have the logo and title be at the top of the hierarchy)

• Remove the black and white control icons from the navView (since the icons are in color, the design team had suggested only having icons for the categories (i.e. basic input, collections, etc.) but no icons for the individual controls --> basically how it is in the current version of the Gallery). I think it's fine to leave the icons for the design guidance pages since we don't have color icons for those pages. Any thoughts?

• [Stretch] Decrease the size (both width and length) of the home tiles? They seem really big right now but let me know what you think is best.

• Move the "Controls" header in the navView below the separator? or remove the separator under the "All controls" page. (with the separator, it looks at first glance like the "Basic input" section is not part of the "Controls" section. Any thoughts?)

• The hyperlinks on the typography and accessibility pages are missing a space at the beginning

• Love what you did with the Icons page, you can now see more icons at a time. The only thing I would add for consistency with the other samples is the grey outline around both the icons library and the details pane on the right.

• On the stroke page, the first example (control elevation) has an extra/empty space on the right. If there are only 3 brushes, can we remove this empty space and use the 3 tile design (like for the second row of the control stroke example)?

• The toggle light/dark mode doesn't work on the colors page. Let me know if this should be a separate PR.

• [Stretch] Thanks for removing the sticky headers. I agree that ideally we would want to make the segmented control sticky but not sure if we can do it since there text over it. Let me know if this is possible (you can scroll down the page past the intro text and then only the segmented control sticks to the top of the screen) and if we should do it in another PR.

[niels9001]

• Add new home banner (I know Niels managed to make it work but listing it for completeness)
  Mind if we do that in a separate PR once this is merged in? (It's ready, but it introduces some additional animation dependencies and composition code - since this PR is already huge, easier for review in a separate PR)

• Move the 'external link' icon to the bottom right of the card instead of the top right (the design team gave this feedback. They think that it is best to have the logo and title be at the top of the hierarchy)
  Can we revisit this with the header image PR?

• Remove the black and white control icons from the navView (since the icons are in color, the design team had suggested only having icons for the categories (i.e. basic input, collections, etc.) but no icons for the individual controls --> basically how it is in the current version of the Gallery). I think it's fine to leave the icons for the design guidance pages since we don't have color icons for those pages. Any thoughts?
  Oooh I was looking at the WinUI 2 Gallery (that does include the icons).. Removed!

• [Stretch] Decrease the size (both width and length) of the home tiles? They seem really big right now but let me know what you think is best.
  Address this in the header image PR?

• Move the "Controls" header in the navView below the separator? or remove the separator under the "All controls" page. (with the separator, it looks at first glance like the "Basic input" section is not part of the "Controls" section. Any thoughts?)
  Current implementation was what is there before.. I guess the separator was used there to differentiate the actual controls (sections) vs. the 'all controls'? I'd go for removing the separator if we want to change the current behavior! Let me know.

• The hyperlinks on the typography and accessibility pages are missing a space at the beginning
  Fixed!

• Love what you did with the Icons page, you can now see more icons at a time. The only thing I would add for consistency with the other samples is the grey outline around both the icons library and the details pane on the right.

• On the stroke page, the first example (control elevation) has an extra/empty space on the right. If there are only 3 brushes, can we remove this empty space and use the 3 tile design (like for the second row of the control stroke example)?
  Fixed!

• The toggle light/dark mode doesn't work on the colors page. Let me know if this should be a separate PR.
  @chinguconding FYI.. Maybe do that in a separate PR if it involved additional code?

• [Stretch] Thanks for removing the sticky headers. I agree that ideally we would want to make the segmented control sticky but not sure if we can do it since there text over it. Let me know if this is possible (you can scroll down the page past the intro text and then only the segmented control sticks to the top of the screen) and if we should do it in another PR.
  Yeah, that'd be ideal. Agree it's a stretch goal for now maybe.

[gregwoo-microsoft]

Thanks a lot Niels for making those changes!

[gregwoo-microsoft]

@chingucoding I assume that you're no longer experiencing any crashes but didn't want to dismiss your change request just in case. Feel free to merge this PR if you're good.

[gregwoo-microsoft]

Including here a quick list of the remaining fixes we can address in separate PRs:

• Add new home banner
• Move the 'external link' icon to the bottom right of the card instead of top right
• Make home link tiles a bit smaller?
• Add github + template studio icon assets
• Remove "all controls" page and the separator below? (@chingucoding let me know your thoughts on this, Niels and I were chatting and we feel like this page doesn't add any value)
• Toggle light/dark mode doesn't work on the Colors page

[marcelwgn]

A few months ago, I would have probably said "sure let's remove the all controls page" but recently I often used it to see if there is any control that could possibly suite a use case. I'll leave that decision to you though I would argue that it doesn't cost us much to maintain does it?

[gregwoo-microsoft]

Ok sounds good, let's not remove it then. The reason why I brought it up is because I felt like it was weird visually to have the "Controls" header in the navView, then the "All controls" page, then a separator, and then all of the controls. Having the separator feels like the controls underneath are not part of the "Controls" header. A solution to that was to remove the "All controls" page along with the separator. Perhaps the best solution is to simply remove the separator or move it above the new "Controls" header.

[Scottj1s]

@niels9001 looks like a bad merge. can you take a look? I would just open a PR, but want to make sure nothing else is amiss.

[niels9001]

@niels9001 looks like a bad merge. can you take a look? I would just open a PR, but want to make sure nothing else is amiss.

#1193 should fix that :)