There are a lot of information in the web in order to do this, but not many of them gathered the information to explain some features that I needed: full screen, animations, logic inside this screen. I am going to try to gather all this information in this post.
Steps to adapt the splash screen:
1.- Add a silverlight javascript page in the server project. This will create the xaml page and a javascript file:
2.- Modify the default page of the server (html or aspx) taking into account that if you have include the before xaml in a folder, you have to include it in the param "SplashScreenSource":
<body onBeforeUnload="return ExitApplication()">
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object id="SliverlightPlugin" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/ApplicationSilverlight.xap"/>
<param name="SplashScreenSource" value="SplashScreen/SplashScreen.xaml" />
<param name="windowless" value="true" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.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>
3.- If you need to change something within your splash screen, you have to link the javascript that was created when you added the silverlight javascript xaml (step 1) in the default page of the server.
<script type="text/javascript" src="Silverlight.js"></script>
and define two javascript events in that javascript file:
* onSourceDownloadProgressChanged: This event informs about the progression for downloading the silverlight project. Then, if you have a kind of progressbar in your page, you will need this event.
* onSourceDownlaodedComplete: This event is raised when the download has finished.
<param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
<param name="onSourceDownlaodedComplete" value="onSourceDownlaodedComplete" />
Take into account that this is javascript, following I have copied a sample of code in order to retrieve elements of the silverlight splash screen:
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("uxStatus").Text = "Loading XAP: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
}
FULLSCREEN
You are able to change everything you need in the xaml, even change the main element (by default is a canvas) for a Grid container (doing this, this view can viewed in full screen). Nevertheless, you cannot include any resources like storyboards or styles.
ANIMATIONS
If you need to implement some animations, you have to do it using Triggers where you will specify the event that will begin the animation in the RoutedEvent property. Then you are able to put any storyboard inside:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Trigger Animation -->
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<!-- Animation repeating forever and with autoreverse -->
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
The final result is:
No hay comentarios:
Publicar un comentario