Creating Modern WPF Apps with MahApps.Metro

Learn how to give your WPF applications a "modern" or "Metro" look and feel with the help of the open source library MahApps.Metro.
Course info
Rating
(157)
Level
Intermediate
Updated
May 7, 2015
Duration
2h 53m
Table of contents
Modern WPF Applications
MahApps.Metro and the MetroWindow
Common Input Controls
Item Selection and Content Controls
Metro Dialogs and Flyouts
Colors, Icons, and Resources
Modern UI Charts
Taking It Further
Description
Course info
Rating
(157)
Level
Intermediate
Updated
May 7, 2015
Duration
2h 53m
Description

In this course, we learn how the open source library MahApps.Metro can be used to give your WPF applications a "modern" or "Metro" look and feel. We start off by seeing how to convert an ordinary WPF application to use MahApps.Metro, and then explore the various enhancements and style updates for common controls. We also learn how to show custom dialogs and flyouts, how to update the color theme of your application, and how to use icon buttons. Finally, we use another open source library, Modern UI Charts, to allow us to display nice looking charts.

About the author
About the author

Mark Heath is a software developer based in Southampton, England, working for NICE Systems as a software architect creating cloud based digital evidence management systems for the police. He is the creator of NAudio, an open source audio framework for .NET.

More from the author
More courses by Mark Heath
Section Introduction Transcripts
Section Introduction Transcripts

Modern WPF Applications
Hi, my name's Mark Heath, and welcome to this Pluralsight course in which we'll be learning about how to create modern looking WPF applications using the MahApps. Metro open source library. In this first module, I'll be explaining what we mean by a Modern or Metro-style of Window's application. We'll be asking why we'd want to create them and what options are available to us for doing this in WPF. We'll also learn what MahApps. Metro is and how it helps us achieve the modern look that we're after. And finally, we'll introduce the demo application that we'll be working with throughout this course, which is a fairly plain-looking WPF application for tracking sports results. And we'll be giving it a fresh lick of paint, thanks to the magic of MahApps. Metro. So, let's get started.

MahApps.Metro and the MetroWindow
Hi, my name's Mark Heath. And in this module, we're going to be learning how we can get started with MahApps. Metro and add it to an existing application. So in this module, I'll show you how to add the MahApps. Metro reference to your projects, and also how you can covert an existing WPF application to use the MahApps. Metro styles. Obviously, there's nothing stopping you using MahApps. Metro right from the beginning of your project, and if you do so, you'll make life a little bit easier for yourself. But I suspect that many of you will already have some applications that could do with a little bit of freshening up visually. And so I want to show how easy it is to introduce MahApps. Metro into an existing project. In this module, we'll be focusing in particular on the MetroWindow class, and we'll see how we can control various settings relating to its border style, title bar, and we'll also see how you can add a status bar.

Common Input Controls
Hi, my name's Mark Heath, and welcome to this module, in which we'll be learning about using Common Input Controls, with MahApps. Metro. Now we saw in the last module, that simply by importing the MahApps. Metro resource dictionaries into our App. xaml, all the controls in our application got a new style. So we saw that buttons, checkboxes, and date pickers, automatically took on the new look and feel. But MahApps. Metro actually offers us the ability to customize things further, if we so desire. So in this module, we'll learn about the various button styles that MahApps. Metro offers, and how you can choose which ones you want to use. We'll also see how you can use toggle switches, or toggle buttons, instead of checkboxes if you want to. We'll also be seeing some nice extensions that MahApps. Metro provides for textbox entry, allowing you to add a watermark, and icon buttons for clearing the text or triggering other features. And while we're here, we'll also have a look at sliders. And of course, we'll be updating our ScoreKeeper demo application as we go along, so you can see exactly what you need to do, to make use of the features we'll be discussing. But we'll start off by learning about the MahApps. Metro demo application, which is a great way of quickly exploring the range of functionality offered by the library.

Item Selection and Content Controls
Hi, my name's Mark Heath, and you're watching the Creating Modern WPF Applications with MahApps. Metro course. In this module we're going to be looking at item selection and content controls. Now it's very common in WPF applications that you want to present lists of data to the user. This might be a list of options to choose from, in which case you might use a combobox, or it might be a list where you want the user to be able to view multiple items at once, in which case you might use a listbox. If the data is hierarchical you might go for something like a tree view. So we're going to start off this module by having a look at the options that MahApps. Metro offers for styling these various data selection controls. And for the most part it will be quite straightforward as you'll still be using the same WPF controls you're already familiar with. Also in this module we're going to be learning about the tab control, which gets a radical makeover in MahApps. Metro compared to the way default WPF tab controls work. It can be an excellent choice for allowing your users to navigate between different screens. We'll be updating our ScoreKeeper demo application to make use of the tab control for navigation. And along the way we'll be seeing a few content controls. That is controls that are designed to contain other controls such as the WPF scrollviewer and groupbox and a new control that MahApps. Metro offers called a transitioning content control, which allows you to animate content in and out. So let's get started.

Taking It Further
Hi, my name's Mark Heath, and this is the final module in our Creating Modern WPF Applications with MahApps. Metro Course. If you've been following along with this course, then you'll have seen already how you can give your WPF applications a modern, or metro look and feel by using the styles and controls from MahApps. Metro, and the charts from the Modern UI Charts library. And in this final, brief module, we'll wrap up by pointing you towards a few resources you'll find helpful if you choose to use MahApps. Metro for your own applications. So what will we cover in this module? Well, although I've shown you almost all the features of MahApps. Metro, there are few additional things included in the library that weren't really needed in our scorekeeper demo application. So we'll a quick look at the bits we've missed out. Then, I'll also show you several great resources you can turn to if you want more help with learning how to use the MahApps. Metro library. I'll also be recommended a few relevant courses here on Pluralsight for you to learn about other WPF techniques that can be used alongside MahApps. Metro. And finally, although we already saw a few ways to get hold of icons for your WPF applications, I'll also be pointing you in the direction of a really great free tool that will give you access to even more useful icons.