How to use the new Visual WebGui RIA Theme & Control designer

Thursday, April 16, 2009

.NET ASP.NET C# controls custom controls design how to RIA rich internet applications skins theme customization tutorial Visual Studio web 2.0 web applications web design web development Windows Forms

In this How to we are going to learn the basic usage of Visual WebGui RIA Platform Theme & Control designer.
The Theme & Control designers are some of the new features that will be introduced in version 6.4. The new visual designers enable developers to create or edit a control skin and make custom themes. The Control designer consolidates all the resources that build the control into one place.

In this How to we will show how to edit images that make up a standard button and quickly transform it to Mac styled buttom.

Let’s open Visual studio and create a new Visual WebGui application.

Now let’s add a few controls to our main form. Open form1 in design mode and add a few controls.

Next add a new Visual WebGui theme project named MyTheme.

Let’s open Theme1 file in design time and see the theme designer.
What you see on the left side of the screen is a list of all the controls that have skins that inherit from ControlSkin. By default a new Theme project template has a reference to Gizmox.WebGUI.Forms dll and you see the 58 out-of-the-box controls that we have in Visual WebGui int the tree. You can add reference to more dlls that have controls with skins defined and edit them.

The controls are sorted by name and grouped by inheritance or by containment (Data grid view columns can be used only within a data grid view hens appear underneath it.)

On the right side you can see the files that are associated with the control sorted by type. The files are sorted into seven groups that you can select by using the tool bar.

Let’s select the Button and see the images that build the button controls. The button control is built from a set on images the complete the button that you see. There are 9 images for each button state (Enabled, Disables, Pressed, Hover…). The image below displays a few of the images that are used for the button control.

As you can see each one of the images is marked with an icon . This icon means that the resource is referenced and not a local resource. This means that this resource belongs to the parent control or that belong to the default theme of the control. You can view the resource but can edit it until you convert the resource to a local resource. So lets right click on one of the images and select the override option this will create the resource as a local resource.

Now we can edit the image. Double click on the image to open it in an edit mode you can set what will be the default editor of a specific file type. In the theme project click on the expend sign next to the theme and see the local resource that was created for the image. Next right click on the image and select the Open with option and then you can select the program to use. I’ve selected Pain.Net but you can use windows paint or any other image processing program.

Now double click on the image and edit it by changing the color or changing the corner to a round corner. Once you are done just save the image and you will see the update in the theme designer.

You can go over all the images in the Button to change all of them. If edited all of them and saved them in a different folder but with the same names. Now I can just take the image and drop them in the theme designer and override all the images.

Now we will see the effect of our changes on the label. First add to our project a reference to the theme right click on the project and select add reference. Then select the project tab and select our theme and press ok.

Next let’s open the property page of our application and select our new theme as the application default theme. Right click on the project and select the properties. In the property page select the registration tab.

In the theme section press 'Add new theme' and select the theme we created. The theme selection dialog displays all the themes that a referenced to the project.
Once you select the theme you want to add press ok and see the theme in the project registered theme. To set the default theme check the checkbox next to it.

Now let’s run the application and see the difference

The default Theme

Our new theme.

To summarize:
We have just seen how to edit resources in a control and use the new theme we created in our application. Remember that you can edit every resource that the control includes such as css files xslt or xaml. This ability gives you the power to create new rich UIs for your web applications with Visual WebGui's simplicity.

No Comments