December 5, 2023

wall papers

Your Dream House

Material Design In XAML

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?


There’s several things you will want to think about; your palette, the structure of your UI, and what additional features can Material Design in XAML Toolkit bring to your application?


There’s plenty to explore to get your creativity in gear. We strongly suggest you download the demo and have an explore around all the things on offer; new styles, controls, transitions, dialogs and more. It’s also worth checking out some of the articles on the Wiki.


Lastly, you can join the Gitter chantroom; stop by, say hello, and ask for help….everyon is welcome!

  • To download the source and included demo, visit GitHub
  • To chat visit Gitter

Source Article