Vanguarsoft Developers blog

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

Propiedades Dependientes para tus controles en Silverlight

1 comentario

En Silverlight al momento de querer crear una propiedad de Dependencia de manera que se pueda hacer un Binding de datos y Mostrar los valores directamente desde XAML se realiza de la siguiente manera:

Para Iniciar vamos a agregar un nuevo proyecto, y luego agregamos un nuevo User dControl a la solución siendo el segundo proyecto el control que queremos construir y el primero la aplicación donde haremos uso del mismo.

Construí Un pequeño control usando canvas y agregándole sus propiedades X y Y, cree un rectángulo color azul que se mostrara según en el canvas en las posiciones que nos digas la propiedad X y Y.

CODIGO DEL CONTROL A APLICAR EL EJEMPLO

public partial class ControlCanvas : UserControl

    {

 

        Rectangle CursorCanvas;

        public ControlCanvas()

        {

            InitializeComponent();

            CursorCanvas = new Rectangle();

            CursorCanvas.Width = 10;

            CursorCanvas.Height = 10;

            CursorCanvas.Fill = new SolidColorBrush(Colors.Blue);

 

        }

 

 

        public double X 

        {

            get 

            {

                return Canvas.GetLeft(Cursor);

                

            }

            set 

            {

                Canvas.SetLeft(Cursor,value);

                MovilObject.Children.Clear();

                MovilObject.Children.Add(Cursor);

              

            }

        }

 

        public double Y

        {

            get

            {

                return Canvas.GetTop(Cursor);

                

            }

            set

            {

                Canvas.SetTop(Cursor, value);

                MovilObject.Children.Clear();

                MovilObject.Children.Add(Cursor);

                

            }

        }

    }

Donde MovilObject Es un Canvas colocado en la Pantalla del UserdControl.

Si quisiera hacer una animación con estas dos propiedades o Simplemente Hacer Un Binding para enlazarla a datos no lo permitiría por que sencillamente estas propiedades X y Y no son del Tipo Propiedad Dependiente.

Ahora es muy importante que sepas como hacer que tus propios controles tengas sus propiedades dependientes por lo tanto vamos a seguir los pasos necesarios.

PASO 1.

Prácticamente necesitaremos dos propiedades Dependientes una para X y otra para Y, para construir la primera debemos seguir las reglas de una propiedad dependiente que comienza con el Modificador de Acceso Publico (Public), esta propiedad deber ser estatica (Static), también debe ser de solo lectura (readonly) de Tipo de datos (DependecyProperty), luego viene el nombre de la propiedad seguida del sufijo (Property) es decir NombrePropiedad + Property vamos a colocar lo que acabamos de describir para las propiedades X Y Y.

public static readonly DependencyProperty XProperty

 

 

        public static readonly DependencyProperty YProperty

PASO 2.

Luego hay que registrar esta propiedad a través de la propiedad register de la clase dependencyProperty y agregarnos los parámetros que exige que son: Nombre de la propiedad, Tipo de datos, Tipo del Dueño y la Medatada que es lo que va a hacer esa propiedad a medida que cambie de valor, lo que tenemos antes lo igualamos al valor que deseamos tomando en cuanta que la ultima propiedad puede ser valor null si lo deseas pero debemos programarla porque de lo contrario si hacemos una animación esta no funcionara.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),null);

 

 

public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), null);

Antes de crear el código de la metadata vamos a agregar a nuestras propiedades que ya existen en el proyecto le borraremos todo lo que contiene en sus métodos get y Set, y como nuestra clase que hereda ya de userdControls ya de por si es de tipo dependencyProperty de lo contrario tendríamos que implementar la interfaz de propiedad dependientes para tener acceso a los métodos getValue y SetValue,

PASO 3.

En el Get de cada propiedad hará un return llamando a la propiedad GetValue y asignándole a sus parámetros el nombre de la clase tu control con el nombre de la propiedad dependiente que acabamos de crear para dicha propiedad lo que retorne debemos hacerle un cast al valor que este devuelve que este caso en un Double, para el Set llamamos a la propiedad SetValue y recibe como parámetros igual que el GetValue el nombre de la clase dueña de la propiedad dependiente con el nombre de la propiedad dependiente que creamos para dicha propiedad esto quedaría asi para ambas propiedades.

public double X 

        {

            get 

            {

                //return Canvas.GetLeft(Cursor);

                return (double)GetValue(ControlCanvas.XProperty);

            }

            set 

            {

                //Canvas.SetLeft(Cursor,value);

                //MovilObject.Children.Clear();

                //MovilObject.Children.Add(Cursor);

                SetValue(ControlCanvas.XProperty,value);

            }

        }

 

        public double Y

        {

            get

            {

                //return Canvas.GetTop(Cursor);

                return (double)GetValue(ControlCanvas.YProperty);

            }

            set

            {

                //Canvas.SetTop(Cursor, value);

                //MovilObject.Children.Clear();

                //MovilObject.Children.Add(Cursor);

                SetValue(ControlCanvas.YProperty,value);

            }

        }

Se coloco en comentario en valor como estaban anteriormente.

PASO 4.

Para poder animar este control debemos agregar la metadata para capturar los cambios de valor entonces al momento de crear la propiedad dependiente en el parámetro metadatata hacemos una nueva instancia de PropertyMetadata y como parámetro le agregamos una instancia del delegado PropertyChangeCallBack como se trata de un delegado podemos hacerle una expresión lambda para capturar la propiedad de cambio le agregamos a sus parámetros y entre paréntesis dos valores que representara en sender y el EventArt seguido de un igual mas un signo mayor que y abrimos y cerramos paréntesis seguido de un punto y coma, cerramos todos los paréntesis pendientes por cerrar y dentro de este evento colocaremos lo que queramos que ocurra en este control al cambiar dicho valor mientras tantos mostraremos como vamos.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),new PropertyMetadata(new 

            PropertyChangedCallback((s,a) =>

            {

            

            }

            )));

 

 

        public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), new PropertyMetadata(new

            PropertyChangedCallback((s, a) =>

            {

 

            }

            )));

PASO 5

A cada una de las propiedades se le puede capturar en Sender y del EventArt se puede capturar la propiedad NewValue esta trae el nuevo valor que ha sido asignado dicha propiedad y solo colocamos el código que anteriormente estaba en los set de cada propiedad luego de recibir el NewValue Quedando de esta manera.

public static readonly DependencyProperty XProperty = DependencyProperty.Register("X",typeof(double),typeof(ControlCanvas),new PropertyMetadata(new 

    PropertyChangedCallback((s,a) =>

    {

        ControlCanvas senser = s as ControlCanvas;

        

        Canvas.SetLeft(senser.CursorCanvas,(double)a.NewValue);

        senser.MovilObject.Children.Clear();

        senser.MovilObject.Children.Add(senser.CursorCanvas);

    }

    )));

 

 

public static readonly DependencyProperty YProperty = DependencyProperty.Register("Y", typeof(double), typeof(ControlCanvas), new PropertyMetadata(new

    PropertyChangedCallback((s, a) =>

    {

        ControlCanvas senser = s as ControlCanvas;

 

        Canvas.SetTop(senser.CursorCanvas, (double)a.NewValue);

        senser.MovilObject.Children.Clear();

        senser.MovilObject.Children.Add(senser.CursorCanvas);

    }

    )));

Una vez listo nuestro control con propiedades Dependientes implementadas ya podemos usar nuestro control, hacerle Binding a sus propiedad e Incluso animarla veamos la prueba.

Agreguemos como referencia la DLL que genero nuestro control o bien sea hacer la referencia al proyecto que pudiste construir.

clip_image002En el MainPage de tu nuevo proyecto agregar la referencia directo desde XAML y agregar el control en el Grig principal. Puedes agregar algunos valores de prueba para ver que funcione perfectamente.

clip_image002[4]

Ahora la primera prueba es ver si se le puede hacer Binding, para probarlo colocaremos dos slider uno para X y otro Para Y y enlazaremos los datos de cada slider en cada propiedad. Si puedes ver en nuestro nuevo control puedes visualizar las propiedades que nosotros programamos y las puedes enlazar con el pequeño punto negro que vez en pantalla.

clip_image004

Una vez presionado buscas el elemento al que quieres hacer enlace que puede ser su datacontex, un elemento, y valor relativo o un valor estático, en este caso elegiremos ElemenName para X elegiremos el SliderX que como pueden ver en la imagen anterior agregó en pantalla colocándole un Maximum de 1000.

clip_image006

Luego de elegir el nombre del elemento que es el Source ahora viene el Path que seria la propiedad de ese elemento en la cual va a estar enlazada que seria valué.

clip_image008

Pueden ver que funciona perfectamente si lo compilan gracias a las propiedades dependientes que me permiten Agregarle un enlace a datos.

clip_image010

La segunda prueba es que esas propiedades puedan ser animadas lo único que haremos es un StoryBoard Agregamos una animación bien simple para ambas propiedades para ellos debimos colocarle un nombre a nuestro control que en este caso le colocamos cc1 y las invocamos luego del InitianComponet de codeBehing de la pagina Mainpage.

<UserControl.Resources>

    <Storyboard x:Key="AnimateX">

        <DoubleAnimation From="0" To="500" Duration="00:00:05" Storyboard.TargetName="cc1" Storyboard.TargetProperty="X"></DoubleAnimation>

        <DoubleAnimation From="0" To="800" Duration="00:00:05" Storyboard.TargetName="cc1" Storyboard.TargetProperty="Y"></DoubleAnimation>

    </Storyboard>

</UserControl.Resources>

Ustedes no la prueden ver pero yo si se ha logrado hacer una animación con propiedades que hemos creado propiamente con nuestros propios controles gracias a las propiedades dependientes.

clip_image002[7]

Obviamente los Slider dejaron de funcionar debido a que las animaciones tienen más precedencia que las propiedades enlodazada por Binding. Esto es todo espero que les guste..😀 y sea de mucha utilidad.

Codigo completo: http://sdrv.ms/IxU5ct

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

Un pensamiento en “Propiedades Dependientes para tus controles en Silverlight

  1. Pingback: Agenda de la Comunidad « MSExpertos

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