Jugando con Imágenes en WPF – Parte 1 – Reflexiones y Sombras


En WPF tenemos muchas formas de crear efectos en todos los controles, ahora vamos a ver como crear un efecto de Reflexión con una imagen y crearle una sombra.

Creamos un nuevo proyecto en Windows Presentation Foundation con Visual Studio, puede ser la versión express o la 2008.

Agregamos un Control Image, también agregamos una imagen a nuestro proyecto, para ello hacemos clic sobre el proyecto en el explorador de Proyectos y luego en Agregar (Add) y luego en Elemento Existente y buscamos una imagen para empezar a trabajar:

Agregar Elemento

Ahora en el control Image en la propiedad Source, escribimos el nombre de la imagen que acabamos de agregar y modificamos la propiedad Strech a UniformToFill para que la imagen no pierda su forma original:

<Border BorderBrush="Black" BorderThickness="2" Margin="113,13,99,0" Height="164" VerticalAlignment="Top">

            <Image Name="image1" Stretch="UniformToFill" Source="feliz-dia-mama.gif" Height="162.5" HorizontalAlignment="Left" VerticalAlignment="Top" Width="160" />

</Border>

He agregado también un control Border para la imagen.

Para crear el efecto de Reflexión existen muchas maneras, una puede ser crear otra imagen y luego invertir la imagen, en nuestro caso vamos a usar un control Border y pintar el borde como la imagen, esto se hace con VisualBrush.

Creamos otro borde, justo debajo de la imagen, y pintamos el fondo del Border como la imagen:

 

<Border Margin="114,176,102,27" Name="border1" >

            <Border.Background>

                <VisualBrush Visual="{Binding ElementName = image1}"></VisualBrush>

            </Border.Background>

</Border>

Con la propiedad Visual enlazamos el fondo con lo que tiene el Elemento image1, que es el nombre de nuestra imagen.

Si todo va bien, se estaría viendo así:

Aplicando VisualBrush

Ahora aplicamos una transformación al borde (copia de la imagen) para que se invierta el fondo:

<Border.Background>

                <VisualBrush Visual="{Binding ElementName = image1}">

                    <VisualBrush.Transform>

                        <ScaleTransform ScaleY="-1" CenterY="80"></ScaleTransform>

                    </VisualBrush.Transform>

                </VisualBrush>

</Border.Background>

La propiedad ScaleY es -1 porque vamos a invertir todo el eje Y y es 1 porque queremos que la imagen tenga el mismo tamaño de la original, si pusiéramos 2 la imagen se escala el doble de lo normal, el CenterY indica desde donde se va a aplicar la transformación, si dejamos en 0 no se va a mostrar nada, la dejamos en 80 porque es casi la mitad de la altura de la imagen.

Ahora todo va así:

invertir imagen

Podemos jugar con las transformaciones 3D y estirar la imagen “Espejo” para que se vea el efecto de la reflexión mucho mejor, para ello aplicamos una SkewTransform al Border:

<Border.RenderTransform>

                <SkewTransform CenterX="0" CenterY="0" AngleX="-45" AngleY="0" />

</Border.RenderTransform>

El AngleX es el ángulo de estiramiento en el eje de las X:

SkewTransform

Ahora para terminar esta parte de Reflexiones, vamos a volver la imagen espejo semi-transparente, modificando la porpiedad OpacityMask del Border:

 

<Border.OpacityMask>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                    <GradientStop Offset="0" Color="White"></GradientStop>

                    <GradientStop Offset="0.4" Color="Transparent"></GradientStop>

                </LinearGradientBrush>

</Border.OpacityMask>

Para volver la imagen semi-transparente, creamos una mascara compuesta por un fondo gradiente, con un color blanco y otro Transparente, el OffSet 0.4 quiere decir que vamos a mostrar el 40 % de la imagen, si modificamos esta propiedad veremos como se oculta la imagen entre mas cercano al 0 y se vuelve más opaca cerca al 1:

OpacityMask

Para finalizar, vamos a agregar el efecto sombra, en WPF existen muchos efectos predefinidos, un ejemplo son los BitmapEffect, con ellos podemos aplicar efectos como Sombra, Brillo, Profundidad, etc.

Agregamos al Border de la imagen original lo siguiente, justo debajo de la etiqueta <image>:

 

<Border.BitmapEffect>

                <DropShadowBitmapEffect Color="Black" Direction="20" ShadowDepth="25" Softness="1" Opacity="0.5"/>

</Border.BitmapEffect>

–          Color: Especifica el color de la sombra.

–          ShadowDepth: Especifica la profundidad de la sombra, que tan lejos se desplazara la sombra del objeto.

–          Direction: Especifica en que dirección estará la sombra del objeto, es un ángulo entre 0 y 360 grados,

–          Noise: Especifica el ruido de la sombra, es un valor entre 0 y 1, entre más cercano al 1, más “granoso” se ve la sombra, en nuestro caso no pusimos esta propiedad.

–          Softness: Especifica que tan suave esta la sombra, un valor entre 0 y 1, 1 siendo lo más suave.

–          Opacity: Especifica que tan transparente va a ser la sombra, es un valor entre 0 y 1, siendo 1 totalmente opaco y 0 transparente.

sombra

Como caso curioso, si le aplicamos el efecto de sombra a una imagen PNG o con un fondo transparente, el efecto sombra se aplica es a la imagen, miremos un ejemplo:

sombraPNG 

Al lado derecho vemos la imagen original, y al izquierdo el resultado de aplicarle un efecto sombra, la sombra queda aplicada es a la imagen  :P.

Los archivos usados en este tutorial: AQUI.

Referencias:

Anuncios

2 pensamientos en “Jugando con Imágenes en WPF – Parte 1 – Reflexiones y Sombras

  1. Pingback: Jugando Con imágenes en WPF – Parte 2 – Zoom, Rotación y Traslación « Escarbando Código

Deseas comentar o sugerir algo?

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