Metro

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 lets 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, its 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 customise 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 its 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

6 thoughts on “A Little Bit Of Help Making Your Metro Apps More Metro

    1. Grrr how annoying ill updates the links later. Thanks for telling me, don’t know how that happened

  1. Hi Sacha,

    Yes, Metro studio is a great tool. I’ve been using it for a while now and one of the nice features recently added (as you are probably very aware) is the ability to use characters and fonts as icons. i.e. you could easily use the winding’s font and open up a plethora of yet more icons and symbols!

    Another site is which gives xaml output on metro like icons is : http://modernuiicons.com/

    Probably not as good as syncfusion’s app but great if you cannot obtain the install for whatever reason.

    As always, love your work!
    Dan

Leave a comment