Material Design In XAML

Getting started bringing Material Design to your WPF apps takes minutes, follow this guide and dive in, and if you want, join our community. This is our “super quick start” guide. A more comprehensive getting started guide can be found on our Wiki, and we highly recommend you download and run the demo application contained within the source code.

Start a new project, and install from NuGet. From the Package Manager Console in Visual Studio type:


PM> Install-Package MaterialDesignThemes


Edit your App.xaml as follows:


<?xml version="1.0" encoding="UTF-8"?>

<Application . . .>

  <Application.Resources>

    <ResourceDictionary>

      <ResourceDictionary.MergedDictionaries>

        <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" />

      </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>

  </Application.Resources>

</Application>


Edit MainWindow.xaml to following:


<Window . . .

     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

     TextElement.Foreground="{DynamicResource MaterialDesignBody}"

     TextElement.FontWeight="Regular"

     TextElement.FontSize="13"

     TextOptions.TextFormattingMode="Ideal"

     TextOptions.TextRenderingMode="Auto"

     Background="{DynamicResource MaterialDesignPaper}"

     FontFamily="{DynamicResource MaterialDesignFont}">

  <Grid>

    <materialDesign:Card Padding="32" Margin="16">

      <TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock>

    </materialDesign:Card>

  </Grid>

</Window>


Hit F5, viola!

What next?