Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Introducing MDL2 Helpers

Another new thing that’s being introduced in Windows 10 is something that’s being seen as the next evolution of Metro: MDL2 (Microsoft Design Language 2). This brings about a whole new set of iconography for Windows 10, some of which can be seen in the settings app (on both phone and desktop).

If you want to read more about MDL2, whilst not technical, this would be a good place to start.

The icons that are available can be used by using the Font Segoe MDL2 then using the relevant code to get the icon. But where do you get those codes from? Well, Austin Andrews (@templarian) has put together a great online resource that lists the icons and their representations. But this can be a pain to copy and paste, look up what a code is, etc. So is there an easier way?

The Solution

As always, I want to help make things easier, so I’ve created a couple of simple nuget packages that will add your choice of cs, xaml or both to your project. Each file has the code and a relevant key/name so you can easily call each icon from either your code or your xaml as a static resource.

The Packages

As mentioned, there are three packages depending on what you need in your project:

cs file only
xaml file only
cs and xaml file

The first package will add just the cs file, the second just the xaml file, the third will add both files to your project.

It’s worth noting that the cs file uses the new C# 6.0 way of doing getter only properties, so in order to use it, you will need to be in Visual Studio 2015 (although, really, you may only want to be using these in Windows 10 apps). But if you do use the font in other projects, just be aware of the 2015 requirement.

Code Samples

For the cs file, you would use it like this:

MyBusIcon = Mdl2.Bus;

And for xaml, you’d have to add the resource dictionary to your list of merged dictionaries, then you can just do:

<TextBlock FontFamily="Segoe MDL2 Assets" 
            Foreground="SkyBlue"
            Text="{StaticResource Bus}"/>

The tool to build both files is on github at https://github.com/ScottIsAFool/Mdl2Tool (it’s a little hacky, but meh).

SL

Advertisements

3 responses to “Introducing MDL2 Helpers

  1. Pingback: Dew Drop – May 19, 2015 (#2017) | Morning Dew

  2. Pingback: Segoe MDL2 | Around computing

  3. MMG February 22, 2016 at 11:58

    You’re awesome man!!
    Thanks for this very useful library 🙂

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: