Friday, February 1, 2013

Splash Screen example for Silverlight

create SplashScreen.xaml in ProjectName.Web project

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignWidth="800" d:DesignHeight="600"
        x:Name="parentControl"
        Background="Black">
    <Canvas Width="300" Height="60" VerticalAlignment="Center" HorizontalAlignment="Center" >
        <Border BorderBrush="#FFAAAAAA" BorderThickness="1" HorizontalAlignment="Left" Height="10" Margin="0" VerticalAlignment="Top" Width="300" Canvas.Top="40">
            <Rectangle Fill="#FF555555" Height="10" Width="300" RenderTransformOrigin="0,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Rectangle.RenderTransform>
                    <ScaleTransform x:Name="progressBar" ScaleX="0"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Border>
        <TextBlock x:Name="status" Height="20" Canvas.Left="0" Text="Loading..." TextWrapping="Wrap" Canvas.Top="20" Foreground="#FFAAAAAA" Width="300" FontSize="13.333" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Arial"/>
    </Canvas>
</Grid>

create SplashScreen.js in ProjectName.Web project 


function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("status").Text = "Loading: " + Math.round(eventArgs.progress * 100) + "%";
    sender.findName("progressBar").ScaleX = Math.round(eventArgs.progress * 100) / 100;
} 


default.aspx file fix below:

<script type="text/javascript" src="SplashScreen.js"></script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/ProjectName.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="5.0.61118.0" />
          <param name="autoUpgrade" value="true" />
          <param name="splashscreensource" value="SplashScreen.xaml"/>
          <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>

No comments: