[FancyZones Editor] Fluent UX and theming support

[niels9001]

Summary of the Pull Request

This PR contains the following changes:

• Support for light, dark and high contrast themes.
• All controls and windows are styled to look (very) similar to WinUI and following Fluent Design UX guidelines (using ModernWPF for the style sheets).
• Redesigned FZ editor layout.
• Moving brushes and styles to dedicated ResourceDictionaries instead of inline in various pages.
• Using updated AccentColor brushes so everything updates immediately when changing AccentColor.
• Canvas layouts itemscontrol is now scrollable.
• Accessibility improvements (due to high contrast and better layout for keyboard).

And overall, could be a nice basis to further ideate on solutions for some outstanding issues.

This PR should only be merged after #6562.

Layout selection screen

Dialogs

** High contrast**

PR Checklist

• Applies to [FZ Editor] add DarkMode #326, Modernizing Look / Feel across all PowerToys #891, [Supporting the Platform- Fancy Zones-Launch Zones-Create New Custom]: 'Custom layout Creator' dialog is not adapting the high contrast black/white mode settings #7071, [FZ Editor] Multiple custom layouts list is not scrollable #738, [Visual Requirements- Fancy Zones-Launch Zones-Create New Custom]: Luminosity ratio of 'Name' edit field boundary with its white background is 1.6:1 which is less than 3:1. #7032

[htcfreek]

@niels9001
Wow. Great work. I like it.

One question: How does the 'custom' section looks? (Asking because of #2207.)

[crutkas]

how bad is this and #6562 going to conflict?

[niels9001]

how bad is this and #6562 going to conflict?

I don't think there will be any major conflicts, since this PR touches mostly XAML files. Might be good to wait for #6562 to be merged - I think it's the new screen selection UI in the MainWindow that requires some work to get in.

[niels9001]

@niels9001
Wow. Great work. I like it.

One question: How does the 'custom' section looks? (Asking because of #2207.)

Same behavior.

I believe we need to rethink the current tabs structure and how to create new layouts. I'll open a new issue to discuss that, since it's maybe not entirely in scope for this PR.

[htcfreek]

@niels9001
Wow. Great work. I like it.

One question: How does the 'custom' section looks? (Asking because of #2207.)

Same behavior.

I believe we need to rethink the current tabs structure and how to create new layouts. I'll open a new issue to discuss that, since it's maybe not entirely in scope for this PR.

Do we really need a new issue? We have issue #2207.

[enricogior]

#6562 should be merged first, since it brings functional changes that we don't want to test in a merge with UI changes.

[htcfreek]

@niels9001
Wow. Great work. I like it.

One question: How does the 'custom' section looks? (Asking because of #2207.)

Same behavior.

I believe we need to rethink the current tabs structure and how to create new layouts. I'll open a new issue to discuss that, since it's maybe not entirely in scope for this PR.

Do we really need a new issue? We have issue #2207.

@niels9001
FYI, please look at #2208 too.

[enricogior]

@niels9001
to have a consistent UI and show the proper available commands on the right panel, we should remove the custom tab, have just one tab that has all the layouts and distinguishes between grid layouts and canvas layouts.
For example, currently we don't support "Space around zone" for canvas layout, while we do for custom grid layouts (even if currently there is no UI for that).
Let us complete #6562 and then we can tackle this properly.

[niels9001]

@enricogior Totally agree.

@htcfreek I have added my thoughts and some concepts in the Editor v2 topic. I think this would solve a lot of outstanding issues like the ones you mentioned. Some open questions pending.

#1032 (comment)

[crutkas]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[crutkas]

can we shift this into a draft PR so we don't accidently merge it in?

[enricogior]

@niels9001
we merged #6562 for multi monitor support.
The next two work items are:

• porting FZ Editor to .NET Core
• merging this PR

Which one should we do first?
Consider that the two work items are not targeting 0.27 since we want freeze the code for 0.27 on Friday and it would take more time to test these changes.

[niels9001]

@enricogior I think I'll close this PR and start a new branch based on master. Too many changes, but should be straightforward copy-and-pasting of e.g. brushes. I can finish this in the next week or so, so maybe better to wait for 0.28 for this work item?

[niels9001]

I'm not sure if .NET Core would touch the UI / XAML at all? So we can work on it simultaneously?

[enricogior]

@niels9001

better to wait for 0.28 for this work item?

Sure, it won't be in 0.27 for sure, not enough time to do it and test for 0.27.

I'm not sure if .NET Core would touch the UI / XAML at all? So we can work on it simultaneously?

I would assume it should not. We will start on the .NET Core migration, late this week or earlier next week. We will commit to master sometime next week.

[niels9001]

Closing this in favor of: #8148