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

 

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

 

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

 

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

 

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

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

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=”imgOriginalImage” HorizontalAlignment="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

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

 

 

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

Nos quedaría:

 

 

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