Skip to content

Material Design 3 Roadmap #2475

New issue
New issue
Open
Open
Material Design 3 Roadmap#2475
Labels
enhancementrelease notesItems are likely to be highlighted in the release notes.up-for-grabsvisual breaking changeItems here have affected the visual look of controls.

Description

@Keboo
Keboo
opened on Oct 29, 2021

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.

Activity

  1. Keboo
    added
    enhancement
    visual breaking changeItems here have affected the visual look of controls.
    on Oct 29, 2021
  2. Keboo
    pinned this issue on Oct 29, 2021
  3. Keboo
    added
    release notesItems are likely to be highlighted in the release notes.
    up-for-grabs
    on Oct 31, 2021

  4. MichelMichels commented on Dec 16, 2021

    @MichelMichels
    MichelMichels
    on Dec 16, 2021
    Member

    In previous PR, you said:

    As for the namespace I think we want to keep it as MaterialDesignTheme.Wpf. I think the goal will be to have the Material Design 3 templates being able to be used on the same controls along side the Material Design 2 templates.

    Do you want to support both styles at once? Because I'm currently replacing each ResourceDictionary, not appending them.

  5. Keboo commented on Dec 16, 2021

    @Keboo
    Keboo
    on Dec 16, 2021
    MemberAuthor

    @MichelMichels Yes, let me see if I can explain better. Part of not changing or duplicating the namespace is to try to keep some separation between the controls (code) and the Styles/Template (it matches the look-less nature of many WPF components).

    What I am imagining is something like this (obviously this does not work at the moment):

    <Window.Resources>
  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.TextBlock.xaml" />
  <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.TextBlock.xaml" />
</Window.Resources>

....

<TextBlock Style="{StaticResource MaterialDesign3.DisplayLargeTextBlock}" />
<TextBlock Style="{StaticResource MaterialDesign2.DisplayLargeTextBlock}" />

    One thing that would go along with that would be adding (not renaming) additional styles with those different key names. The reason for wanting to add additional keys, rather than renaming is to both keep people's existing code working, as well as to make it easy for someone to toggle Material Design 3 styles on by simply adding MaterialDesign3.Defaults.xaml last in the App.xaml.

    So for someone's app to "update" to include MD3, my hope would be that they change their App.xaml
    From:

                    <materialDesign:BundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Lime"
                                             ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

    To:

                    <materialDesign:BundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Lime"
                                             ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />

    This second point I believe is exactly what your existing work accomplishes (which is great!).

    Hopefully that makes more sense, and thank you for all of your help!

  6. MichelMichels commented on Dec 20, 2021

    @MichelMichels
    MichelMichels
    on Dec 20, 2021
    Member

    Thanks for the explanation.

    How would you handle naming changes for Typography? I'm singling this issue out as I already implemented the Material 3 typography styles for TextBlock and I noticed they are different from the Material 2 guidelines.

    Wouldn't it be confusing mixing those 2 typography set of styles? On the other hand, if the route of separation is choosen, this would be a fairly large breaking change.

  7. Keboo commented on Dec 21, 2021

    @Keboo
    Keboo
    on Dec 21, 2021
    MemberAuthor

    Good question. So initially when I wrote that, my intention had been to make it so that someone could easily switch over by simply changing their "default" resource dictionary. However, I am realizing now, that is somewhat wishful thinking, as they will also need to go through and update any merged resource dictionaries that are pointing to MaterialDesignTheme.TextBlock.xaml. Thinking on it more, I am realizing we should probably update MD3 styles that you did to the newer naming (MaterialDesign3.*) and not continue to propagate the older names. This will make updating for people a little more painful, but I have some thoughts on potentially producing some automation to help with it. In short, I think going with a hard separation with the MD3 stuff is probably best.

    In one of the next 4.x releases, I would love to create additional styles with the better name. Something like this:

    <Style
    TargetType="{x:Type TextBlock}"
    x:Key="MaterialDesign2.BodySmallTextBlock">
    <Setter
    Property="FontWeight"
    Value="Regular" />
    <Setter
    Property="FontSize"
    Value="12" />
    <Setter
    Property="LineHeight"
    Value="16" />
</Style>
<Style
    TargetType="{x:Type TextBlock}"
    x:Key="MaterialDesignBodySmallTextBlock"
    BasedOn="{StaticResource MaterialDesign2.BodySmallTextBlock}" />

    That way the old style keys continue to work, but it also allows people the opportunity to use the newer ones if they wish. At some point in the future the old styles could be deleted. I would probably put a copy of the old style keys in the Release notes or similar, so if it did end up being a large breaking change for someone, they could simply pull that into their project and continue working.

    I am already queuing up breaking changes that will come in the library in the 5.0.0 release, so there is a bit of a decision to make as to exactly when this breaking change should occur. If it is ready (or close to ready) then I might just make it a bigger release and do it all at once (I keep saying that I want to do more frequent smaller releases, and then fail miserably at it...). Otherwise, I think the plan will be to bring in those breaking changes in a 6.0 timeframe.

  8. MichelMichels commented on Dec 21, 2021

    @MichelMichels
    MichelMichels
    on Dec 21, 2021
    Member

    @Keboo I like the MaterialDesign3.* naming convention.

    Maybe we should consider putting the work for Material Design 3 on a different branch as to not clutter the current project until most standing questions are resolved? Or at least communicate that it's currently a WIP.

  9. Keboo commented on Dec 21, 2021

    @Keboo
    Keboo
    on Dec 21, 2021
    MemberAuthor

    I am fine leaving it in for now. For any releases that go out before this item is resolved I will make sure it is noted as a WIP.

  10. ElieTaillard
    added this to MDIX - Issues Managementon Jun 29, 2022
  11. ElieTaillard
    removed this from MDIX - Issues Managementon May 26, 2023

  12. AmeerMansour commented on Jan 10, 2025

    @AmeerMansour
    AmeerMansour
    on Jan 10, 2025

    just a recommendation to make v3 in a new clean repo which will take more time now but will save time in the future !
    i hope you consider it !

  13. MovGP0 commented on Sep 8, 2025

    @MovGP0
    MovGP0
    on Sep 8, 2025
    Contributor

    I'd like to also include dynamic color palettes. To do so, we would need to port the code in the material-color-utilities project.

  14. MovGP0
    added 3 commits that reference this issue on Sep 9, 2025

    Porting material-color-utilities to dotnet MaterialDesignInXAML#2475

    763999d

    Porting material-color-utilities to dotnet MaterialDesignInXAML#2475

    33e1ebd

    Porting material-color-utilities to dotnet MaterialDesignInXAML#2475

    a2f825d
  15. MovGP0
    added a commit that references this issue on Sep 23, 2025

    Porting material-color-utilities to dotnet MaterialDesignInXAML#2475

    c160605
  16. Keboo
    added a commit that references this issue on Oct 10, 2025

    Porting material-color-utilities to dotnet #2475 (#3920)

    8304e64
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementrelease notesItems are likely to be highlighted in the release notes.up-for-grabsvisual breaking changeItems here have affected the visual look of controls.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions