Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

Crear y utilizar máscaras en Silverlight

Publicada el 26 abril, 201116 julio, 2012
Twittear

Como ya he mencionado, los efectos especiales son la parte visual mas representativa de las RIA, lo que las distingue de las aplicaciones a las que muchos estamos acostumbrados, solo ve a cualquier supermercado, checa la computadora que tienen y sabrás de lo que hablo.

Bien, el uso de máscaras te va a permitir pulir un poco mas el uso de estos efectos especiales, para explicarlo de la mejor forma posible, solo basta que cheques el siguiente ejemplo, pasa el cursor sobre las dos imágenes y observa como se desempeñan las animaciones.

Install Microsoft Silverlight

Ok, como puedes ver la diferencia quizá es apenas perceptible, pero si lo usas en otros escenarios es grande la diferencia, así que empecemos con los pasos.

En un nuevo proyecto coloca una imagen dentro de un Grid y este dentro de un Border para que quede de la siguiente forma.

 

Ya después inserta un rectángulo adentro del Grid y utiliza la propiedad de TranslateY en la imagen (el valor no importa, solo permite que se salga por completo del borde).

Translate

El XAML final, debe de quedarte de la siguiente forma.

 

 

Ya que tienes todo listo, selecciona los dos elementos que necesitas unir, la imagen y el rectángulo, da click derecho y escoge la opción Path > Make clipping path

Clipping

Al hacer esto, verás como “desaparece” la imagen pero aún sigue señalada, cambia tu herramienta y utiliza la de selección directa directa , si no has dejado de seleccionar tu imagen, verás algo parecido a esto.

Mask

 

En donde el área de morado es tu área de visibilidad y la de azul es el área total del componente, ahora solo hace falta crear una animación común y colocar el valor de la propiedad TranslateY a 0.

 

 

animacion

El resultado queda como en la imagen, de ahí elige la herramienta de selección directa de nuevo y da doble clic sobre una de las líneas moradas que aparecen para seleccionar las cuatro, ya seleccionadas solo desliza hacia abajo tu selección (notarás como la imagen se va apareciendo conforme tu selección vaya ocupando el área de la imagen).

tramo

Ya solo falta el toque final, coloca un botón que se encargue de hacer aparecer la animación, para esto solo escribe lo siguiente en su evento “Click”.

private void btnMostrar_Click(object sender, System.Windows.RoutedEventArgs e)
{
entrada.Begin();
}

private void btnMostrar_Click(object sender, System.Windows.RoutedEventArgs e) { entrada.Begin(); }

Listo, el resultado es como este ejemplo.

Install Microsoft Silverlight

Puedes descargar el código desde aquí

2 comentarios en «Crear y utilizar máscaras en Silverlight»

  1. Jose Israel Moncada Venegas dice:
    25 julio, 2011 a las 9:39 pm

    buen ejemplo basico par utilizar las mascaras, lo que me encanto fueron las imagenes de utilizadas para realizar la demo del tema XD

    Responder
  2. Espacio dice:
    13 octubre, 2012 a las 4:46 pm

    A mí no me funciona ! Por más que he intentado. Y si descargo el código me dice que tengo que actualizar el SDK de Silverlight pero yo lo tengo actualizado ! Y si intento descargar la supuesta actualización me dice que «Posee una versión más actualizada». En fin tiro la toalla ! jeje Desde Venezuela !

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress