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>

TextTrimming

Hoy he leído que Silverlight 4 ya incluirá un control que TextTrimming. Este control es capaz de ajustar un texto al tamaño de un TextBlock y cortarlo concatenándole “…” en caso de que sea demasiado largo y no entre dentro del TextBlock.

“Sertor7G es un blog sobre…”

El otro día tuve que implementar esta funcionalidad en una de las aplicación que estoy desarrollando sobre Silverlight 3. Después de buscar en google, encontré un post donde exponían el código fuente de un control que se habían hecho a mano. Dejo la dirección del blog por si a alguien le resulta de utilidad TextTrimming TextBlock for Silverlight . Dentro del código fuente describen los términos de licencia de su uso.

Migración de Silverilght 2 a Silverlight 3

Ahora que ha salido Silverilght 3 seguramente se empiecen a migrar muchos proyectos hechos con Silverlight 2 a esta nueva versión. No es que sea estrictamente necesario, ya que con el plug-in de Silverlight 3 se pueden ejecutar ambas versiones. Aunque si se quieren aprovechar las novedades de Silverlight 3 es algo recomendable migrar. Además el proceso de migración es bastante sencillo, como se describe a continuación.

Paso 1: El primer paso es erradicar de la máquina cualquier vestigio de Silverlight 2. Así que hay que desinstalar: Silverlight 2 SDK, Silverlight 2.0 tools for VS2008 SP1 y Silverlight. Si el equipo tiene instalado el toolkit de controles para Siverlight 2, también es necesario desinstalarlo.

Paso 2: El siguiente paso es instalar Silverlight 3. Hay que instalar todas las herramientas: Silverlight 3 Tools for Visual Studio 2008 SP1 y Silverlight 3. Opcionalmente se puede instalar el Silverlight Toolkit.

Nota: Silverlight 3.0 tools for VS2008 SP1 instala el SDK también.

Paso 3: Una vez instalado Silverlight 3 hay que abrir la solución del proyecto a migrar. Al abrirla Visual Studio lanzará un Wizard. Este Wizard se encarga de realizar la migración de los proyecto.

Paso 4: Hay que cambiar la versión de Silverlight utilizada en nuestra página. Así que hay que cambiar el valor de la propiedad MinimumVersion de 2.0.31005.0 a 3.0.40624.0.

Paso 5: Cambiar de referencias de controles y librerías. Por ejemplo en el caso del control AutoCompleteBox, ya no se encuentra en el control toolkil. Si no que el control AutoCompleteBox ha sido absorbido por la librería de controles propia de Silverlight.

El proceso de migración es bastante sencillo. Si la aplicación es de un tamaño mediano / grande y se han utilizado controles del control toolkit, probablemente de bastante guerra hacer que compile.