Shine Draw

Theming and Styling are the most important element for RIA Technology. Both Flash and Silverlight have provided a wide range of methods in styling the controls and UI.

Today, I will just use a simple example to illustrate how to style the UI in both of the technology. Please also note that the styling will apply to the default UI directly. That means you don’t have to specific class name or style name to the UI.

If you are new to theming, you may encounter some technical problems in using the sample. Please let me know if you need further assistant. (Please read the rest of the articles first!)

Vote for this sample

Comparison

Flash implementation: 30 minutes
Silverlight implementation: 20 minutes (Implemented First)
What’s the difference?

• Apply Style: StyleManager [AS3] vs ImplicitStyleManager [C#]

Source codes

•   Theming [Flex 3, AS3] (353 KiB, 51 hits)
•   Theming [Silverlight 2, C#] (165.5 KiB, 139 hits)

Silverlight

How to Apply Style in Flex: StyleManager [AS3]

The sample above is actually created by Flex since it has a better infrastructure in styling the controls. Usually, the styles will be applied at compile time. However, if you want to apply the style at run time, you have to compile the css file into swf file first. (You may just right click on the css file under Flex Builder and it will prompt up a compile option.)

// AS3

import mx.styles.StyleManager;
import mx.events.StyleEvent;  

// swf can be loaded from remote resources
public function init(e:Event):void {

	var myEvent:IEventDispatcher =  StyleManager.loadStyleDeclarations("./Theme.swf");
	myEvent.addEventListener(StyleEvent.COMPLETE, on_style_completed);
}

private function on_style_completed(event:StyleEvent):void {
	// do something
}

How to Apply Style in Silverlight: ImplicitStyleManager [C#]

For Silverlight, I will now list out the key steps in managing the above sample.

Firstly, download the latest Silverlight Toolkit. It provides you the ImplicitStyleManager Class for styling the UI. Next, open the samples and import the following dll files from the toolkit

• Microsoft.Windows.Controls.DataVisualization.dll
• Microsoft.Windows.Controls.dll
• Microsoft.Windows.Controls.Input.dll
• Microsoft.Windows.Controls.Theming.dll

You must also include the following assembly in your reference, or you will never find out where the problem is

• System.Windows.Controls
• System.Windows.Controls.Data

Where everything is ready, you may drag a sample XAML style file from the toolkit folder \Samples\Source\Controls.Samples\Theming\ThemeBrowser\ShinyBlue.xaml into your project. Remember to change the file type to Content. At the end, use the below code to apply the template.

// C#
// Style must be loaded from the resources
// Loading styles from remote server is not allowed
Uri uri = new Uri("ShinyBlue.xaml", UriKind.Relative);
ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);
ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);
ImplicitStyleManager.Apply(LayoutRoot);

The sample below is made based on the Audio Player I implemented before.

Actually, I am not video expert and you may find that the application may not be perfect. For example, the seek function in Flash is not working very well and I have no idea to set the smooth properties in Flash as well. (But may be it’s the problem of Flash)

Anyway, enjoy it~

Vote for this sample

Comparison

Flash implementation: 1 hour (Implemented First)
Silverlight implementation: 35 minutes 
What’s the difference?

• fl.video.VideoPlayer [AS3] vs Window.controls.MediaElement[C#]

Source codes

•   Media Player [Flash 9, AS3] (519.9 KiB, 249 hits)
•   Media Player [Silverlight 2, C#] (30.4 KiB, 337 hits)

Silverlight

fl.video.VideoPlayer [AS3] vs Window.controls.MediaElement[C#]

There are many ways to load video in Flash. In the sample above, I used the Class VideoPlayer. It’s because it has some standard functions for checking the download progress and status.

Please note that if you want to use the VideoPlayer, you have to drag the FLVPlayback component into the Library first.

// C#
// create a video control
var player:VideoPlayer = new VideoPlayer();
player.addEventListener(ProgressEvent.PROGRESS, on_progress);
player.addEventListener(Event.COMPLETE, on_video_complete);
player.play(URL, 0);

// detect the download progress
private function on_progress(e : ProgressEvent):void{
        trace(e.bytesLoaded , e.bytesTotal);
}

// Dispatched once the player finished playing
private function on_video_complete(e:Event):void{

}

For Silverlight, the way you load video is similar to audio. That’s why the implementation time is much less than Flash.

// C#
// create a video control
MediaElement mediaElement;
mediaElement.Source = new Uri(URL, UriKind.Absolute);
mediaElement.DownloadProgressChanged += new RoutedEventHandler(_mediaElement_DownloadProgressChanged);

// detect the download progress
void _mediaElement_DownloadProgressChanged(object sender, RoutedEventArgs e)
{

}

This is the first audio sample. It demonstrates the basic workflow of loading an external audio. You can also see the differences in pausing, replaying and seeking the audio element.

It seems that Flash has some bugs when trying to play at a specific position. You may experience that the progress bar will drop to zero when you click on the second half of the bar. However, it works perfectly in my Flash IDE and I don’t have any idea how to solve it.

Vote for this sample

Comparison

Flash implementation: 1 hour
Silverlight implementation: 1 hour  (Implemented First)
What’s the difference?

• Sound [AS3] vs MediaElement [C#]

Source codes

•   Audio Player [Flash 9, AS3] (324.6 KiB, 332 hits)
•   Audio Player [Silverlight 2, C#] (25.3 KiB, 351 hits)

Silverlight

Sound [AS3] vs MediaElement [C#]

Here is a simple demonstration in manipulating an external audio.

// AS3
var _sound:Sound;
var _soundChannel:SoundChannel;
var _position:Number;

var request : URLRequest = new URLRequest(URL);
_sound = new Sound();
_sound.addEventListener(Event.COMPLETE, on_complete);
_sound.load(request);  

// finish loading, play the audio
private function on_complete(e : Event):void{
	_soundChannel = _sound.play();
}

// pause the audio
_position = _soundChannel.position;
_soundChannel.stop();

// replay the audio
_soundChannel = _sound.play_position;

In Silverlight, Video and Audio shared the same Class MediaElement. Don’t forget to add the object to the stage. Otherwise, you can never load the audio. Personally, I like the Audio Object in Silverlight since the API seems simpler to use.

// C#
MediaElement _mediaElement = new MediaElement();
_mediaElement.Source = new Uri(URL, UriKind.Absolute);
_mediaElement.MediaOpened += new RoutedEventHandler(_mediaElement_MediaOpened);
LayoutRoot.Children.Add(_mediaElement);

// finish loading, play the audio
void _mediaElement_MediaOpened(object sender, RoutedEventArgs e)
{
	_mediaElement.Play();
}

// pause the audio
_mediaElement.Pause();

// replay the audio
_mediaElement.Play();