Click here to Skip to main content
15,868,052 members
Articles / Web Development / HTML

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

,
Rate me:
Please Sign up or sign in to vote.
4.50/5 (6 votes)
23 Jun 2009CPOL7 min read 34.9K   2.9K   21   3
This is an introduction to creating XAML applications using Silverlight 1.0 and JavaScript.
Image 1

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:

HTML
//
// 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...
JavaScript
//
// 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO AW Proto-Code, Inc.
United States United States
I’m a self learned wiz kid turned Architect. Stared with an Apple IIe, using AppleSoft Basic, ProDos and Begal Basic at age 10.

Picked up LPC in college before the Dot Com Explosion. Wrote some Object C in the USAF for one of my instructors. Got a break from a booming computer manufacture testing server software. Left the Boom and went to work for a Dot Com built from the ashes of Sun Micro in CS. Mentoring in Java solidified me as a professional developer. Danced in the light of the sun for 13 years, before turning to the dark side. An evil MVP mentored me in the ways of C# .NET. I have not looked back since.

Interests include:

~ Windows Presentation Foundation and Silverlight
~ Parallel Programming
~ Instruction Set Simulation and Visualization
~ CPU to GPU code conversion
~ Performance Optimizations
~ Mathematics and Number Theory
~ Domain Specific Languages
~ Virtual Machine Design and Optimization
~ Graphics Development
~ Compiler Theory and Assembler Conversion Methodology
~ CUDA, OpenCL, Direct Compute, Quantum Mechanics

IEEE Associate Member 2000
This is a Organisation (No members)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Rishikesh12323-Jun-09 21:51
Rishikesh12323-Jun-09 21:51 
GeneralRe: My vote of 1 Pin
Philip.F5-Jul-09 22:10
Philip.F5-Jul-09 22:10 
GeneralXAML Graphics Series - Part 1 Silverlight 1.0 XAML Desktop Art Animation Pin
Andrea Wykel21-Jun-09 14:35
Andrea Wykel21-Jun-09 14:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.