Willy laroche

B10g $ur 13$ t3chn0$ M!cr0$0ft 3t p1u$ $! 4ff!n!té$…

Créer un splash screen original en XAML

Poster un commentaire

Profiter du Designer de Visual Studio 2010 ou de Blend pour concevoir le splash, voici le mien:
Code XAML :
    <Grid x:Name= »LayoutRoot » Background= »White » ShowGridLines= »True »>
        <StackPanel Canvas.ZIndex= »1000″ Orientation= »Horizontal » Visibility= »Visible » VerticalAlignment= »Center » HorizontalAlignment= »Center » Margin= »0,0,0,50″>
            <TextBlock x:Name= »txtPercent » FontSize= »120″ Opacity= »0.05″ VerticalAlignment= »Bottom »>
                <Run Text= »00″/>
            TextBlock>
        StackPanel>
        <StackPanel Orientation= »Vertical » VerticalAlignment= »Center » HorizontalAlignment= »Center » Margin= »0,0,0,50″>
            <Grid Height= »Auto » HorizontalAlignment= »Center » VerticalAlignment= »Center » Width= »Auto »>
                <Rectangle x:Name= »progressBarBackground » Stroke= »Black » StrokeThickness= »1″ Height= »8″ VerticalAlignment= »Center » Width= »150″ Margin= »0,0,0,0″/>
                <Rectangle x:Name= »progressBar » Fill= »Orange » Width= »0″ Height= »6″ HorizontalAlignment= »Left » VerticalAlignment= »Center » Margin= »1,0,1,0″/>
            Grid>
        StackPanel>
    Grid>
Grid>
Les éléments surlignés sont importants car ils seront mis à jour par l’intermédiaire du script javascript ci-dessous.
Pensez à retirer la balise et garder uniquement le dans le XAML.

Le splash est créé en XAML. Il doit être placé au même emplacement que votre page Aspx qui lancera l’application Silverlight.
Dans la page Aspx qui lancera le xap, rajouter :
<object data= »data:application/x-silverlight-2, » type= »application/x-silverlight-2″
            width= »100% » height= »100% »>
            <param name= »source » value= »ClientBin/WLA_SilverlightDemo.xap » />
            <param name= »onError » value= »onSilverlightError » />
            <param name= »background » value= »white » />
            <param name= »minRuntimeVersion » value= »4.0.50826.0″ />
            <param name= »autoUpgrade » value= »true » />
            <param name= »splashscreensource » value= »Splash.xaml » />
            <param name= »onSourceDownloadProgressChanged » value= »onSourceDownloadProgressChanged » />
            <a href= »http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0&Prime; style= »text-decoration: none »>
                <img src= »http://go.microsoft.com/fwlink/?LinkId=161376&Prime; alt= »Get Microsoft Silverlight »
                    style= »border-style: none » />
            a>
        object>
Et le lien vers le script javascript permettant de mettre à jour la progress bar du splash :
<script type= »text/javascript » src= »Splash.js »>script>
Splash.js contient simplement une fonction pour mettre à jour la progress bar:
function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName(« txtPercent »).Text = Math.round((eventArgs.progress * 100)) +  » % »;
    if (eventArgs.progress * sender.findName(« progressBarBackground »).Width – 2 > 0) {
        sender.findName(« progressBar »).Width = eventArgs.progress * sender.findName(« progressBarBackground »).Width – 2;
    }
}
Il se peut que le splash screen ne s’affiche pas au lancement  parce qu’il n’a pas le temps…
Utilisez Sloppy qui est un outil permettant de réduire la bande passante. Il faut lancer votre site Web à partir de cet outil :
Le télécharger c’est ici : http://www.dallaway.com/sloppy/download.html
Aperçu:
Voilà.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s