65.9K
CodeProject is changing. Read more.
Home

XAML Graphics Series - Part 1 Silverlight 1.0 XAML Desktop Art Animation

ProtoBytes
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (6 votes)

Jun 18, 2009

CPOL

7 min read

viewsIcon

36206

downloadIcon

2952

This is an introduction to creating XAML applications using Silverlight 1.0 and JavaScript.

Table of Contents

Introduction

This is the first article in a series of articles on using XAML in graphics applications, art, and visualizations. This article is intended for the beginner Graphic Design Artist, or Programmer Hobbyist. The Silverlight 1.0 application featured in this article shows how to create a simple animation in Silverlight 1.0 using storyboards. Microsoft's Expression Studio is used to create this demo. The demo cycles different properties of the image and a rectangle which overlays the image and creates a graphic effect. Some basic knowledge of HTML, JavaScript, and graphics techniques are required to fully understand the content in this article.

The series will be broken up into sections for:

  • Beginner (no programming experience needed)
  • Intermediate (some programming knowledge helpful)
  • Advanced (advanced knowledge of programming concepts very helpful)

Background

I designed this concept for an active desktop with an application interface while working with Java Applets in JDK 2.0. I used Sun's Java Applet Desktop demo as the applet. It was much like having a Vista desktop or Google desktop. Back then these paradigms did not exist. Many of my ideas have pioneered the way of new technology and innovations. Currently I am working out the details for an interactive internet desktop application which will be hosted using cloud services. There is no limit to the number of virtual desktops which can be hosted using this method. This is similar to the way Solaris servers work in workgroup mode. Sun's servers are highly optimized for string parsing and IO. I think this is the way web technologies of the future will be hosted.

Additionally the goal of the article and this series is to bridge the gap between Graphic Designers, Developers, and Architects, and show some tips and tricks to optimizing workload and code, as well as exploring new innovative ways of utilizing our current technology and interjecting some new ideas.

Break Down of Series

Beginner Series

  1. Silverlight 1.0 Desktop Art Animation
  2. Silverlight 2.0 Desktop Art Animation
  3. XAML 2d Graphics Concepts
  4. XAML 3d Graphics Concepts

Intermediate Series

  1. Dynamic XAML
  2. WPF Application Design and Architecture
  3. Silverlight Application Design and Architecture 
  4. Introduction to Advanced Concepts: DirectX, OpenGL, and Filtering

Advanced Series

  1. Anatomy of a GPU and how XAML is Optimized for GPUs
  2. GPU Optimization Techniques
  3. Mixing it all Up: DirectX, OpenGL, and More
  4. Bringing Everything Together, an Approach on Designing Custom Graphics Engines

Necessary Code Modifications

To use the code in this article, simply copy the demo files to a directory of your choosing.  Open up the desktop properties of Windows (if using windows), set an active desktop association to point to the Default.html file. If you don't know how to do this for your OS, a simple internet search on the subject should point you to the steps required. Save your desktop settings. You should now see the Silverlight Desktop Art running on your desktop. The example animation slowly cycles the color palette of a rectangle with a spherical gradient and also adjusts the rectangle's and the image's opacity to create a smooth color blending effect. I think of the effect as either being the sun shinning and disappearing into the clouds, or photographers stopping by to snap a picture of the scene. The included artwork was produced using Expression Design 2.0, and applying the following effects in order: watercolor, putty knife, and outer glow, all using the default settings. The photograph has been supplied by my favorite photographer.  

The image was then saved as a PNG, and copied into a Silverlight 1.0 project in Expression Blend 2.0. After the storyboard was modified to the desired effect, I saved the project and modified the HTML file: Default.html so the image would be displayed correctly on my desktop.  I also modified the App.js to start the animation when the XAML is loaded. An introduction to XAML will be covered in the next three sections:

//
// Default.html code modifications:
//

    ....HTML Code Change...
    
	<style type="text/css">
		#silverlightControlHost {
			height: 960px;
			width: 1260px;
		}
		#errorLocation {
			font-size: small;
			color: Gray;
		}
	</style>

    ....HTML Code Change...
//
// Page.xaml.js code modifications:
//

	DeskTopBackground.Page.prototype = 
	{	handleLoad: function(control, userContext, rootElement) 
		{
			this.control = control;
			this.control.content.findName.Begin();
 		},
	}

How the Demo Works

XAML, JavaScript, JSON, XML, and DOM are the foundations which Silverlight is built upon. While Silverlight does not have any user controls built in, custom user controls can be designed and deployed to this small subset of technologies. The demo uses only XAML and JavaScript. The other technologies are also available in versions prior to 1.0 and will be covered in the next series along with an in-depth study of XAML and other Vector Image formats such as SVG.  Even know we are not directly launching the Internet Explorer browser to render our Silverlight application, Internet Explorer is invoked as the application container. The application container is responsible for creating the environment and isolation of the application. It also hosts the JScript engine which Silverlight 1.0 uses for event processing and DOM manipulation. I'm not going to do an in-depth coverage of JScript because of the awkwardness in designing good OOP and its basic security issues.

Overview of Code Execution

  1. The browser is invoked, and loads the HTML.
  2. The JScript engine loads the dependant script files (only JScript is supported).
  3. JScript creates the container for the Silverlight add on and sets the properties defined in the HTML and JScript files.
  4. Once the container is loaded, the XAML is loaded by the container.
  5. At this point, some magic happens inside the container allowing it to access protected system resources.
  6. The container then renders the XAML and starts processing input and events via JScript.
  7. The demo is launched on the page load event by calling the 'Begin' method of the StoryBoard object.

I will not go into further detail about the Storyboard in this article. That will be covered in the next section where we will do some Architectural exercises to find any artifacts which can be reused. We will do this by looking at the schema for the XAML and try to identify XAML elements which offer good reusability and make them items of interest for all stakeholders in the design of an application.

Silverlight Road Map

SLCompositArch.gif

Yellow = Proposed Silverlight 3.0, Orange = Silverlight 2.0 and above, Gray = Silverlight 1.0 and above, Light Blue = Core

Points of Interest

The fact that the circular gradient falls on the center of the image and adds spherical effect to the clay pot was by accident. I do like the effect. While creating the storyboard, I discovered that Blend will automatically adjust the story keys along the timeline. This was problematic because the photographer wanted a different effect than what was shown. It would have been much simpler to just start a new storyboard. However, I didn't want to do all the cutting and pasting of XAML for the gradient definitions. I assumed the role of the beginner, so I could understand how others might use Blend. This results in some ugly XAML. The correct way to recover/re-factor existing XAML artifacts will be covered in the next section. I did find a problem with using Silverlight 1.0. The CPU runs at 100% while the animation is running.  Research on this problem revealed this problem can be corrected by changing the frame rate setting in the HTML. Unfortunately, my attempts to correct this on my computer failed. This will be correct in the next section where we have better control over the Silverlight environment.  Being a Silverlight 2.0 developer, this was my first experience using 1.0. I think it is interesting that the application needs no compilation. This would make dynamic rendering of XAML for Silverlight 1.0 applications very easy.

External Links

Revision History