Vanguarsoft Developers blog

Ing. Javier Leal -Desarrollador CPANAX C.A / Microsoft Student Partners – VENEZUELA

Personalizar pantalla de Carga de Silverlight

3 comentarios

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.

image

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.

image

image

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

image

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.

image

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

image

Autor: Ing. Javier J. Leal H.

Desarrollador en CPANAX C.A, Microsoft Student Partners de Venezuela Amantes de nuevas Tecnologías Desarrollador es Silverlight 5, Windows 8, Windows Phone, Influenciador y Orador en Actividades Tecnológicas Microsoft

3 pensamientos en “Personalizar pantalla de Carga de Silverlight

  1. Hola disculpa no consigo cambiar la pantalla de carga de silverlight estoy utilizando visual studio 2010 y silverlight 4 no se q este haciendo mal ya segui tus instrucciones al pie de la letra mi correo es clovers_rch@hotmail.com te agradeceria mucho tu ayuda.

  2. Carlos Acabo de hacer este codigo y me funciono perfectamente, quiza es que no estas agregando las referencia del ultimo paso, o estas escribiendo mal algun metodo de del js, por fa revisa bien y me pones al tanto..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s