Skip to content

Material Design 3 Roadmap #2475

Open
Open
@Keboo

Description

@Keboo

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.

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.<ControlName>.xaml

High level changes

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

Tasks

  • Create a copy of the MaterialDesignTheme.Defaults.xaml resource dictionary, it should be called MaterialDesign2.Defaults.xaml.
  • 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

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

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

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

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

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

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

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

This is a control has not been implemented. Though happy to accept a PR for it, not a requirement for initial release.

Navigation rail

This is largely done, just a few minor updates to how the selected item appears.

Tasks

  • Create Navigation rail style

Top app bar

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions