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

  • Managing your company's financials is the backbone of your business and is vital to the long-term health and viability of your company. To continue applying the necessary financial rigor to support rapid growth, the accounting department needs the right tools to most efficiently do their job. Read this white paper to understand the 10 essentials of a complete financial management system and how the right solution can help you keep up with the rapidly changing business world.

  • Live Event Date: August 14, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Data protection has long been considered "overhead" by many organizations in the past, many chalking it up to an insurance policy or an extended warranty you may never use. The realities of today makes data protection a must-have, as we live in a data-driven society -- the digital assets we create, share, and collaborate with others on must be managed and protected for many purposes. Check out this upcoming eSeminar and join Seagate Cloud …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds