Overview

You should be familiar by now with “What is Visual WebGui” and “What is Visual WebGui over Silverlight”. It is recommended that you read “How to create a Visual WebGui Silverlight application” and other articles in our “Get Started with Silverlight” section.

Visual WebGui (VWG) SDK supplies you with a default theme to your application. This theme holds the default display specification to all the Visual WebGui controls. The VWG Silverlight installation adds a new project type “Visual WebGui Silverlight Theme”. This project allows you to take the default theme and design it according to your needs.

Let's Start

Let's open one of the previous applications that we created in one of our previous “How to”. I’ve opened “How to embed HTML inside a Visual WebGui Silverlight application”.

Now, add a new project to our solution. Select a project type Visual WebGui Silverlight theme

Figure 1: Selecting the project type

Our new theme project should look like this. The Generic.xaml file holds the XAML styles of all the VWG Silverlight controls.

Figure 2: Structure of the Project

Let’s look at one of them. This is the Window Background Style. This style defines the style of a window in a Silverlight application.

This is how it looks like.

Figure 3: Output of the example

Now, let’s change the gradient color of the rectangle to a different color. 

Next we will set the build order of our application. Right click on the solution and select properties. Open project dependencies and set HtmlBox to depend on MyTheme project.

Figure 4: Setting the build order

Now, let’s build our application. If this is the first time you build your application you will see the packager application. Make sure that the new theme is included in the main package.

After the build has completed open the web.config; the theme section should look like this

Set the selected theme to MyTheme Selected="MyTheme". Save and close the web.config file.

Let’s rerun the application. Itwill look like this:

Figure 5: Output of the Example

This will be our default window theme in our application. You can reuse this theme project in any VWG application by just adding a reference to the .dll in the package manager and setting the theme to the default theme.

Next we will edit another style but use Expression blend this time. So let’s open the Expression Blend and create a new Silverlight2 project.

Figure 6: Creating a new Silverlight Project in Blend

Figure 7: Creating a new Silverlight Project in Blend

Add a user control to the project.

Figure 8: Adding a User Control to the Project

Add a button to the user control.

Figure 9: Adding a Button to the User Control

Right click on the button and select “Edit Control Parts (Templates)” –> “Edit a Copy”

Figure 10: Editing a Template

Click ok to create the ButtonStyle resource.

Figure 11: Creating the ButtonStyle resource

Let’s get back to our VWG theme project and locate the “ButtonStyle” style and copy it. Now, go back to the Expression Blend and replace the button style with our style.

Click on the button and select “Edit control Parts (Template) “ –> “Edit Template” option.

Figure 12: Editing the Template

Select the “MouseOver” event.

Figure 13: Selecting the MouseOver event

Open the Timeline panel and set the time to 0.25 sec.

Figure 14: Setting the Timeline

Now, we’ll rotate the button to the point that it is 90 degrees.

Figure 15: Rotating the Button

On the 0.5 sec rotate another 90 degrees.

Figure 16: Rotating another 90 degrees

And once again at 0.75 sec.

Figure 17: Rotating again at 0.75 sec.

Last time make it complete a 360 degrees turn.

Figure 18: Making a 360 degrees turn.

Now, open the XAML and copy the button style back to the generic.xaml file in our theme project.

On the MouseOver event of the ButtonStyle set the RepeatBehavior property to forever so our new effect will last forever as long as the mouse is over the button.

Let’s add a button to the form.

Figure 19: Adding a Button to the form

And run the application.

Figure 20: Our application up and running

Summary

We have seen how to use Visual WebGui Silverlight theme project to customize and to design your application. We used Expression blend to edit the default XAML and created an animation to the button MouseOver event.

The original article can be found here.

About Eyal Albert

Sorry, no bio is available This author has published 6 articles on DotNetSlackers. View other articles or the complete profile here.