Toying with the idea of a Metro “Ribbon” (part 1)

I’ve seen a couple of interesting comps of metro apps that have a ribbon, they actually look decent especially if your building a business productivity app.

I wanted to prototype a metro app with a ribbon to see what it would feel like. First is to create a simple ribbon, in future posts I’ll embellish this ribbon with rich touch/sensor driven experiences.

 

Inspiration

Below are two comps that I happened across on DeviantArt. They show what a metro app with a ribbon may look like, and understandably he used Word and Powerpoint in his comps.

[reference : Franmonzter]

 

[reference : Franmonzer]

 

Metro Icons

The demo I’m going to build needs lots of metro icons and luckily Syncfusion has come to the party with their thousands of icons

 

These icons are provided as *.eps files or as Path’s in a nice *.xaml file.

An example of an icon is this “Android” icon

It is provided in the “Applications\Applications.xaml” as a path:

Unfortunately putting this PATH into a resource dictionary for use as a StaticResource has A LOT of problems that Microsoft just refuses to fix Even in WinRT these same issues exist : reference 

The solution I took was to store the “DATA” points as a string in a resource dictionary.

And when I dynamically created the icon I would read from the resource dictionary and create a PATH object using XamlReader ..

The benefit of using a PATH for my icons is that they scale well, and they can easily be programmatically styled (like selected/highlight/focus etc.)

 

Prototype

So here’s a video of a simple metro app using the metro icons and a makeshift Ribbon control. I created a simple animation for the selected tab, nothing too outlandish yet.

 

Issues encountered

 

DataTemplate.FindName is missing . Unfortunately I needed to find an element in a datatemplate for a particular scenario, what is simple in WPF/Silverlight is impossible in WinRT-XAML! (unless someone can point me to an alternative approach)

reference : How to: Find DataTemplate-Generated Elements

Paths as static resources, as mentioned above I wanted to store a path in my resource dictionary BUT in the end had to resort to using a string to store the data.

Blend died on me hundreds of times a day, and in most cases it got painfully slow when rendering the design surface.

Also Windows 8, which is what I am developing on, had issues with the keypress response. I would type something and it would take several seconds for each character to be processed! This happens A LOT across ALL of windows 8 not just VS/Blend.

 

Sample Code

 

 

Conclusion

 

This prototype is enough to build on for future posts, I wanted to share this with you so you can download and experience it for yourself. It’s one thing saying “ribbons suck and shouldn’t be used in metro apps” and another thing to actually experience it and making that conclusion.

I believe there is a place in our metro apps for a ribbon BUT I’ll explore this in future posts