Personalizar pantalla de Carga de Silverlight

http://www.facebook.com/widgets/like.php?href=https://javierleal.wordpress.com/2011/11/24/personalizar-pantalla-de-carga-de-silverlight/

Hola amigos ahora les traigo un interesante articulo, donde podrán personalizar la pantalla de carga de Silverlight a una que les parezca mas agradable para ustedes.. Esta es la que vemos típicamente..

Obviamente para poder crear una pagina personalizada de carga no se realiza dentro de la aplicación Silverlight que estamos construyendo ya que al aparecer esta pantalla el XAP que genera Silverlight apenas se esta descargando para mostrar la aplicación.

Pero si se puede hacer desde el proyecto Web que esta asociado a nuestro  Sitio

PASO 1

lo primero que debemos haces es cambiar la aplicación a que deje de correr en la pagina ASPX sino en la HTML que están en el proyecto web… para ellos vamos a las propiedades de el proyecto web que esta asociado a Silverlight, puedes darle click derecho propiedades o en el menú proyecto de Visual Studio.

En las propiedades se va a la pestaña web y en la opción pagina especifica en el botón reflejado con el color azul puedes buscar la pagina HTML que tiene el nombre que tú el colocaste al proyecto al crear mas la palabra TESTPAGE.

 

 

 

PASO 2.

Siguiendo en el proyecto Web vas a agregar un nuevo elemento de Tipo Silverlight y Buscas una que se llama Pagina JScript de Silverloght, esta es la que agregaras con el nombre que desees en mi caso le coloque CargaJavierLeal y Este te agregara un Archivo XAML, Y un archivo js ambos debemos modificarlos, haremos una pagina de carga sencilla, te recomiendo que termines el DEMO y luego personalicen tu pagina de carga como desees.

Puedes ver en las imágenes para que te guíes con mas facilidad.

PASO 3.

Se van al HTML y agregaran las siguiente lineas

justo después del Head agrega la invocación al archivo js que acabas de agregar.

<script type="text/javascript" src="CargaJavierLeal.js"></script>

veras que hay varios parámetros estos son los que cargan la aplicación de Silverlight y para que cargue nuestra pantalla de carga personalizada debemos agregarlos, tanto a la invocación del la pagina que acabas de crear como el evento de control de cambios en la carga que lo agregaremos luego de esto al js.

          <param name="splashscreensource" value="CargaJavierLeal.xaml"/>
          <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

 

PASO 4

luego de agregar estos parámetros te vas al archivo js y eliminaras todo lo que este en ese archivo, Se le agregara solo una función que controlara la carga del sitio, y es el siguiente código:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
}

PASO 5

Vamos Al XAML y personaliza tu sitio puedes empezar con este que te estoy colocando aca y luego vas modificando poco a poco, puedes sustituir el código xaml de la pagina que creaste por esto.

<Canvas
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="parentCanvas"
        Width="1024"
        Height="768">
    <Canvas.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#FFBE46BE" Offset="1" />
            <GradientStop Color="White" Offset="0.238" />
        </LinearGradientBrush>
    </Canvas.Background>
    <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Top="365" Canvas.Left="332" Width="357" Height="31.379">
    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>
          <SkewTransform AngleX="0" AngleY="0"/>
          <RotateTransform Angle="270"/>
          <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
      </Rectangle.RenderTransform>
      <Rectangle.Fill>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
          <GradientStop Color="#FFFFFFFF" Offset="1"/>
          <GradientStop Color="#FFFFFFFF" Offset="0"/>
          <GradientStop Color="#FF2975D0" Offset="0.28"/>
          <GradientStop Color="#FF2975D0" Offset="0.72"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
        <Path Width="356.85" Height="1" Fill="#FF80009A" Stretch="Fill" Stroke="#FFFFFFFF" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
        <Path Width="1.662" Height="29.03" Fill="#FF80009A" Stretch="Fill" Stroke="#FFFFFFFF" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

        <Path Width="357.84" Height="1" Fill="#FF80009A" Stretch="Fill" Stroke="#FFFFFFFF" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
        <Path Width="358.85" Height="1" Fill="#FF80009A" Stretch="Fill" Stroke="#FF2975D0" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>
        <Path Width="1.662" Height="30" Fill="#FF80009A" Stretch="Fill" Stroke="#FF2975D0" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>
        <Path Width="1" Height="31" Fill="#FF80009A" Stretch="Fill" Stroke="#FF2975D0" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />
  </Canvas>
    <TextBlock x:Name="uxStatus" Height="66" Canvas.Left="332" Text="Cargando..." TextWrapping="Wrap" Canvas.Top="402" Width="356" FontSize="48" TextAlignment="Center" Foreground="#FF80009A" FontWeight="Normal" FontStyle="Normal" FontFamily="Verdana" />

</Canvas>

PASO 6

No se si esto es obligatorio o fue por que yo borre unas referencias pero cuando compile me faltaban unas dll, por si les pasa los mismo solo agreguen las siguientes DLL.

Ahora solo queda ejecutarlo para probarlo espero que sea de provecho para tus proyectos

Advertisement