Hola en esta serie de videos vamos a ver los pasos básicos para crear controles personalizados los cuales permiten brindar experiencia de usuario y permitir funcionalidad específica para alguna tarea.

1° Forma correcta de implementar un control en Silverlight:

La creación de controles personalizados en Silverlight permite crear herramientas que estén enfocadas para fines específicos tales cómo un control de búsqueda, controles que permitan proveer de una interfaz a los usuarios para que estos puedan interactuar con X aplicación, controles como carruseles de imagenes para poder crear animaciónes circulares entre imagenes, en fin “el limite está en la imaginación”, los pasos más importantes a la hora de crear un control son: estructurar y diseñar con anterioridad lo que quieres que tu control haga, crear el proyecto de una forma limpia debido a que estamos trabajando con lenguaje de Marcado XML, es decir XAML, entonces las referencias y los namespaces son una cuestión a tener muy en cuenta. Deberás crear y organizar la disposición de los archivos cs, styles de forma adecuada. Por ejemplo en una carpeta llamada “Core” puedes agrupar toda la lógica que sea interna a tu control y es impresindible contar con una carpeta themes en la cual deberas crear un archivo de tipo ResourceDictionary en el cual vas a definir los Styles correspondientes a los Tipos creados en los archivos cs, es decir las clases. Veamos cómo podríamos crea en su aspecto básico un control en Silverlight.

2º Agregando diseño y enlazando DependencyProperties, estas ultimas son propiedades las cuales permiten que un objeto pueda enlazar una propiedad con otro objeto dentro de una aplicación Silverlight para este caso, este concepto fue introducido en WPF para permitir “Registrar” sobre que propiedad se quiere efectuar un cambio.

public static DependencyProperty NombrePropiedadProperty =
DependencyProperty.Register(“NombrePropiedad”, typeof(string), typeof(MyClasePropietaria), new PropertyMetadata(null));

En esta primer sección de codigo habrás definido el (“NombrePropiedad”) que es referente al nombre en mayusculas y minusculas (case sensitive) de cómo se va a declarar tu propiedad en la parte inferior, typeof(string) indicara de que tipo es tu propiedad, podría ser int double o un tipo o clase definido por tí mismo, typeof(MyClasePropietaria) esto indica que la propiedad que estas creando es referente a la “propiedad” valga la redundancí de la clase en la cual estas declarando la DependencyProperty y para el final
new PropertyMetadata(null) te permitirá indicar con que valor inicial quieres que se cargue esta propiedad.

public string NombrePropiedad{
get{
return (string)GetValue(NombrePropiedadProperty);
}
set{
SetValue(NombrePropiedadProperty, value);
}
}


Hasta aquí ya tenemos nuestra propiedad definida y si vez el segmento anterior, verás que no difiere mucho de la forma en que cotidianamente creas una propiedad, las grandes diferencias es que aquí dices sobre qué y quién vas a recuperar o setear los datos. Ahora bien teniedo esto se podrá usar esta propiedad tanto desde el codigo en C#, VB o otro lenguaje que comparta la CLS (Common language specification) y corra con el CLR (Common language runtime), pero además desde los archivos .xaml agregando las referencias adecuadas se tendrá acceso a estas propiedades, siendo esta estructura mencionada aquí, la única forma de poder hacerlo para tecnologías tales cómo WPF y Silverlight las cuales están basadas en XAML.

3° Estudiando la clase VisualStateManager implementando estados viusales.

Está te permitirá dotar a tu control de estados Visuales, comportamientos y animaciones por ejemplo: Cuando tienes un botón y pasas el mouse sobre este y vez que se ilumina, allí ha ocurrido un evento el cual solicita a VisualStateManager que “vaya a X estado” de esta forma VisualStateManager.GotoState(this, “NombreEstado”, true); en la parte this le estas informado a esta clase que el objeto sobre el cual quieres relizar esta solicitud e tú control, “NombreEstado” es el nombre del estado que has definido en tu Template creado para el control en el archivo generic.xaml dentro de la carpeta themes. Así por convención tendrías estados para “MouseOver” cuando el mouse entra dentro de la geometría visual de tu control. “Normal” Cuando el control va a quedar en su estado original etc. Cada uno de estos se definirá mediante

<VisualState x:Name=”MouseOver”>

“Aquí lo que quieres que el control haga respondiendo a X evento”

</VisualState>

Ahora para poder solicitar estos cambios de estado, la mejor forma de hacer esto es tener un evento definido el cual invoke esta petición.

//Estado MouseOver
this.MouseEnter += (s,e1) => {
VisualStateManager.GotoState(this, “MouseOver”, true);
};

Para ver esto en acción veamos el video.

4- En este último WebCast utilizamos la clase VisualTreeHelper para poder identificar la rama visual de nuestro control. También como evitar la propagación de eventos, Creación de menú contextual y conslusión a la serie dedicada a la construcción de controles personalizados en Silverlight.

Siempre un gusto, espero sea de su agrado. Por favor deja un comentario. Gracias

S4lu2….Y hasta la próxima.

Anuncios