Skip to content

MaterialDesignInXAML/MaterialDesignInXamlToolkit

Repository files navigation

Material Design In XAML Toolkit Logo of Material Design in XAML

NuGet-Themes NuGet-Colors

NuGet-Themes-CI NuGet-Colors-CI

Backers on Open Collective Sponsors on Open Collective Chat Issues

Comprehensive and easy to use Material Design theme and control library for the Windows desktop (WPF).

  • Material Design styles for all major WPF Framework controls
  • Additional controls to support the theme, including Multi Action Button, Cards, Dialogs, Clock
  • Easy configuration of palette (at design and runtime), according to Google's guidelines
  • Full Material Design Icons icon pack
  • Easy transition effects
  • Compatible with Dragablz, MahApps
  • Demo applications included in the source project

See screenshots

Table of contents

Getting started

Note

See the full starting guide for more in-depth information.

This quick guide assumes you have already created a WPF project and are using Microsoft Visual Studio 2022.

  • Install the toolkit through the visual NuGet package manager in Visual Studio or use the following command:
Install-Package MaterialDesignThemes
  • Alter your App.xaml
<Application 
  x:Class="Example.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />

                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" /> 
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
  • If you want to target Material Design 3, alter the ResourceDictionary line in the snippet above to use MaterialDesign3.Defaults.xaml.

  • Alter your MainWindow.xaml

<Window [...]
  Style="{StaticResource MaterialDesignWindow}"
  [...] >

Building the source

To build the project, following is required:

  • Microsoft Visual Studio 2022
  • .NET desktop development workload

This repository also contains 3 different demo applications:

  • MaterialDesignDemo - Reference WPF app with Material Design 2 styling, this contains all controls and is a recommended tool when developing apps with this library
  • MaterialDesign3Demo - Reference WPF app with Material Design 3 styling, under development
  • MahAppsDragablzDemo - Demo app for combining with Dragablz and MahApps

Screenshots

Warning

The screenshots below are taken from the Material Design 2 demo app. It is possible that these are out of date. Run the demo app from latest source to see the latest version.

Show images

Screenshot of WPF Material Design 2 demo application home page Buttons Toggles Fields ComboBoxes Palette Color Tools Pickers Icons Cards Menus and Toolbars Progress Bars Dialogs Lists Tree View Sliders Chips Typography Group Box Snackbars Elevation

More examples

Contributing

Before contributing code read the Contribution Guidelines

Want to say thanks? 🙏🏻

  • Hit the ⭐ star ⭐ button
  • If you'd like to make a very much appreciated financial donation please visit open collective

This project exists thanks to all the people who contribute.

Mentions

Backers

Thank you to all our backers! 🙏 Become a backer.

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor.