My beloved TabControl

I have to admit I love tabcontrols! They're the best way for maximizing space.
No Step through, no page flipping and no collapsible panels are more often used than tabcontrols.

Since the earlier days of windows forms, they're the default onboard tools.
Also mobile apps takes the advantage of tabs and tab designs

Update: A rounded interface design for small factor screens

Code following soon!

This example here is for darker / gray blended UI's.

Simply but very handy on touchscreen terminals: Code

The nasty combobox...

At first look, a combobox is just a textbox and a button, so this should be an easy one to customize.
Well, there's a lot more under the hood than some people are expecting.
Keyword Items/Item-Bindings.

for now, here's a simple template of a combobox:

As you can see, the dropdrop panel's alpha is reduced to half (transparency effect with gradient), and the "textbox" was merged with the "dropdown-button" to one style.

Code


I know, this is quite often used and not really innovative, however from point of view of a user, the most accepted version.


I will show another example (with animation), which looks "shiny" and "flashy", but lags, when it comes to identification by the user.

Beautify your RadioButtons!

Typically RadioButton-Controls are not customized a lot. A group of bullets with descriptions - also in modern UIs - the design stays the same. However, with just a few tweaks and colors,
the apperance gets "modernized" in seconds.

Here's an example of how your RadioButtons could look like:

lightgray rectangles:

To get the rounded corners you can use two border-elements. The inner-border's visiblity is set to "hidden" until it is checked (triggered).

Code

tick boxed:

In this example the whole control is "boxed". The box consists of two border (rounded corners just at the edges).
Special bullet style is a polygon, shaped to an tick-symbol like the checkbox has.

Code

button stripe 1:

Quite simple style. Commonly seen in real life as lightswitch with LED for on/off status.

Code

button stripe 2:

Same as button stripe 1, but with horizontal align of the "light"-bar.

Code