Lexa

WPF, C#, Objective C and a little Math

Out of space for Horizontal Tabs?

The company, where I’m currently working, decided to create an application based on page design: application itself is a big tab control and each page contains some useful features. This approach is commonly used by most websites.

Sounds good, but unfortunately we pretty soon found ourselves out of space for horizontal tabs (because of 800*600 minimum size requirement).

Our UX department has created a solution that actually is a nested tab bastard. Fortunately, we could reduce tabs count back to 7 (magic number) and avoid implementing it. But in the process of discussion I got in my mind an idea of rotating tabs – what if we will rotate tabs according to current window size? The following image explains my idea better:

Though my company is too ‘serious’ to use this approach, I really think that this idea can be used by some kind of applications that really need a lot of tabs. Additionally, tab headers could use different text sizes – this will make the more ‘remarkable’ (these might me most used tabs, for example).

So I decided to implement an example for this. It shows a set of heroes from one of my favorite PC-games. I used WPF for it. This is how it looks now:

If you’re interested in details, I used:
• ListBox to organize tabs headers;
• ControlTemplate for ListBox items to make them look as slanting text;
• Separate class that defines and manages items collections set for tabs; it connects with other parts of an application via attached properties;
• .xml file as heroes data source;
• Wikipedia.org as a source of heroes’ info.

You can download application with source codes here (don’t forget to change extension doc to zip after you get the file).


Categorised as: UI, WPF


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>