--- title: "WPF Metro Part 2 - MahApps Metro - Muhammad Rehan Saeed" description: "MahApps Metro is an excellent Windows Presentation Foundation (WPF) SDK providing Metro styles for built in WPF controls and several custom controls." canonical_url: "https://rehansaeed.com/wpf-metro-part2-mahapps-metro/" last_updated: "2014-03-02T00:00:00+00:00" meta: author: "Muhammad Rehan Saeed" keywords: ".NET,C#,Metro,Modern,SDK,UI,User Interface,Windows Presentation Foundation,WPF,XAML" "og:description": "MahApps Metro is an excellent Windows Presentation Foundation (WPF) SDK providing Metro styles for built in WPF controls and several custom controls." "og:image": "https://rehansaeed.com/_og/s/o_f5e7ac59509f3f88.png" "og:image:alt": "WPF Metro Part 2 - MahApps Metro - Muhammad Rehan Saeed" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "WPF Metro Part 2 - MahApps Metro" "twitter:image": "https://rehansaeed.com/_og/s/o_f5e7ac59509f3f88.png" "twitter:image:alt": "WPF Metro Part 2 - MahApps Metro - Muhammad Rehan Saeed" --- > Index of every page on this site: [llms.txt](https://rehansaeed.com/llms.txt) # [WPF Metro Part 2 - MahApps Metro](https://rehansaeed.com/wpf-metro-part2-mahapps-metro/) Posted 2 March 2014 - **3 min read** ![MahApps Metro](https://rehansaeed.com/_ipx/f_png&s_2560x1440/images/hero/MahApps-Metro-1366x768.png) 1. [WPF Metro - Modern UI for WPF](https://rehansaeed.com/wpf-metro-part1-modern-ui-for-wpf/) 2. [WPF Metro - MahApps Metro](https://rehansaeed.com/wpf-metro-part2-mahapps-metro/) 3. [WPF Metro - Elysium](https://rehansaeed.com/wpf-metro-part3-elysium/) 4. [WPF Metro - Elysium Extra](https://rehansaeed.com/wpf-metro-part4-elysium-extra/) In these series of posts I'm going to do a quick review of a few different open source WPF Metro (Or Modern if you prefer) style SDK's. Each of them provides styles and new controls to build your WPF application from scratch. Here are the home pages for the open source projects in question where you can download the source code and the binaries to play with them yourself: - [Modern UI for WPF](https://mui.codeplex.com/) - [MahApps Metro](https://github.com/MahApps) - [Elysium](https://elysium.codeplex.com/) - [Elysium Extra](https://elysiumextra.codeplex.com/) # MahApps Metro Link to this section This is the second post in the series, I take a look at MahApps Metro. Again, this SDK provides a complete set of WPF styles and several custom controls, mostly inspired by the new Windows 8 WinRT applications. # Look and Feel Link to this section This SDK borrows heavily from the Windows 8 Metro design language. It provides fairly large controls (For desktop applications, Windows 8 seems to have larger buttons to be touch friendly) with fairly thick borders, which gives each control a more imposing look. There are lots of brushes used by this SDK and the developer has provided a nice colour swatch. ![MahApps Metro screenshot of the available brushes](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-8.png) The Window itself positively glows as the developer has spent a **lot** of time customizing the window drop shadow. The title bar of the window also stands out as it is highlighted in the applications accent colour. Theme support is built in, with light or dark combined with an accent colour as shown below. ![MahApps Metro screenshot of the button controls](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-1.png) ![MahApps Metro screenshot of the changed theme](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-13.png) # Custom Controls Link to this section ## ToggleSwitch Link to this section (See Above) Similar to the ToggleSwitch in Windows 8, this control provides an optional replacement for the standard CheckBox control. Every metro SDK seems to include this control. ## CircleButton Link to this section (See Above) Again this control borrows from the Windows 8 application bar buttons. A staple of all metro SDK's it seems. ## NumericUpDown Link to this section This is a great control that is sorely needed in most WPF applications. Internally it handles numbers of type Double but I suppose you could use a converter to work with Integer and other numeric types. ## Various TextBox Controls Link to this section There is a great selection of text box controls. They all seem to have the watermark capability (Again, a simple addition sorely missed in WPF). There is also the option of text boxes with buttons. ![MahApps Metro screenshot of the input controls](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-2.png) ## ProgressRing Link to this section A simple circular progress indicator control. I can stare at these things for hours. Very mesmerizing. ## Range Slider Link to this section The range slider is another great addition. It looks very much like the Slider control with an additional thumb button. ![MahApps Metro screenshot of the progress and slider controls](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-5.png) ## Various MessageDialog's and MessageBox's Link to this section This is a truly great message box. Instead of copying and restyling the standard Windows MessageBox, it has been totally reshaped and re-imagined ala Windows 8 to cover the entire parent Window. Not only that but you can place your own custom content in there. There are a few different options to choose from, the version below shows a text box. ![MahApps Metro screenshot of the message box](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-12.png) ## Flyout Link to this section This Windows 8 style fly-out control does what it says on the tin, it flies in and out of the side of the Window. A nice feature is that it covers the title bar of the window but the caption buttons are still overlayed above the fly-out control. ![MahApps Metro screenshot of the fly-out control](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-10.png) ## FlipView Link to this section This control also exists in Windows 8, although it works slightly differently. It allows you to view several items one at a time and provides next and previous buttons to cycle between them. ![MahApps Metro screenshot of the custom controls](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-9.png) # Source Code Link to this section I downloaded the source code hosted on GitHub and took it for a whirl. All the XAML is pretty well layed out and there is a fair amount of code in the project but that's expected as there are lots of custom controls to play with. There is only a single dependency on System.Windows.Interactivity, so you only need to add references to two DLL's to your projects. Looking at the discussion boards, there seems to be a fair amount of activity with the developers answering questions and even responding to feedback which is great to see. The last check-in was just four days ago at the time of writing so this project is still very much active. I can see this project getting better and better in the future. # Conclusions Link to this section Once again I'm very impressed with this SDK, it provides styles for all the standard WPF controls and takes a pretty good stab at bringing a lot of Windows 8 Metro controls to the desktop. It does all this while looking and feeling great. They even provide a NuGet package which is great. ![MahApps Metro screenshot of the calendar controls](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-3.png) ![MahApps Metro screenshot of the DataGrid control](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-7.png) ![MahApps Metro screenshot of the DataGrid control](https://rehansaeed.com/_ipx/f_png&s_2560x1440/content-images/posts/2014/wpf-metro-part2-mahapps-metro/images/MahApps-Metro-6.png) ## Web Mentions [What's this?](https://en.wikipedia.org/wiki/Webmention) ### 0 Linked ### 0 Replies ## GitHub Comments ### 10 Comments [Comment on GitHub](https://github.com/RehanSaeed/rehansaeed.github.io/issues/129) [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![vitaly](https://camo.githubusercontent.com/c9bdbbb29c0206a6d2bf982906a0c28e97a8a55ce4cd1cb527bbc027be1e76c0/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64616136666638353561303130356331323866646666346533386164646238613f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/c9bdbbb29c0206a6d2bf982906a0c28e97a8a55ce4cd1cb527bbc027be1e76c0/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64616136666638353561303130356331323866646666346533386164646238613f733d393626643d6d6d26723d67) **vitaly** commented on **2014-05-20 15:03:17** Good work, guys! [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![dogu](https://camo.githubusercontent.com/7ce6f61cb12813da2b862ceb7dff23caa1c68241f9a7fe8f63bf0b16dae574ec/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64656461356636333733383439333134656331363731336165353931646634623f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/7ce6f61cb12813da2b862ceb7dff23caa1c68241f9a7fe8f63bf0b16dae574ec/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64656461356636333733383439333134656331363731336165353931646634623f733d393626643d6d6d26723d67) **[dogu](http://dotnetcup.com/)** commented on **2014-05-23 18:50:48** Thank you, this is a very useful comparison... [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![kuswandanu](https://camo.githubusercontent.com/3d6e0abe59f2a88683ba6023cebfecabaab32bddb5121bbf5d97ea7ab1ef67b6/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f35303964656336343963666632386235613837313362643230656132336663633f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/3d6e0abe59f2a88683ba6023cebfecabaab32bddb5121bbf5d97ea7ab1ef67b6/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f35303964656336343963666632386235613837313362643230656132336663633f733d393626643d6d6d26723d67) **kuswandanu** commented on **2015-04-26 09:46:17** Terima kasih. ^^ [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Tim](https://camo.githubusercontent.com/2e2f5c7e1691d9898ce52982f5aef4dd68ad8c7a2c8184d65a5c5f31e3594877/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31313263316237303963323835666133616235343030373965616334396461363f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/2e2f5c7e1691d9898ce52982f5aef4dd68ad8c7a2c8184d65a5c5f31e3594877/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31313263316237303963323835666133616235343030373965616334396461363f733d393626643d6d6d26723d67) **Tim** commented on **2016-02-11 02:41:33** Why are your Elysium/MahApps/Modern UI videos private? They are excellent. I would like to see them again. [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Muhammad Rehan Saeed](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67) **[Muhammad Rehan Saeed](https://rehansaeed.com/)** commented on **2016-02-11 08:42:49** > Why are your Elysium/MahApps/Modern UI videos private? They are excellent. I would like to see them again. Sorry, must have done that by accident. [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Tim](https://camo.githubusercontent.com/2e2f5c7e1691d9898ce52982f5aef4dd68ad8c7a2c8184d65a5c5f31e3594877/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31313263316237303963323835666133616235343030373965616334396461363f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/2e2f5c7e1691d9898ce52982f5aef4dd68ad8c7a2c8184d65a5c5f31e3594877/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31313263316237303963323835666133616235343030373965616334396461363f733d393626643d6d6d26723d67) **Tim** commented on **2016-02-27 21:06:13** > Sorry, must have done that by accident. Thanks. Your videos introduced me to MahApps. I now use it with Caliburn.Micro for all my WPF/MVVM apps. [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Blas](https://camo.githubusercontent.com/9ff20e361e63ebbb8460de6b2847a36d83bef5da94e62033d814f99105d9df90/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31636466383665363839363264383635623866373639393432323538353035633f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/9ff20e361e63ebbb8460de6b2847a36d83bef5da94e62033d814f99105d9df90/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f31636466383665363839363264383635623866373639393432323538353035633f733d393626643d6d6d26723d67) **Blas** commented on **2016-03-16 07:38:51** How you can run the MahApps demo project? because I try and having too much errors. Thanks! [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Muhammad Rehan Saeed](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67) **[Muhammad Rehan Saeed](https://rehansaeed.com/)** commented on **2016-03-19 08:43:57** > How you can run the MahApps demo project? because I try and having too much errors. Thanks! Have a look at their GitHub page. [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Mohammed Tulba](https://camo.githubusercontent.com/49e5684cf90bb522e3c3f3a72ecfe5407102f1190240f1bae7c55dc65d4029bb/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64616237343162383037333530353161643839363132636332616239626535613f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/49e5684cf90bb522e3c3f3a72ecfe5407102f1190240f1bae7c55dc65d4029bb/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f64616237343162383037333530353161643839363132636332616239626535613f733d393626643d6d6d26723d67) **Mohammed Tulba** commented on **2017-05-10 11:56:52** Good work, is there any link for this demo source?? [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed) ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2020 [![Muhammad Rehan Saeed](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67)](https://camo.githubusercontent.com/8a07049df41b8a3839a3f4342f09ea8e6e7fa0065667687f04beca2d088a1dca/68747470733a2f2f7777772e67726176617461722e636f6d2f6176617461722f32623266393030653361633066353535316462646537323864336262343935343f733d393626643d6d6d26723d67) **[Muhammad Rehan Saeed](https://rehansaeed.com/)** commented on **2017-05-18 15:21:43** > Good work, is there any link for this demo source?? The link is in the post. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://rehansaeed.com/#website","@type":"WebSite","description":"Software Developer at Microsoft, YouTuber, Open Source Contributor and Blogger","inLanguage":"en-GB","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/","author":{"@id":"https://rehansaeed.com/#identity"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://rehansaeed.com/?search={search_term_string}"},"query-input":"required name=search_term_string"}],"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#webpage","@type":"WebPage","dateModified":"2014-03-02T00:00:00+00:00","datePublished":"2014-03-02T00:00:00+00:00","description":"MahApps Metro is an excellent Windows Presentation Foundation (WPF) SDK providing Metro styles for built in WPF controls and several custom controls.","name":"WPF Metro Part 2 - MahApps Metro","url":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/","breadcrumb":{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#breadcrumb"},"isPartOf":{"@id":"https://rehansaeed.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://rehansaeed.com/wpf-metro-part2-mahapps-metro/"]}]},{"@id":"https://rehansaeed.com/#identity","@type":"Person","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/about/","image":{"@id":"https://rehansaeed.com/#/schema/image/1"},"sameAs":["https://github.com/RehanSaeed","https://www.linkedin.com/in/muhammad-rehan-saeed","https://stackoverflow.com/users/1212017/muhammad-rehan-saeed","https://www.youtube.com/c/MuhammadRehanSaeed","https://www.twitch.tv/rehansaeeduk"]},{"@id":"https://rehansaeed.com/#publisher","@type":"Organization","logo":"https://rehansaeed.com/images/schema/Publisher-600x60.png","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com"},{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#article","@type":"Article","dateModified":"2014-03-02T00:00:00+00:00","datePublished":"2014-03-02T00:00:00+00:00","description":"MahApps Metro is an excellent Windows Presentation Foundation (WPF) SDK providing Metro styles for built in WPF controls and several custom controls.","headline":"WPF Metro Part 2 - MahApps Metro","inLanguage":"en-GB","url":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/","author":{"@id":"https://rehansaeed.com/#identity"},"image":[{"@type":"ImageObject","url":"https://rehansaeed.com/images/hero/MahApps-Metro-1366x768.png","caption":"MahApps Metro","width":"1366","height":"768"}],"isPartOf":{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#webpage"},"keywords":[".NET","C#","Metro","Modern","SDK","UI","User Interface","Windows Presentation Foundation","WPF","XAML"],"mainEntityOfPage":{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#webpage"},"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://rehansaeed.com/","position":1},{"@type":"ListItem","name":"WPF Metro Part 2 - MahApps Metro","item":"https://rehansaeed.com/wpf-metro-part2-mahapps-metro/","position":2}]},{"@id":"https://rehansaeed.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png","inLanguage":"en-GB","url":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png"}]} ``` ## Sitemap See the full [sitemap](https://rehansaeed.com/sitemap.md) for all pages.