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

Uso de la Interfaz INotifyPropertyChanged y Compreder el uso de ViewModels – Silverlight

http://www.facebook.com/widgets/like.php?href=https://javierleal.wordpress.com/2011/11/10/uso-de-la-interfaz-inotifypropertychanged-y-compreder-el-uso-de-viewmodels-silverlight/

Hola amigos Internautas amantes de las tecnologías, En Silverlight una de las interfaces mas usadas es la INotifyPropertyChanged la cual se encarga de validar si una propiedad de la clase ViewModel de una pagina de Silverlight ha cambiado de valor y por lo tanto cuando esta cambia de valor esta se mostrara de manera automática a la Propiedad que le pases en Binding con el nombre de esa propiedad que puede ser del tipo que quieras un Bool, string, una colección de datos entre otras.

- Para comenzar en visual Studio 2010 vamos a crear un nuevo proyecto de Silverlight (Creo que ya esto lo sabemos hacer desde hace tiempo)

-Creamos una nueva Carpeta llamada ViewModels y dentro crearemos una nueva clase llamada PrincipalVM la cual tendrá implementada la interfaz ante descrita y crearemos un método  Publico llamado OnPropertyChanged con un parámetro de tipo string este método es el que disparara el evento de cambio según la propiedad que se le haya colocado como parámetro que será descrito en un simple dato de tipo String escrito tal cual. Ejemplo del código de la clase:

//HACER LA REFERENCIA A LA SIGUIENTE CLASE
using System.ComponentModel;

namespace DemoINotifyPropertyChanged.ViewModels
{
//IMPLEMENTAR LA INTERFAZ A LA CLASE
public class PrincipalVM : INotifyPropertyChanged
{
//CREAR VARIABLE DE TIPO EVENTO LA CUAL REPRESENTA EL EVENTO DE PROPIEDAD CAMBIANA
public event PropertyChangedEventHandler PropertyChanged;

        //METODO QUE RECIBE UNA PARAMETRO DE TIPO STRING
public  void OnPropertyChanged(string name)
{
//INICIALIZAR EL EVENTO DE PROPIEDAD CAMBIADA
PropertyChangedEventHandler handler = PropertyChanged;
//VERIFICAR SI EL EVENTO ES DIFERENTE DE NULO ES DECIR SI NO SE INICIALIZO EL EVENTO
if (handler != null)
{
//SI ES DIFERENTE DE NULO DISPARA EL EVENTO CON EL NOMBRE DE LA PROPIEDAD QUE SERA EL PARAMETRO STRING DEL METODO
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}

Un vez que ya creamos nuestras clase ViewModel principal todas las paginas que hagas en Silverlight van a requerir de este método para poder disparar el evento de propiedad Cambiada aquí en esta clase puedes colocar otros métodos que necesites en todas las paginas por que la idea es Heredas los ViewModel de cada pagina a esta clase para usar en todas el métodos y no tener que repetir  el código en todas, es la razón por la cual se realizo en una clase aparte.

Por defecto Silverlight trae una pagina Home ya que es una plantilla vamos a crear el HomeViewModel que no es mas que otra clase, esta heredada de PrincioalVM y les haremos algunas propiedades para mostrarlas en pantalla en un texto Sencillo, Y unas de tipo Boolena para ver como pasar el Binding a través de XAML.

namespace DemoINotifyPropertyChanged.ViewModels
{
public class HomeViewModel : PrincipalVM
{
private string _texto;
public string texto
{            get
{                return _texto;
}            set
{                _texto = value;
OnPropertyChanged("texto");
}
}

private string _textoValor;
public string textoValor
{            get
{                return _textoValor;
}            set
{                _textoValor = value;
OnPropertyChanged("textoValor");
}
}

private Boolean _esActivo;
public Boolean
 esActivo
{            get
{                return _esActivo;
}            set
{                _esActivo = value;
OnPropertyChanged("esActivo");
}
}

    }
}

Ahora en el Sourse del codigo del Home asignaremos esta clase como en Contexto de la pagina Home asi casamos el ViewModel a la vista y se puede hacer de dos forma por código directo XAML, por código directo C shard o desde expression Blend asignandole  un nuevo Contex a la pagina.

Mostrare el primer método por código C shard:

//REFERENCIA AL NAMESPACE DONDE ESTAN TODOS LOS VIENMODELS
using DemoINotifyPropertyChanged.ViewModels;

namespace DemoINotifyPropertyChanged
{
public partial class Home: Page
{        //VARIABLE DE TIPO CLASE DEL VIEMMODEL CORRESPONDIENTE A ESTA PAGINA
HomeViewModel Models;
public MainPage()
{            InitializeComponent();
//Inicializa la clase ViemModel de la vista
Models = new HomeViewModel();
//Asignar el DataConext a esta pagina
this.DataContext = Models;

        }
}
}

Mostrare el Método desde Expression Blend y Mostrar como Quedaría el XAML

Código XAML Estableciendo el Conext de la pagina:

Como estoy usando una plantilla de Silverlight este XAML ya tiene unas cosas estructuradas de diseño

Esto permitirá ya hacer algunos Binding a mi pagina que apunten a las propiedades del ViewModel Asignado como contexto,

Como ejemplo en Pantalla se colocara 1 TextBox, 2 TextBlog y 1 CheckBox

La demostracion sera Asiganle el Bindin de la propiedad Texto a un textBlog y al Textbox con la diferencia que el Textbox tendra el Bindin en Mode Toway ASI el vamor cambiado sera tomado por la propiedad al momento de tabular o salir del TextBox estas trabajaran con la propiedad Text, para el CheckBox trabajaremos asignandole el  Binding a la propiedad IsChecked que es un Booleano por lo tanto se le asignara la propiedad booleana esactivo y haremos cambiar el textovalor para que el textbock faltante nos indique si ha cambiado un ejemplo sencillo peor que muestra como usar la interfaz, las propiedades segun sus diferentes tipos de datos y los Binding:

• ASIGNACION MANUAL DE EL Binding al primer TextBox que recibe Texto y cambiara con twoway.

Ahora explicaremos como asociar la propiedad por Expression Blend para ellos requere que el Contexto de la pagina sea asociado antes directo desde Blend lo tienes asociado en codigo y por XAML no hay ningun problema.

Presionas sobre el pequeño punto al lado de la propiedad que deseas Bindiar.

Eliges la opción Enlace a datos:

Si tienes bien asignado el conexto veras todas las propiedades que estan en el viewModel que estas asociando elijes la que deseas y presionas Aceptar, puedes ver que resalte algo de azul en estas opciones puedes ver como asignarte el TwoWay y otras opciones aparecera siempre que se puede en el caso de un Texblock no esta permitido ya que no puede editar texto en un Texblock.

Como puedes ver en todos los controlas y en todas sus propiedades puedes hacer esto solo debes estar seguro que la propiedad es del tipo correspondiente al que exije la propiedad.. Si lo haces directo desde Blend este te indica cuales propiedades puedes casar a una propiedad de una control en este caso es un booleano y solo te dejara asociar un Booleano.

Al otro Texblock le asignaremos texto Valor y modificaremos el set y get del esactivo para determinar si ha cambiado o no.

el cambio seria el siguiente en la propiedad esActivo:

private Boolean _esActivo = true;
public Boolean esActivo
{
get
{        return _esActivo;
}
set
{        _esActivo = value;
if (value == true)
{
textoValor = "Es true";

        } else
{
textoValor = "Es False";
}        OnPropertyChanged("esActivo");
}
}

Y probamos es un demos realmente sencillo pero ayuda bastante a comprender la interfaz y como trabajar con un ViewModel que se aplica a las mejores practicas de desarrollo bajo Silverlight.

Hay que tomar en cuenta que a cualquier propiedad que tu deseas tu le puedes aplicar un Binding lo que debes cuidar es que siempre la propiedad que se le este pasando concuerden los datos puede ser una colección de datos que llene un GrigView o Un combo y si usas una entidad de datos puedes personalizar el template para decidir que datos de la colección mostrar.

Resultado sencillo:

Pronto les coloco el código espero que les guste