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!)
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, 835 hits)
- Theming [Silverlight 2, C#] (165.5 KiB, 1,400 hits)
Flash
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);
January 5th, 2009 at 7:16 am
One problem with Silverlight is you can’t change the style property of a control more than once at runtime. It throws a weird exception…
January 5th, 2009 at 11:41 am
how about the design tools~~~~~~~~~~?
January 5th, 2009 at 12:59 pm
Automotive CRM Guy:
Ya, you can only apply theme once only.
Leio:
I may not talk about the design tool since I am not a good designer! haha
January 5th, 2009 at 2:40 pm
Flex apps can be styled using CSS and that CSS can also be changed on runtime! It doesn’t have to be compiled like you claim in this article. With runtime CSS, Flash is clearly the winner!
January 5th, 2009 at 6:32 pm
[...] Deshalb vergleicht Shindraw - Your Flash and Silverlight Repository den Vergleich des Theming and Styling in Silverlight und Flash. [...]
January 5th, 2009 at 8:23 pm
Is it just me or do other people also have the problem that the silverlight example is blank?
I do get the loading thing and it goes to 100% but after that its just blank. Tested it with IE 7 and FireFox 3.
January 5th, 2009 at 8:56 pm
Silverlight example is blank for me too. SL 2.0.31005.0
January 5th, 2009 at 10:41 pm
silverlight example is blank :(
January 5th, 2009 at 11:39 pm
oh. that’s funny.
It’s working fine for me. Is there any one can see the sample?
January 5th, 2009 at 11:45 pm
Blank for me too :(
SL 2.0.31005.0
January 6th, 2009 at 2:28 am
It would seem that a majority of people who visit this site use IE, hence the score for SL. I use chrome and the SL example is blank, so I certainly cannot vote for SL.
January 6th, 2009 at 5:43 am
I am using Chrome and the SL shows up fine for me.
January 6th, 2009 at 12:45 pm
I asked this question before, but I hope someone will answer it for me.
Can I compile your Flash version using the open source version of the Flex 3 SDK?
If not, what do you suggest?
Thanks.
P.S. the Silverlight app is all white.
January 6th, 2009 at 1:41 pm
Fallon, the sample this time is make by Flex and I am sure you can compile with Flex 3 SDK. For previous samples, I didn’t try the to compile with SDK. However, theortically, you can do this as well.
By the way, the sample I made work for me in IE, Firefox and Safari. I wonder if the client has to install the Silverlight Toolkit or it requires .net framework 3.5 to run it?
I will check that out.
January 6th, 2009 at 2:01 pm
The client shouldn’t have to have any of those things.
I just looked at in FireFox, and it’s still all white, which generally means an exception of some sort.
By the way, I ask about Flash because even though I’ve never developed in Flash, and LOVE Silverlight more, clients want RIA on their websites.
We don’t have time to wait for the years it’s going to take Silverlight to be useable on the internet. We’ll use Silverlight on intranet applications, but it looks like Flash wins for general applications.
Customers can’t base their businesses on a technology that nobody has, and generally won’t download.
January 6th, 2009 at 6:10 pm
Fallon, I agree with you.
I would rather blame the blank problem to Microsoft.
How shall I solve the problem when everything working fine for me? haha
January 6th, 2009 at 8:55 pm
I dunno if this is the problem because im no developer ;-) but I get a couple of errors when opening the project in expression blend. All the errors are in the Microsoft.Windows.Controls.Theming.ShinyRed.xaml file.
It says that it cant find the resource file on line 1519 for example. This line contains:
Style=”{StaticResource System.Windows.Controls.Primitives.ScrollBar}”
I did add all the necessary .dll files
January 7th, 2009 at 2:30 am
Rick, could you please check if you have added the following references?
System.Windows.Controls
System.Windows.Controls.Data
January 7th, 2009 at 10:32 am
No doubt Flash is the best !
could someone please tell me where can I find Silverlight’s Platform?
is there anything like that at all?
;)
January 7th, 2009 at 3:51 pm
@admin
I did add those references and when I build I got a blank screen. Next thing I did was delete those 2 references and added the onces that where in the .xap file. This seems to help a bit. Now when i build i can see the controls but after clicking on the button the screen turns blank again.
Still getting those errors in expression blend:
The resource “System.Windows.Controls.Primitives.Scrollbar” could not be resolved.
January 10th, 2009 at 1:06 pm
Terrance, Excellent stuff! Thanks for compiling that.
I’m really happy to see ImplicitStyleManager is growing in popularity.
I Especially think that there’s a noticeable difference in professional finish between the Microsoft shipped themes with the Flex theme.
Terrance, keep up this extremely high quality content coming. I love this blog :)
– Justin
Microsoft Silverlight Program Manager
January 28th, 2009 at 11:30 pm
It´s a joke, or or its is so silverbright that I could not see it ? :>
Blah, silverlight is crap.
May 9th, 2009 at 10:46 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 9th, 2009 at 11:32 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 10th, 2009 at 1:00 am
[...] Flash vs. Silverlight: Theming and Styling [...]
May 10th, 2009 at 5:24 am
Dont use chrome it sucks.
May 11th, 2009 at 1:32 am
[...] Flash vs. Silverlight: Theming and Styling [...]
May 11th, 2009 at 3:48 am
[...] Flash vs. Silverlight: Theming and Styling [...]
May 11th, 2009 at 12:13 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 11th, 2009 at 12:50 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 11th, 2009 at 3:23 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 12th, 2009 at 8:50 am
[...] Flash vs. Silverlight: Theming and Styling [...]
May 13th, 2009 at 5:12 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
May 14th, 2009 at 9:35 am
리거니의 생각…
Flash vs Silverlight: Theming and Styling…
July 2nd, 2009 at 10:05 am
[...] Flash vs. Silverlight: Theming and Styling [...]
September 25th, 2009 at 5:12 am
[...] Flash vs. Silverlight: Theming and Styling [...]
September 26th, 2009 at 11:44 am
[...] Flash vs. Silverlight: Theming and Styling [...]
October 28th, 2009 at 4:51 am
[...] Flash vs. Silverlight: Theming and Styling [...]
January 16th, 2010 at 4:16 pm
Благодарю. Давно такое искал :)
June 9th, 2010 at 6:02 am
good silverlight theme sample.
spam-dev.
June 16th, 2010 at 10:50 pm
[...] Flash vs. Silverlight: Theming and Styling [...]
August 10th, 2010 at 1:48 pm
that’s incredible.
September 15th, 2010 at 7:29 am
Cool, there are truly some very good points on this post most of my readers may find this useful, I’ll post a link, appreciate it.
October 31st, 2010 at 3:05 am
Outstanding details for upload files for having myself get started. I will keep this particular website link and revisit it.
March 28th, 2011 at 3:06 am
20. I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one today..
May 26th, 2011 at 10:32 pm
Good information, a number of thanks to the author. It’s puzzling to me now, typically, the usefulness as well as significance is overpowering. Vastly thanks again and better of luck!
January 4th, 2012 at 4:31 pm
Your way of describing the whole thing in this post is actually good, every one can easily know it, Thanks a lot.