SplashScreen en Silverlight

Cuando una aplicación o componente Silverlight es cargado aparece un icono indicando que el plugin se está cargando. Existe un diseño por defecto. Este Sphlas Screen puede modificarse por uno de diseño propio. Lo único que hay que tener en cuenta es que sólo se pueden utilizar controles de Silverlight 1.0.

Para crear un nuevo SplashScreen hay que añadir al proyecto web un nuevo elemento del tipo Silverlight JScript Page. Esto añade al proyecto dos archivos: uno archivo .xaml y otro .js. Dentro del .xaml irá el diseño de la pantalla y en el .js su funcionalidad.

Dentro de la definición del control de Silverlight se le puede indicar que utilice la nueva página como Splash Screen. Para ello se hace uso de la propiedad SplashScreenSource.

<asp:Silverlight runat="server"
    Source="~/ClientBin/Client.xap" 
    MinimumVersion="3.0.40624.0" 
    SplashScreenSource="~/SplashScreen.xaml" />

Para conseguir centrar nuestro diseño dentro de la ventana, lo más sencillo es utilizar un elemento Grid, con el tamaño a Auto. Este elemento por si sólo centrará cualquier elemento hijo.

<Grid xmlns=«http://schemas.microsoft.com/winfx/2006/xaml/presentation»
      xmlns:x=«http://schemas.microsoft.com/winfx/2006/xaml»
      Background=«Black«>
</Grid>

Para suscribirse al evento que indica el porcentaje cargado hay que definir un método dentro del archivo .js. Este método actuará de handler para el evento OnSourceDownloadProgressChanged.

function onSourceDownloadProgressChanged(sender, eventArgs){
 sender.findName("progressBar").Width = 
   eventArgs.progress * sender.findName("progressBarBackground").Width;
}

Para asociar el método se debe de utilizar la propiedad OnSourceDownloadProgressChanged.

<param name="onSourceDownloadProgressChanged" 
    value="onSourceDownloadProgressChanged" />

Un diseño completo como ejemplo podría ser:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Background="Black">
  <StackPanel>
    <TextBlock Text="Sector7G" 
               FontSize="14" 
               Foreground="#FFFFFFFF" 
               HorizontalAlignment="Center" 
               FontFamily="Segoe UI" 
               FontWeight="Bold"/>
    <Border x:Name="progressBarBackground" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center" 
            BorderBrush="#FFB6D5EC" 
            BorderThickness="1" 
            Height="14" 
            Width="200">
      <Rectangle x:Name="progressBar" 
                 Width="0" 
                 Height="14" 
                 HorizontalAlignment="Left" 
                 Margin="1" 
                 VerticalAlignment="Bottom">
        <Rectangle.Fill>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF6DAAD9" Offset="0.548"/>
            <GradientStop Color="#FF496272" Offset="0.961"/>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
    </Border>
  </StackPanel>
</Grid>