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));
}
}
}
}
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");
}
}
}
}
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");
}
}
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
