This project is read-only.

Larger ModernButton w/ IconData from versus standard button w/ PNG icon

Apr 9, 2013 at 8:51 PM
I'm trying to get a larger ModernButton using the IconData that is available from, however those appear to be sized specific for the WP7/8 app bar.

What would be the best way to get a a larger icon?

I have thought about using the PNGs that are available from the download and just using that as the a standard button's image, however I am not what I would do upon detecting that the ThemeSource has changed and thus I would need to swap out each button's image (light or dark depending on the current theme).

any ideas what I could do here?

The nice thing about using the IconData for the icons in a ModernButton is that it works regardless of which theme is being used.
Apr 9, 2013 at 10:09 PM
I have not yet used the ModernButton, but maybe you should have a look at Syncfusion MetroStudio (it's free!). You can export to XAML, so the icons scale as you like. I really like it :)
Apr 9, 2013 at 11:41 PM
All icons from come with a XAML version as well (located in the xaml folder). The vector based paths can be stretched to any size you like and support changing themes as well.
Apr 30, 2013 at 6:36 PM
Edited Apr 30, 2013 at 7:20 PM
How exactly do I stretch these vector based paths? Simply changing the width/height of the button in my page's xaml doesn't seem to work. Is this something I need to do in blend (stretch the icon) to get the new path data that I can use on the button? I've never used blend, so I am not exaclty how to work with xaml icons..
Apr 30, 2013 at 10:41 PM
ModernButton has a default style (in Themes\ModernButton.xaml) that has a Grid with a fixed size of 18x18px for icons. Furthermore the IconWidth and IconHeight properties are used to properly size icons within this grid. For larger icons you'll need to create a custom ModernButton style and set your own sizing.
May 20, 2014 at 3:54 PM
Edited May 20, 2014 at 3:55 PM
Try applying a ScaleTransform like this:
<mui:ModernButton IconData="F1 M 42.3542,38L 26.5208,53.8333L 37.2083,53.8333L 53.8333,38L 37.2083,22.1667L 26.5208,22.1667L 42.3542,38 Z ">
        <ScaleTransform ScaleX="5" ScaleY="5"/>