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


image

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.

demo1

[reference : Franmonzter]

 

demo2

[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 Smile

image

 

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

image

An example of an icon is this “Android” icon

image

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

image

Unfortunately putting this PATH into a resource dictionary for use as a StaticResource has A LOT of problems that Microsoft just refuses to fix Smile 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.

image

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

image

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 Sad smile . 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

 

image

 

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 Smile

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

  1. Pingback: Toying with the idea of a Metro “Ribbon” (part 1) | Silverlight and other cool things …

  2. Pingback: Windows 8 Developer Links – 2012-04-25 | Dan Rigby

  3. Pingback: Toying with the Idea of a Metro “Ribbon” (Part 1)

  4. Pingback: Toying with the idea of a Metro “Ribbon” (part 1) :: Learning

  5. Pingback: Produktivitás Metro felületen? - W8 for it... - devPortal

  6. Pingback: All my XAML/C#/SharpDx demos | Silverlight and other cool things …

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