MaterialDesignInXAML / MaterialDesignInXAML/MaterialDesignInXamlToolkit

Material Design 3 Roadmap

Open
#2,475 8 comments 20 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement release notes up-for-grabs visual breaking change
Dominant language
C#
Stars
16.3k
Forks
3.5k
Avg merge
1d 22h
Merged PRs (30d)
8

Description

Google has release Material Design 3. The intent here is to outline the needed work to support it in this library.

You can find the latest details [here](https://m3.material.io/).

All of the tasks listed here can be considered up for grabs and I am happy to accept PRs for any of them.

New control resource dictionaries should be named as:
`MaterialDesign3..xaml`

## High level changes
At a minimum these tasks and the color changes need to be implemented to start releasing these new styles.

#### Tasks

- [x] Create a copy of the `MaterialDesignTheme.Defaults.xaml` resource dictionary, it should be called `MaterialDesign2.Defaults.xaml`.
- [x] Create a new top level resource dictionary along side `MaterialDesignTheme.Defaults.xaml` it should be called `MaterialDesign3.Defaults.xaml`. For all of the new M3 styles, they should get referenced by this resource dictionary.

### [Color](https://m3.material.io/styles/color/overview)

This library already support some amount of the new Dynamic Colors, will need to evaluate the M3 implementation to determine how viable it will be to implement here as well.

Because the color brushes are all going in the same code path (ie will be treated and available at the app level), there will be some un-used brushes depending on which control styles are being used.

#### Tasks

- [ ] Add tertiary color to the theme classes
- [ ] Add container brushes for primary, secondary, and tertiary colors
- [ ] Add neutral color brushes. Evaluate if the "Surface" ones are actually needed (I suspect we can simply use the background brushes instead).

### [Typography](https://m3.material.io/styles/typography/overview)

There is another font Noto Sans that could be included in this library. Right now the fonts make up a significant percentage of size, this would add approximately 1.3MB. Alternatively we could pull fonts out, and make them opt-in with a csproj flag or similar. I am interested in hearing feedback on this, not sure if file size of the assembly matters much to people.

#### Tasks

- [ ] Create a copy of the existing `MaterialDesignFontExtension` and name it `RobotoFontExtension`. `MaterialDesignFontExtension` should be marked as obsolete.
- [ ] Create a new `NotoFontExtension` (similar to the one above) and include the Noto Sans font files.

### [Buttons](https://m3.material.io/components/all-buttons)
This will be the largest portion of the work as there is quite a bit to do.

#### Tasks

- [ ] Create style for Elevated button
- [ ] Create style for Filled button
- [ ] Create style for Filled tonal button (I suspect the template can be shared with the one for Filled button).
- [ ] Create style for Outline button
- [ ] Create style for Text button. This will be the same style used for Icon button. Simply replace the content of the button with a PackIcon.
- [ ] Create style for Floating action button (FAB). Be aware that this style should be expected to accommodate the sizing changes documented for the Extended FAB as well.

### [Cards](https://m3.material.io/components/cards/overview)
The cards here are not that different from the ones in the existing library. We should still copy the style into a new M3 card resource dictionary, but it may initially be the same as the M2 version.

#### Tasks

- [ ] Create style for Elevated card.
- [ ] Create style for Filled card.
- [ ] Create style for Outlined card.

### [Chips](https://m3.material.io/components/chips/overview)
Most of this functionality should already be in place. Just the colors and the corner radius look to be the big differences.

For all of these styles, I suspect a single template could be shared as the look and elements of each of these is pretty similar.

#### Tasks

- [ ] Create style for Assist chip
- [ ] Create style for Filter chip
- [ ] Create style for Input chip
- [ ] Create style for Suggestion chip

### [Dialogs](https://m3.material.io/components/dialogs/overview)
For the most part, the dialogs are already done. This library only supports the "Basic dialog" not the "Full screen dialog". For the most part, none of the new features of the dialog affect the DialogHost (our implementation) directly.

### [Navigation Bar](https://m3.material.io/components/navigation-bar/overview)
This is a control has not been implemented. Though happy to accept a PR for it, not a requirement for initial release. See #652 for details.

### [Navigation Drawer](https://m3.material.io/components/navigation-drawer/overview)
This is a control has not been implemented. Though happy to accept a PR for it, not a requirement for initial release.

### [Navigation rail](https://m3.material.io/components/navigation-rail/overview)
This is largely done, just a few minor updates to how the selected item appears.

#### Tasks

- [ ] Create Navigation rail style

### [Top app bar](https://m3.material.io/components/top-app-bar/overview)
This is a control has not been implemented, nor do I believe a very useful control for WPF apps. Happy to hear suggestions and use cases if you think otherwise.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing MaterialDesignTheme.Defaults.xaml resource dictionary and the planned MaterialDesign3.Defaults.xaml entry point, then choose one unchecked component or color task. Compare the relevant existing styles, theme classes, or font extensions with the Material Design 3 guidance; done means the selected M3 resource or style is added and referenced by the new defaults dictionary.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
design, desktop
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.