Posted by: lluppes | February 1, 2013

SyncFusion Metro Studio – Bargain Priced (for now!)

As I’ve been doing WinRT development the last month or so, I have found a couple of bargains out there.  SyncFusion has released a preliminary version of their WinRT toolkits at a bargain prices – the Essential Studio for WinRT for only $99!  The price will rise later this year as the toolkit matures, so you are strongly advised to take advantage of this price while it lasts.  It’s got some good tools right now that will continue to get better through the year.

One nugget in this toolkit that I’ve used quite a bit as I’ve been developing WinRT apps is the Metro Studio icon builder.  It has a nice collection of royalty-free icons that you can use in your applications (not just Windows Store apps!), but what I really like is how I can use them in my WinRT C#/XAML applications.  Unlike many icon collections, this one comes with a nice customizable editor:


You pick a category select an icon, and you can customize it by turning it or changing the colors, etc. – all the usual stuff you would expect in an icon editor. But here’s the cool part for Windows 8 C#/XML developers:  you can export this icon definition as a XAML path.  Why is that important?  I’ll show you.

Click on the XAML button, and you should see the following:


There’s a lot of extra stuff in there that you don’t really need — all you really need is the second Data attribute, which I highlighted.

In order to use this in your project, you need a button definition that can utilize a XAML path.  In your C#/XAML Windows Store app, go find the file StandardStyles.xaml, which is typically located in the Common folder.  There are a lot of Standard AppBarButton styles in there waiting for you to uncomment them which are very helpful, but you will need to add in this new button style code:

<Style x:Key="PathBasedAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="Button">
  <Setter Property="ContentTemplate">
        <Path Width="20" Height="20" Stretch="Uniform" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

Now go into your XAML page where you actually want to use a button, and add a new button like this:

<Button Style="{StaticResource PathBasedAppBarButtonStyle}"
Content="[PATH DATA GOES HERE]" />

Paste the “M0,44.993L64…” code from up above into the Content attribute, like this:

<Button Style="{StaticResource PathBasedAppBarButtonStyle}"
Content="M0,44.993L64,44.993 64,51.735001 0,51.735001z M18.628,37.962999L45.372002,37.962999 45.372002,42.269 18.628,42.269z M4.4440002,3.855999L4.4440002,34.444999 59.556004,34.444999 59.556004,3.855999z M0.41899967,0L63.581001,0 63.581001,37.666 0.41899967,37.666z" />

That’s it!  When you run your app, you’ll have a customized icon that fits your app perfectly.  No image files to include, just a nice simple path string.  You can tweak the icon in the editor, then just update in the Path Data and you are all set.   Keeps things small and fast – pretty sweet!

Download your free trial version now at and give it a try!


What do you think?

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


%d bloggers like this: