Voy a crear una aplicación sencilla que puede ser creada mediante WPF, pero en este caso voy a crearla a través de Silverlight, coincidiendo con la puesta en marcha de la versión 3 de dicha plataforma.
La aplicación es un libro virtual, formado por una serie de fotos elegidas previamente. Al presionar sobre la primera foto esta se movería imitando a un libro. Se repetirá dicho efecto cada vez que presionemos sobre las correspondientes fotos.
Lo primero que debemos de incluir es la parte del interface de usuario, lo realizaremos en Xaml introduciendo el siguiente código:
<UserControl x:Class=»libro.MainPage»
xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=»d» d:DesignWidth=»640″ d:DesignHeight=»480″>
<UserControl.Resources>
<!–estilo que se va aplicar a cada imagen–>
<Style x:Key=»_imageStyle»
TargetType=»Image»>
<Setter Property=»Margin»
Value=»275,0,0,0″ />
<Setter Property=»Width»
Value=»275″ />
<Setter Property=»Stretch»
Value=»Uniform» />
</Style>
</UserControl.Resources>
<Grid x:Name=»LayoutRoot»>
<Image Style=»{StaticResource _imageStyle}»
Source=»Images/1.jpg»
MouseLeftButtonUp=»FlipImage» />
<!–cada una de las imagenes lanza un evento
al pulsar sobre ellas conel botón
izquierdo del ratón–>
<Image Style=»{StaticResource _imageStyle}»
Source=»Images/2.jpg»
MouseLeftButtonUp=»FlipImage» />
<Image Style=»{StaticResource _imageStyle}»
Source=»Images/3jpg»
MouseLeftButtonUp=»FlipImage» />
<Image Style=»{StaticResource _imageStyle}»
Source=»Images/4.jpg»
MouseLeftButtonUp=»FlipImage» />
<Image Style=»{StaticResource _imageStyle}»
Source=»Images/7.jpg»
MouseLeftButtonUp=»FlipImage» />
<TextBlock Text=»Haz Clic para cambiar de imagen»
VerticalAlignment=»Bottom»
HorizontalAlignment=»Center» />
</Grid>
</UserControl>
Como podemos ver hemos usado un estilo que se definirá en cada una de las imágenes, en WPF este estilo se puede heredar pero en Silverlight aún no tenemos esta particularidad.
El evento que se desencadena lo tenemos que realizar a través del código Behind introduciendo el siguiente código:
public partial class MainPage : UserControl
{
private int _zIndex = 10;
public MainPage()
{
InitializeComponent();
}
private void FlipImage(object sender, MouseButtonEventArgs e)
{
Image image = sender as Image;
// Asegura que la imagen estará encima de todas las demás
image.SetValue(Canvas.ZIndexProperty, _zIndex++);
// Crea el Storyboard(guión)
Storyboard flip = new Storyboard();
// crea una animación de una duración
//de un segundo
DoubleAnimation animation = new DoubleAnimation()
{
Duration = new TimeSpan(0, 0, 1)
};
// añade la animación al storyboard.
flip.Children.Add(animation);
//crea una proyección de la imagen si no tiene ninguna
if (image.Projection == null)
{
// Establece el centro de rotación en -0.01,
//lo que proporcionará un espacio entre las imagenes
//cuando estas se giren.
image.Projection = new PlaneProjection()
{
CenterOfRotationX = -0.01
};
}
PlaneProjection projection = image.Projection as PlaneProjection;
// Establece el origen y destino de la imagen basandose
//en la capa de las imagenes
if (projection.RotationY == 0)
{
animation.To = 180;
}
else
{
animation.From = 180;
animation.To = 0;
}
//le indica cuando se produce la animación que imagen debe de situarse
//en cada plano
Storyboard.SetTarget(animation, projection);
// le indica a la animación la propiedad RotationYproperty
//qeu debe de tomar
Storyboard.SetTargetProperty(animation,
new PropertyPath(PlaneProjection.RotationYProperty));
flip.Begin();
}
}
Lo primero que hago es indicar un índice a través de la variable Z, de este modo se va mover la imagen, asegurando que la imagen que realiza el movimiento será la primera y única foto visible en el margen izquierdo.
Ahora me centraré en el evento FlipImage, lo primero es crear la animación, indicando la duración de la misma, en este caso un segundo. El siguiente paso es añadir la animación al StoryBoard, de modo que se cree una rotación cuyo centro será -0.01, así se creará un pequeño espacio entre la imagen que se está rotando y la imagen estática. La rotación se realiza a través del elemento PlaneProjection aunque podemos utilizar otros objetos más sofisticados a la par de nuestras necesidades.
Como podeis ver una pequeña aplicación le podemos dar un toque de sofisticación, mejorando la experiencia de usuario.