Silverlight Tip: Splash screen issues.
Today I worked on silverlight splash screen for our site and found that documentation about splash screen is very poor and cause many misunderstandings. In this post i'll try to make some of them disappear. =)
Because of silverlight splash screen is managed with JavaScript many people thinks that they cannot use layout controls (grid, stackpanel etc) which appeared only in silverlight 2.0. As I found out this is not true. You can use them, but if you open your splashscreen.xaml in blend you will get some errors, because all xaml files inside web project are recognized as silverlight 1.0 files.
It is very useful to use grid for building splash screen, because your can easily ceter it with this control. With canvas centering of your splash screen will be little javascript nightmare =)
Here i will give u simple example of splash screen, which consists of centered textblock, where i will show current download progress.
SplashScreen.xaml:
1: <Grid
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: >
5: <Grid x:Name="LayoutRoot" Background="{x:Null}" Width="200" Height="200">
6: <TextBlock x:Name="ProgressText" Margin="0,0,0,0" Text="0%" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontSize="24" FontWeight="Bold" Opacity="1" Foreground="#FF716770"/>
7: </Grid>
8: </Grid>
SilverlightTestPage.aspx:
1: <head runat="server">
2: <title>SilverlightApplication</title>
3: <script type="text/javascript">1:2: function OnSourceDownloadProgressChanged(sender, args) {3: var root = sender.get_element().content;4: var progress = Math.round((args.get_progress() * 100))5: root.findName("ProgressText").Text = progress + "%";6: }7:</script>
4: </head>
5: <body style="height:100%;margin:0;">
6: <form id="form1" runat="server" style="height:100%;">
7: <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
8: <div style="height:100%;">
9: <asp:Silverlight ID="Xaml1" runat="server"
10: SplashScreenSource="~/MyApp.xaml" OnPluginSourceDownloadProgressChanged="OnSourceDownloadProgressChanged"
11: Source="~/ClientBin/SilverlightApplication.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
12: </div>
13: </form>
14: </body>