Material Design In XAML

HomeNewsF1ixdoobryTestimonials

Material Design In XAML Toolkit

Welcome the one of the most comphrensive and easy to use Material Design UI libraries across any platform.

With Material Design In XAML Toolkit you can easily bring beautiful desktop applications to life, using a modern and popular design language.

Fully open source and one of the most popular GUI libraries for WPF, the library is also compatible with MahApps and Dragablz.

Star

Features

  • Styles and variations for the majority of standard WPF controls
  • Many more additional controls to support the Material Design aesthetic and flow
  • Easy configuration of Material Design Colour palettes at both design and run time
  • Transitions API for easy build GUI animations
  • Works stand-alone, and also compatible with other popular WPF frameworks, MahApps and Dragablz
  • MVVM framework agnostic
GitHub & Demo Gitter & Chat Nuget & Lib

Standard WPF Control Styles

Material Design Specific Controls

In addition to standard control themes the kit contains new controls to help deliver a full Material Design experience, including: clocks, drawers, dialogs, floating action buttons, chips, and more.

DEMO & SOURCE

Two demos are included in the source code, which can be downloaded from GitHub and run with VS2015 and above.

SHOWCASE: F1ix

F1ix uses the Transitions API to bring alive various statistics about Formula 1 racing.

SHOWCASE: DOOBRY

doobry, a SQL editor for Azure's DocumentDb NoSQL database utilises the toolkit to produce a fluid, bold, and engaging interface.

GETTING STARTED

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
GitHub & Demo Gitter & Chat Nuget & Lib