Convert Figma logo to code with AI

MaterialDesignInXAML logoMaterialDesignInXamlToolkit

Google's Material Design in XAML & WPF, for C# & VB.Net.

15,996
3,491
15,996
168

Top Related Projects

29,219

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Dragable and tearable tab control for WPF

2,609

Modern UI for WPF

Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.

Modern styles and controls for your WPF applications

Quick Overview

MaterialDesignInXamlToolkit is a comprehensive library for implementing Google's Material Design in WPF applications. It provides a rich set of controls, styles, and themes that adhere to Material Design principles, allowing developers to create modern and visually appealing user interfaces with ease.

Pros

  • Extensive collection of Material Design-compliant controls and styles
  • Regular updates and active community support
  • Seamless integration with existing WPF projects
  • Customizable themes and color schemes

Cons

  • Learning curve for developers new to Material Design concepts
  • Some advanced customizations may require in-depth knowledge of the library
  • Potential performance impact on large-scale applications with heavy use of animations

Code Examples

  1. Setting up the Material Design theme in App.xaml:
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
  1. Creating a Material Design button with an icon:
<Button Style="{StaticResource MaterialDesignRaisedButton}"
        Content="SUBMIT"
        ToolTip="Submit the form">
    <Button.Icon>
        <materialDesign:PackIcon Kind="Send" />
    </Button.Icon>
</Button>
  1. Implementing a Material Design card:
<materialDesign:Card Padding="32" Margin="16">
    <StackPanel>
        <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
            Card Title
        </TextBlock>
        <TextBlock Style="{DynamicResource MaterialDesignBody2TextBlock}" Margin="0 8 0 0">
            Card content goes here.
        </TextBlock>
    </StackPanel>
</materialDesign:Card>

Getting Started

  1. Install the NuGet package:

    Install-Package MaterialDesignThemes
    
  2. Add the following to your App.xaml:

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
    
  3. Add the namespace to your XAML files:

    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    
  4. Start using Material Design controls and styles in your WPF application!

Competitor Comparisons

29,219

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Pros of Avalonia

  • Cross-platform support for Windows, macOS, Linux, iOS, Android, and WebAssembly
  • Modern, flexible UI framework with XAML-based design
  • Active development and growing community

Cons of Avalonia

  • Steeper learning curve for developers new to XAML-based frameworks
  • Smaller ecosystem and fewer third-party controls compared to WPF

Code Comparison

MaterialDesignInXamlToolkit (XAML):

<Button Style="{StaticResource MaterialDesignRaisedButton}"
        Content="ACCEPT" />

Avalonia (XAML):

<Button Classes="accent"
        Content="ACCEPT" />

Both frameworks use XAML for UI design, but Avalonia's syntax is more streamlined and platform-agnostic. MaterialDesignInXamlToolkit focuses on providing Material Design-styled controls for WPF applications, while Avalonia offers a complete cross-platform UI framework with its own styling system.

Avalonia's main advantage is its cross-platform capabilities, allowing developers to create applications that run on multiple operating systems and devices. However, MaterialDesignInXamlToolkit excels in providing a comprehensive set of Material Design controls and themes specifically for WPF applications, which may be preferable for Windows-focused projects.

Developers choosing between these frameworks should consider their target platforms, design requirements, and existing expertise in XAML-based technologies.

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.

Pros of MahApps.Metro

  • More established and mature project with a longer history
  • Wider range of controls and features out-of-the-box
  • Better integration with Windows-specific UI elements

Cons of MahApps.Metro

  • Less adherence to Material Design principles
  • Slower adoption of modern design trends
  • More complex theming system compared to MaterialDesignInXamlToolkit

Code Comparison

MahApps.Metro:

<Controls:MetroWindow x:Class="MainWindow"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    Title="MahApps.Metro Window" Height="600" Width="800">
    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Button Content="Settings" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>
</Controls:MetroWindow>

MaterialDesignInXamlToolkit:

<Window x:Class="MainWindow"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    Title="Material Design Window" Height="600" Width="800">
    <materialDesign:Card Padding="32" Margin="16">
        <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
            Hello, Material Design!
        </TextBlock>
    </materialDesign:Card>
</Window>

Dragable and tearable tab control for WPF

Pros of Dragablz

  • Focused on providing advanced tab control functionality, including docking and layout features
  • Lightweight and specialized, making it easier to integrate for specific tab-related needs
  • Offers unique features like tab tearing and docking that are not present in MaterialDesignInXamlToolkit

Cons of Dragablz

  • Limited scope compared to MaterialDesignInXamlToolkit, which offers a comprehensive Material Design implementation
  • Less active development and community support
  • Requires more custom styling to achieve a cohesive Material Design look

Code Comparison

Dragablz tab control implementation:

<dragablz:TabablzControl>
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController />
    </dragablz:TabablzControl.InterTabController>
    <TabItem Header="Tab No. 1" IsSelected="True">
        <TextBlock>Hello World</TextBlock>
    </TabItem>
</dragablz:TabablzControl>

MaterialDesignInXamlToolkit tab control implementation:

<materialDesign:Card>
    <TabControl Style="{StaticResource MaterialDesignTabControl}">
        <TabItem Header="Tab No. 1">
            <TextBlock>Hello World</TextBlock>
        </TabItem>
    </TabControl>
</materialDesign:Card>

Both libraries offer unique features and cater to different needs. Dragablz excels in advanced tab control functionality, while MaterialDesignInXamlToolkit provides a comprehensive Material Design implementation for WPF applications.

2,609

Modern UI for WPF

Pros of MUI

  • Lightweight and minimalistic design, focusing on core Material Design principles
  • Easier to customize and extend due to its simpler architecture
  • Better performance for smaller applications with fewer components

Cons of MUI

  • Less comprehensive component library compared to MaterialDesignInXamlToolkit
  • Fewer built-in themes and color options
  • Less active community and fewer updates

Code Comparison

MUI:

<mui:ModernWindow x:Class="MainWindow"
    xmlns:mui="http://firstfloorsoftware.com/ModernUI"
    Title="MUI Example" Style="{StaticResource BlankWindow}">
    <mui:ModernFrame Source="/Pages/Home.xaml" />
</mui:ModernWindow>

MaterialDesignInXamlToolkit:

<Window x:Class="MainWindow"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    TextElement.Foreground="{DynamicResource MaterialDesignBody}"
    Background="{DynamicResource MaterialDesignPaper}">
    <materialDesign:Card Padding="32" Margin="16">
        <TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
            Hello, Material Design!
        </TextBlock>
    </materialDesign:Card>
</Window>

Both libraries offer Material Design-inspired components for WPF applications, but MaterialDesignInXamlToolkit provides a more extensive set of controls and styling options. MUI is better suited for simpler projects or those requiring a lighter footprint, while MaterialDesignInXamlToolkit is ideal for larger applications needing a wide range of pre-built components and theming capabilities.

Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.

Pros of MaterialSkin

  • Simpler implementation for basic Material Design elements
  • Lightweight and easy to integrate into existing WinForms projects
  • Faster rendering performance for simpler UI components

Cons of MaterialSkin

  • Limited to Windows Forms applications
  • Fewer customization options compared to MaterialDesignInXamlToolkit
  • Less frequent updates and smaller community support

Code Comparison

MaterialSkin:

MaterialSkinManager.Instance.AddFormToManage(this);
MaterialSkinManager.Instance.Theme = MaterialSkinManager.Themes.LIGHT;
MaterialSkinManager.Instance.ColorScheme = new ColorScheme(Primary.Blue400, Primary.Blue500, Primary.Blue500, Accent.LightBlue200, TextShade.WHITE);

MaterialDesignInXamlToolkit:

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

MaterialDesignInXamlToolkit offers more extensive theming options and is designed for WPF applications, while MaterialSkin provides a simpler approach for Windows Forms projects. The code comparison shows the different setup processes, with MaterialSkin using C# for configuration and MaterialDesignInXamlToolkit utilizing XAML resources.

Modern styles and controls for your WPF applications

Pros of ModernWpf

  • Focuses on providing a modern Windows 10/11 look and feel, closely mimicking native UI
  • Lighter weight and potentially easier to integrate into existing projects
  • Includes built-in support for dark mode and high contrast themes

Cons of ModernWpf

  • Less extensive component library compared to MaterialDesignInXamlToolkit
  • May not be as suitable for projects requiring a more customized or branded appearance
  • Less active community and fewer contributors

Code Comparison

MaterialDesignInXamlToolkit:

<Button Style="{StaticResource MaterialDesignRaisedButton}"
        Content="ACCEPT" />

ModernWpf:

<Button Style="{StaticResource AccentButtonStyle}"
        Content="Accept" />

Both libraries offer custom styles for common WPF controls, but MaterialDesignInXamlToolkit tends to use more descriptive style names, while ModernWpf often aligns closer to default WPF naming conventions with a focus on Windows 10/11 styling.

MaterialDesignInXamlToolkit provides a wider range of pre-built components and more extensive customization options, making it suitable for projects requiring a distinct Material Design look. ModernWpf, on the other hand, excels at providing a native Windows 10/11 appearance with minimal setup, making it ideal for applications that aim to blend seamlessly with the operating system's UI.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Material Design 3 demo app screenshots

Buttons Cards Chips Colortool Colorzones Comboboxes Datagrids Dialogs Drawer Elevation Expander Fields Fieldslineup Groupboxes Home Iconpack Lists Menustoolbars Navigationbar Navigationrail Pallete Pickers Progressindicators Ratingbar Slider Snackbar Toggles Tooltips Transitions Trees Typography

Material Design 2 demo app screenshots

[!WARNING] The screenshots below are taken from the Material Design 2 demo app. Material Design 3 is the latest version, so the UI shown here may differ from the latest design.

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 Colorzones Datagrids Drawer Expander Fieldslineup Navigationrail NumericUpDown Ratingbar Tabs Tooltips Transitions

More examples

FAQ

Contributing

Before contributing code read the Contribution Guidelines

Want to say thanks? 🙏🏻

  • Hit the :star: star :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.