For anyone near Montreal don’t miss this user group special event in less than 30 days:
Click on the image to register.
Please note the event is free for members of the Montreal .NET Community.
Should be fun and we will have tons of cool giveaways!
Microsoft Learning has just released an online course "Introduction to XAML" which is free.
To access the course follow this link:
Clinic 6375AE: Introduction to XAML
This two-hour clinic provides you with an introduction to XAML. It also describes how the features of XAML can help designers and developers save time and effort while creating applications with XAML and WPF.
This clinic covers the following topics.
- Background and uses of XAML
- Using XAML and WPF to create GUIs
- Using styles, ControlTemplates, and resources
The pre-requisites for this clinic are as follows:
- Familiarity with Microsoft Visual Studio 2005 or Microsoft Visual Studio 2008
- Knowledge of Microsoft .NET Framework version 2.0, Microsoft .NET Framework version 3.0 (formerly WinFX), and Microsoft .NET Framework version 3.5
- Knowledge of C#, Microsoft Visual Basic .NET
- Familiarity with XML
Worried about what’s coming in the next version of Silverlight ?
Did you know that you can raise your voice for new features ? print support, mouse right click, Silverlight on iPhone…?
Act now! go to http://silverlight.uservoice.com/ and propose/vote for new features.
The first time a user visit the page which holds your Silverlight app, the browser needs to download the XAP file first, but sometimes this file can become large, so Silverlight automatically displays its default “loading screen”, also called a “Splash Screen”:
Good news is you can customize the default splash screen!
Build the animation in XAML
My goal in this tutorial is to display an animated UI and a progress bar, something like this:
Create a new blank XAML file in the web project, not in the Silverlight project as we want the plug-in to be able to display this file while your Silverlight app is loading, so it must not reside in the xap. Here I create a blank splash.xaml file in ClientBin folder. Also this is not a regular Silverlight xaml page with codebehind, so just create a new xml file and rename it as xaml.
Keep in mind that in this xaml splash screen you can only use Silverlight controls from the core plugin (no DataGrid, Calendar, Toolkit controls here…) because your app and referenced assemblies are not there yet…
Feel free to use Expression Blend to design this page.
For the animation part I use an Ellipse with a RotateTransform and animate its Angle property from 0 to 360 during 2 sec with a DoubleAnimation. The Ellipse will animate continuously until the xap has finished downloading.
For the progress bar I use 2 Rectangle, one for the black border and a green one to fill the former.
<Rectangle Stroke="#FF000000" Width="384" Height="29" RadiusX="2" RadiusY="2" StrokeThickness="3"/> <Rectangle Fill="#FF03FF00" StrokeThickness="0" Width="377" Height="23.25" RenderTransformOrigin="0,0.5"> <Rectangle.RenderTransform> <ScaleTransform x:Name="progressBarScale" /> </Rectangle.RenderTransform> </Rectangle> <TextBlock Width="272" Height="62" Foreground="#FFFFFFFF" Text="" TextWrapping="Wrap" x:Name="txtLoading" FontSize="30"/>
The TextBlock will simply display progress percentage.
Activate your splash screen
To make your Silverlight application use your custom splash screen you set the SplashScreenSource object tag parameter and point to the xaml file.
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"> <param name="source" value="ClientBin/CustomSplashScreen.xap"/> <param name="SplashScreenSource" value="ClientBin/splash.xaml" /> <param name="onSourceDownloadProgressChanged" value="DownloadProgress" /> </object>
For a comprehensive list of Silverlight param, see my previous post.
eventArgs.progress provide the loading progress value as a number from 0 to 1.
findName() function gets reference to the XAML element by x:Name, so we can display progress percentage in the TextBlock, and update the ScaleX property of the ScaleTransform to move the green bar. To make the green bar grow from left to right set the RenderTransformOrigin to 0.
Test your splash screen
Testing your custom splash screen locally can be hard because it loads too fast. To solve this add a big file in your Silverlight project and mark it as “Content” so it gets embedded in the XAP and slow down the loading time.
Here I add a video (big.avi - 90MB) just to try my splash screen, then I will remove it once I am satisfied with my loading experience.
Download source code
The Silverlight Tour is stopping again in Québec, Qc so get ready to enlighten your RIA app with this top Silverlight 3 training.
October 14-16September 28-30
- Where: Québec, Qc
- Registration (Fr): http://www.runatserver.com/SilverlightTraining.aspx
If you are looking for 3 days of intensive Silverlight training in French this is your chance to learn it from soup to nuts!
For other cities/dates please consult:
http://www.runatserver.com/SilverlightTraining.aspx[edit: date changed to September]Technorati Tags: Silverlight
Just a quick note on this as I still found people stuck with this error:
Error: Unhandled Error in Silverlight 2 Application
Message: Failed to load the application. It was built with an obsolete version of Silverlight
This might happen every time you download a sample which was build with Silverlight 2, and you open it in VS2008 updated to Silverlight 3.
The solution is very easy:
Delete the xap file in ClientBin folder and rebuild the Silverlight project.