Crear el efecto de espejo en Expression Blend

Hola, me lo han preguntado varias veces como realizar ese “efecto chulo de reflejo en las imágenes”, no es nada difícil crearlo así que voy a explicarlo paso a paso.

1. Abrimos Expression Blend y creamos un nuevo proyecto WPF. Debajo de Objects and Timeline observais que tenemos un objeto Grid llamado LayoutRoot. lo seleccionamos y le cambiamos el color de fondo a negro

image

 

2. Vamos a Assets Library y seleccionamos el control StackPanel, lo arrastramos dentro del control LayoutRoot, y le damos el tamaño de Auto, Auto

image

 

3. Añadimos la imagen que queremos para hacer el reflejo, en la pestaña Projects haz click con el botón derecho del ratón en el nombre del proyecto y selecciona Add Existing Item… del menú, selecciona la imagen que quieras

 

Adding new image to project

4. Arrastra la imagen del proyecto y suéltala en el StackPanel, mientras tengas seleccionada la imagen vete a la pestaña Properties  y cambia el nombre a imgOriginalImage

 

image

5. Seleccionando la imagen haz click con el botón derecho y en el menu que aparece, selecciona Group Into y dentro de este selecciona Border, con esto creamos un border alrededor de la imagen

image

6.Seleccionamos el StackPanel y dibujamos otro Border pero no  como en el paso anterior, sino que vamos a Assets Library seleccionamos el Border ahora seleccionamos en Objects and Timeline el StackPanel y dibujamos el Border del tamaño de la imagen

image

7. Ahora necesitamos crear un VisualBrush , para ello lo vamos a crear en codigo XAML si pulsamos F11 cambiamos de vista en Blend y tenemos el codigo XAML

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="Reflections.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot" Background="#FF000000">
		<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Height="Auto">
			<Border Margin="0,0,-924,0" Height="Auto">
				<Image x:Name=”imgOriginalImageHorizontalAlignment="Left" VerticalAlignment="Top" Width="173.07" Height="173.07" Source="encendido.jpg" Stretch="UniformToFill"/>
			</Border>
		</StackPanel>
		<Border HorizontalAlignment="Left" Margin="1,0,0,0" VerticalAlignment="Top" Width="172" Height="173.07" 
BorderBrush="#FF000000" BorderThickness="1,1,1,1" Background="{x:Null}"/>
	</Grid>
</Window>

 

Tenemos que modificar la linea del segundo control Border a

 

<Border HorizontalAlignment="Left" Margin="1,0,0,0" VerticalAlignment="Top" Width="172" Height="173.07" BorderBrush="#FF000000" BorderThickness="1,1,1,1" >
	<Border.Background>
		<VisualBrush Visual="{Binding ElementName=imgOriginalImage}"/>
	</Border.Background>
</Border>

Obtenemos la siguiente imagen

image

8.Ahora en el Border de abajo, vamos al panel Properties y en Transform localizamos la ppropiedad Scale  y en Y ponemos el valor a -1

 

image 

9.La imagen se ha dado la vuelta ahora para hacer el efecto fade-out para la imagen reflejada seleccionamos el Border y en Brushes  en la sección OpacityMask  con Gradient. Ponemos la transparencia del primer gradient stop a 0% y el segundo a 65%. El primer gradient stop  lo mueves un poco a la derecha

image

Nos quedaría:

 

image

 

Si queremos darle un efecto de pseudo 3D, seleccionamos el Border de reflejo y jugando con la propiedad Skew podemos obtener los siguiente

 

image

 

 

Primer Libro de SketchFlow

La tecnología salió este viernes y ya tenemos el primer libro Dynamic Prototyping with SketchFlow in Expression Blend, todavía no esta escrito pero tenemos a nuestra disposición y gratis el primer capitulo de 100 paginas muy completo para iniciarse en la creación de prototipos.

Yo por mi parte ando jugueteando con SketchFlow e iré publicando posts sobre SkectFlow basándome en este libro que de un rápido vistazo me ha parecido interesante.

A prototipar…

 

image