How to implement Fluid Design colors/tokens in XAML in Maui target Windows

Question

question

Veksi-2368 asked Aug 5, '22 YonglunLiu-MSFT commented 5 days ago

How to implement Fluid Design colors/tokens in XAML in Maui target Windows

I'm thinking how to add color codes/tokens for Fluent Design to a Maui application when it targets WinUI 3 (Windows 10 and 11). Specifically I think it would helpful to have a list of tokens for colors like at https://github.com/albi005/MaterialColorUtilities at (optional) Add placeholders to your App.xaml for suggestions when writing XAML.

I found https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html and found a color combination I like. However, this seem to target web and does not output XAML. I'm unsure how could I go on to generate XAML that is more like Fluent Design from that. I also found https://github.com/microsoft/fluent-xaml-theme-editor, but this looks outdated and certainly I can't out-of-the-box have as nice color combination as I can do with the web designer. Maybe If I took out the generated tokens in XAML and enhanced it manually. Though I'm quite new with Maui, Fluent Design and XAML.

I asked this question already in Stackoverflow at https://stackoverflow.com/questions/73241851/how-to-properly-add-microsoft-fluent-design-colors-to-maui-application, but it appears this forum has some good answers regarding Fluent Design and e.g. MICA such as https://docs.microsoft.com/en-us/answers/questions/893109/how-can-i-add-acrylicmica-materials-in-a-maui-app.html that helps a bit forwards. So, maybe this question fits here too. If nothing else, maybe helps someone else a bit.

dotnet-maui

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

YonglunLiu-MSFT · 6 days ago

In MAUI, the controls of Windows is styling with the fluent design system.

For further investigation, could you please provide more detailed information about what's your scenario to use the Fluid Design colors?

I also found https://github.com/microsoft/fluent-xaml-theme-editor, but this looks outdated and certainly I can't out-of-the-box have as nice color combination as I can do with the web designer.

Fluent-xaml-theme-editor is working for UWP platform, for WinUI3, you could use microsoft/WinUI-Gallery.

0 ·

Answer 1 · 2022-08-08T17:36:48.177Z

Veksi-2368 answered 6 days ago YonglunLiu-MSFT commented 5 days ago

@YonglunLiu-MSFT

I would like to either have a representative example list of color codes that would work with WinUI or much better, a tool where I can put in color codes and receive a back such a list. A very small, concrete example of a list of tokens I mean can be found the already mentioned https://github.com/albi005/MaterialColorUtilities, i.e.

<Application.Resources>
<Color x:Key="Primary" />
<Color x:Key="PrimaryContainer" />
<Color x:Key="Secondary" />
<Color x:Key="SecondaryContainer" />
[...]

Also both the mentioned tools XAML Theme Editor and Fluent Theme Designer (https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html) has an option to export such a list of color tokens. With the caveat that XAML Theme editor is a bit dated and Fluent Design Theme Editor does not give XAML.

Yet another example is https://m3.material.io/theme-builder#/custom.

So the benefit is that one defines some main colors and the tool creates tens of other colors coded as tokens so that they're easier to map into components where needed, since they are descriptive. At minimum it would be nice to have such a descriptive list where one could plug in color codes.

However, I think @LanceMcCarthy-4786 explained at https://gist.github.com/LanceMcCarthy/4954ab92ca44c19eb4316d9d683efd50?permalink_comment_id=4258132#gistcomment-4258132 @LanceMcCarthy-4786 quite well this and I seem to concur with him. There does not seem to exist a list like this nor a tool to do it. But one can e.g. take Fluent Design Theme Editor and translate the tokens it generates to XAML. It may be that Fluent Design Theme Editor has option to export to XAML in the future: https://github.com/microsoft/fluentui/pull/23994.

Over at that linked thread on Lance's gist, I explain also some more nuanced issues, such as overwriting system XAML, picking AcrylicBrush or other such things for which it would help to have a list of color tokens that one can then map to UI components. E.g. using Acrylic brush for backgroun colors since that seem to be the Fluent Design style.

Fluent-xaml-theme-editor is working for UWP platform, for WinUI3, you could use microsoft/WinUI-Gallery.

So that's not what I'm looking for. I'd like someting to define colors an export them to XAML. Maybe it'll come sometime in the future, as per https://github.com/microsoft/fluentui/pull/23994.

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

YonglunLiu-MSFT · 5 days ago

Thanks a lot for your detailed sharing.

0 ·

question