Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / All-Topics

A Little Bit Of Help Making Your Metro Apps More Metro

0.00/5 (No votes)
4 Mar 2014CPOL3 min read 14.6K  
Here is a little bit of help making your Metro apps more Metro

In my spare time at the moment (not that I have much of it), I am sharing time between several things:

  • Angular.js
  • WinRT
  • Azure

Pretty much in that order. Although I have not actually written any blog posts or CodeProject articles on WinRT / Metro yet, I assure you that I will be doing so at some point in the future.

As some of you may know when I do write articles, I tend to write full applications as I firmly believe that this approach gives you the best overview of a new technology, which is especially true (at least for me) when doing UI work.

Now when I write my demo applications articles that I normally put out over at CodeProject, I tend to go a bit nuts with the styling as it is an element that I quite enjoy. It does however take up a lot of my time to create the different control templates/styles. Ok there are a few things out there which I have used in the past (when I was writing metro looking apps in WPF) make this work (for metro at least) slightly easier, one such thing that I did use (even though it was a WPF application) was MahApps.Metro which gave you some cool control templates/styles for WPF which go your app to look all metro like pretty quickly.

For example, here is a screen shot from the MahApps.Metro home page for a Panorama control.

image

This is all lovely, but it was and still is for WPF. Are there any useful FREE things available for working with WinRT.  Mmmm, well let's see. Aha, there is indeed a fantastic tool that I have used in the past, and I am certainly glad to see V2 of it, it is the excellent MetroStudio by SyncFusion.

MetroStudio is a great tool (oh and did I mention it is free), which takes the stand point that most of the controls that come with WinRT / store applications are already heavily styled for the Metro look and feel, but what about Icons. Icons are a big part of the Metro look and feel, and having to use icons and find the right set of icons can be quite a challenge. This is where MetroStudio fits very nicely, it does one thing icons, but it does the job very well.

Here is what MetroStudio offers:

  • 2500 or so icons which are already in the metro style, nicely grouped into business areas
  • The ability to export icons in several formats (PNG, BMP, JPG, GIF, ICO, TIFF and most importantly XAML where the icons are converted to paths so they scale nicely)
  • The ability to totally customize the icon
    • Size
    • Padding
    • Rotation
    • Flipping
    • Background shape
    • Background color
    • Icon color

Here is what MetroStudio looks like when you first run it up:

image

You simply click on one of the icons, which will then give you the ability to adjust the settings for the icon which I described above.

image

As I say MetroStudio does one thing, and one thing only, but that one thing is a very useful thing when you are developing Metro / Windows 8 store applications, and having the right style icons really compliments the existing Metro / Windows 8 store controls. All in all, I really like MetroStudio and think it's a great free tool.

Anyway, I hope that some of you that have not heard of MetroStudio can see that it is cool, and may even try it out, and don’t forget it’s FREE.

Enjoy!

Image 4 Image 5

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)