Create modern looking User Interface

November 2005

Objectives

• To explain the creation of modern looking user interface with LidorSystems.Collector library

Contents

Introduction

Using different visual styles

Color schemes

Using images and watermarks

Conclusion

Introduction

Most of the applications that you build, in order to accomodate their appearance on different versions of windows operating systems, you will need to add some extra code to do the work. This can be easily achieved if you use LidorSystems.Collector library. This library supports Windows XP Themes and color schemes, emulates Office 2003, Visual Studio .NET 2003 and Visual Studio 2005 look and feel and helps you to create modern user interface.

Using different visual styles

Visual appearance of Bar, Group and Page control is controlled by Style property. Styles are ordered in hierarchical structure (BarStyle-GroupStyle-PageStyle) and in this way parent control can manage the style and appearance of child controls. Also there are VisualStyle and UseTheme property. Changes in these properties results in creation of different visual styles.

The VisualStyle property has the following values:

• Classic - Used to render controls in Windows Classic control style
• Office2003 - Used to render controls in Office 2003 control style
• VS2003 - Used to render controls in Visual Studio .NET 2003 control style
• VS2005 - Used to render controls in Visual Studio 2005 control style
• Default - Used to render controls in Windows XP and Collector control style

 

 

 

Note   To render these controls with current active theme and color scheme you need to set the UseTheme property value to True.

 

Color schemes

There are 21 predefined color schemes from which you can choose. The selected one acts like a base color scheme from which you can make further changes in the style of the control. These changes can render in the control only if the UseTheme property value is set to False. From the style of parent control, for example Group control, you can make changes to the styles of contained Page controls, only if pages has StyleFromParent property value set to True. Some child controls can have separate styles (not controled by his parent) in which you can create custom styles. The most appropriate example is OneNote visual style. To create this visual style follow this steps:

1. Create a Windows Application project
2. From the Toolbox, drag&drop the Group control to your form
3. Right click on the Group control to show context menu
4. Select Add page to create new Page control
5. To add more pages repeat step 4 as many times you like
6. Select Page control and from the properties window change the StyleFromParent property value to False
7. Expand the Style property of Page control and from the ColorScheme property choose some color scheme or change the colors from TabStyle property
8. Repeat steps 6-7 for every page that you want to change
9. Hide the header of Group control by setting the Header property value to False
10. Set the BorderStyle property value of Group control to None

You have created tabbed user interface which looks like OneNote.

 

 

Using images and watermarks

To make better descriptions of bars, tool windows and documents in addition of text you can also add images. They can be placed in headers, tabs and body of containers in such a way you can enrich look and feel of your applications.

Bar control can have only images placed on header. Group control can have images on header and tab, and Page control can have images on tab and his body.

 

 

Conclusion

LidorSystems.Collector provides you with set of controls in one place with which you can design modern user interface with variety of visual styles and colors. Hierarchical style model brings you a new way in creation of unique user interface.