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

  • See how offering cloud and hybrid backup solutions drives business and leads customers to adopt other cloud services. Then learn which factors to consider when choosing the right backup and recovery solution to keep your customers' businesses moving.

  • According to a 2014 Javelin Strategy & Research Study, there is a new victim of fraud every two seconds – and that's just in the U.S. With identity theft and consumer fraud rising, and more frequent and sizable data breaches in the news, financial institutions need to work harder than ever to protect their customers and their business. Download this white paper to learn how you can use multi-channel communications to minimize the costs of fraud while also increasing customer loyalty.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date