How to Create Your Own Visual WebGui Silverlight Theme

Creating Your Own Visual WebGui Silverlight Theme

Learn how to create your own Visual WebGui Silverlight theme that uses the default 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.

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.

How to Create Your Own Visual WebGui Silverlight Theme

Rerun the application. It will look like this:

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.

Add a user control to the project.

Add a button to the user control.

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

Click OK to create the ButtonStyle resource.

How to Create 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.

Select the "MouseOver" event.

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

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

           

On the 0.5 sec, rotate anther 90 degrees.

And, once again, at 0.75 sec.

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

Now, open the XAML file 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.

And run the application.

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: May 7, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT This eSeminar will explore three popular games engines and how they empower developers to create exciting, graphically rich, and high-performance games for Android® on Intel® Architecture. Join us for a deep dive as experts describe the features, tools, and common challenges using Marmalade, App Game Kit, and Havok game engines, as well as a discussion of the pros and cons of each engine and how they fit into your development …

  • The exponential growth of data, along with virtualization, is bringing a disruptive level of complexity to your IT infrastructure. Having multiple point solutions for data protection is not the answer, as it adds to the chaos and impedes on your ability to deliver consistent SLAs. Read this white paper to learn how a more holistic view of the infrastructure can help you to unify the data protection schemas by properly evaluating your business needs in order to gain a thorough understanding of the applications …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds