Creating Your Own Visual WebGui Silverlight Theme

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 the "Get Started with Silverlight" section.

The Visual WebGui (VWG) SDK supplies you with a default theme to your application. This theme holds the default display specification to all the VWG 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.

Open one of the previous applications that you created in one of the previous "How tos." I've opened "How to embed HTML inside a Visual WebGui Silverlight application."

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

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

Look at one of them. This is the Window Background Style. This style defines the style of a window in a Silverlight application.

<!-- Default style for WindowBackgroundStyle -->
  <Style x:Name="WindowBackgroundStyle" TargetType="Control">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
          <Grid>
            <Rectangle>
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0.2,1">
                  <GradientStop Color="#FFBFDBFF" Offset="0"/>
                  <GradientStop Color="#FF6591CD" Offset="0.8"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

This is what it looks like.

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

<!-- Default style for WindowBackgroundStyle -->
  <Style x:Name="WindowBackgroundStyle" TargetType="Control">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ContentControl">
          <Grid>
            <Rectangle>
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0.2,1">
                  <GradientStop Color="Yellow" Offset="0"/>
                  <GradientStop Color="Orange" Offset="0.8"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Next, you will set the build order of your application. Right-click on the solution and select properties. Open project dependencies and set HtmlBox to depend on the MyTheme project.

Now, build your 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.

Creating Your Own Visual WebGui Silverlight Theme

After the build has completed, open web.config. The theme section should look like this:

<Themes Selected="Default">
   <Theme Name="Default" Assembly="Gizmox.WebGUI.Themes.Vista"
          SilverlightAssembly="Gizmox.WebGUI.Silverlight.Themes.
             Default, Version=1.0.0.0, Culture=neutral,
             PublicKeyToken=null" />
   <Theme Name="MyTheme" Assembly="Gizmox.WebGUI.Themes.Vista"
          SilverlightAssembly="MyTheme, Version=, Culture=,
                               PublicKeyToken=" />
</Themes>

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

Rerun the application. It will look like this:

[CreateTheme05.png]

This will be the default window theme in your 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, you will edit another style but use Expression blend this time. So, open Expression blend and create a new Silverlight2 project.

[CreateTheme06.png]

[CreateTheme07.png]

Add a user control to the project.

[CreateTheme08.png]

Add a button to the user control.

[CreateTheme09.png]

Right-click on the button and select "Edit Control Parts(Templates)" -> "Edit a Copy".

[CreateTheme10.png]

Click OK to create the ButtonStyle resource.

[CreateTheme11.png]

Creating Your Own Visual WebGui Silverlight Theme

Get back to your VWG theme project, locate the "ButtonStyle" style, and copy it. Now, go back to Expression blend and replace the button style with your style.

Click on the button and select the "Edit control Parts(Template) " -> "Edit Template" option.

[CreateTheme12.png]

Select the "MouseOver" event.

[CreateTheme13.png]

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

[CreateTheme14.png]

Now, you'll rotate the button to the point that it is 90 degrees.

[CreateTheme15.png]     [CreateTheme16.png]     [CreateTheme17.png]

On the 0.5, sec rotate anther 90 degrees.

[CreateTheme18.png]

And once again at 0.75 sec.

[CreateTheme19.png]

For the last time, make it complete a 360 degree turn.

[CreateTheme20.png]

Now, open the XAML and copy the button style back to the generic.xaml in your theme project. On the "MouseOver" event of the "ButtonStyle", set the "RepeatBehavior" property to forever so your new effect will last forever as long as the mouse is over the button.

<vsm:VisualState x:Name="MouseOver">
   <Storyboard RepeatBehavior="forever">

Add a button to the form.

[CreateTheme21.png]

And run the application.

[CreateTheme22.png]

[CreateTheme23.png]

[CreateTheme24.png]

Summary

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

-- Eyal Albert @ Eyal.Albert (at) Gizmox.com



Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds