viernes, 26 de enero de 2007

Mostrar Reflejo de una Imagen con WPF


En este ejemplo pretendemos crear el reflejo de una imagen. También haremos que la imagen y el reflejo tengan sombra.


Código XAML


<Window
x:Class="Reflejo"
xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml"
Title="Reflejo"
Height="367"
Width="299"
WindowStartupLocation="CenterScreen">
<
Grid>
<
StackPanel
Margin="0,15,0,0"
HorizontalAlignment="Center"
Width="195"
VerticalAlignment="Center">
<!--
Primero
crearemos la imagen. Le a¤adiremos una linea blanca
alrededor, una sombra y moveremos 10§ la
imagen
-->
<!--
Creamos
una linea blanca alrededor de la imagen
-->
<
Border
BorderBrush="White"
BorderThickness="5"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<
Border.BitmapEffect>
<
BitmapEffectGroup>
<!--
Creamos
la sombra de la imagen
-->
<
DropShadowBitmapEffect
Color="Black"
Direction="20"
ShadowDepth="25"
Softness="1"
Opacity="0.5"/>
</
BitmapEffectGroup>
</
Border.BitmapEffect>
<!--
Para
poder hacer que la imagen tenga una desviacion de
10§
-->
<
Border.RenderTransform>
<
SkewTransform
CenterX="0"
CenterY="0"
AngleX="0"
AngleY="10"
/>
</
Border.RenderTransform>
<!--
Imagen
que queremos reflejar
-->
<
Image
VerticalAlignment="Center"
Source="\Jusep\Imagenes\shrek3.jpg"
Width="100"
Height="150"
Stretch="Fill"
x:Name="myImage"></Image>
</
Border>
<!--
Ahora
crearemos el reflejo
-->
<!--
Creamos
una linea blanca alrededor del reflejo
-->
<
Border
Width="100"
Height="150"
BorderBrush="White"
BorderThickness="5">
<
Border.BitmapEffect>
<!--
Creamos
la sombra del
reflejo
-->
<
BitmapEffectGroup>
<
DropShadowBitmapEffect
Color="Black"
Direction="20"
ShadowDepth="25"
Softness="1"
Opacity="0.5"/>
</
BitmapEffectGroup>
</
Border.BitmapEffect>
<!--
Hacemos
que la imagen se desvie 10§ el angulo y. Pero tambien
desviaremos el angulo x para que no salga recta la
imagen
-->
<
Border.RenderTransform>
<
SkewTransform
CenterX="0"
CenterY="0"
AngleX="170"
AngleY="10"
/>
</
Border.RenderTransform>
<!--
Para
poder hacer el reflejo asociamos el VisualBrush con la
imagen
-->
<
Border.Background>
<
VisualBrush
Visual="{Binding
ElementName=myImage}
">
<
VisualBrush.Transform>
<
ScaleTransform
ScaleX="1"
ScaleY="-1"
CenterX="150"
CenterY="75"></ScaleTransform>
</
VisualBrush.Transform>
</
VisualBrush>
</
Border.Background>
<!--
Para
que sea opaco el
reflejo
-->
<
Border.OpacityMask>
<
LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<
GradientStop
Offset="0"
Color="Black"></GradientStop>
<
GradientStop
Offset="0.6"
Color="Transparent"></GradientStop>
</
LinearGradientBrush>
</
Border.OpacityMask>
</
Border>
</
StackPanel>
</
Grid>

</
Window>













No hay comentarios: