Hacer animaciones es definitivamente la razón por la que Silverlight llamó fuertemente mi atención y Expression Blend 4 definitivamente es una herramienta indispensable para poder lograr tal objetivo. Al momento de crear cualquier control dentro de nuestra área de trabajo podremos contar con propiedades “ah doc” para la animación, de hecho hay una pestaña únicamente diseñada para efectos en nuestra área de propiedades, algo así como esta imagen.
En esta pestaña tu puedes manipular muchas propiedades del control para comenzar a hacer muy buenas animaciones, de todas las propiedades que puedes manipular aquí, te mostraré dos en particular, una es la de RotationY que pertenece a la muy enriquecida clase PlaneProjection y nos sirve para poder rotar sobre el ejeY a nuestro control, en el siguiente ejemplo será mas fácil de explicar, solo desplaza el control superior para que puedas ver como rota la figura.
Otra de las propiedades que puedes manipular es la de CenterOfRotationZ esta es aún mas genial pues puedes simular una especie de capas en 3D (debes recordar que Silverlight hasta su versión 4 solo simula un efecto de 3D, aún no es capaz de poder hacerlo realmente), checa el mismo ejemplo anterior pero ahora con el Centro de rotación del círculo pequeño modificable.
Bien, ya explicadas las dos propiedades que utilizarás, crea un nuevo proyecto (de preferencia en Blend, pues en esta ocasión no saldremos de ahí) y en el MainPage adentro del contenedor LayoutRoot inserta el siguiente código.
<Border x:Name="borde1" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion1" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Border x:Name="borde2" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion2" RotationY="60" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Border x:Name="borde3" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion3" RotationY="120" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Border x:Name="borde4" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion4" RotationY="180" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Border x:Name="borde5" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion5" RotationY="240" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Border x:Name="borde6" BorderBrush="White" BorderThickness="1" Margin="0" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Background="#99000000"> <Border.Projection> <PlaneProjection x:Name="proyeccion6" RotationY="300" CenterOfRotationZ="-120"/> </Border.Projection> </Border> <Button x:Name="btnRotar" Content="Iniciar rotación" HorizontalAlignment="Left" Height="41" Margin="8,8,0,0" VerticalAlignment="Top" Width="140" Click="btnRotar_Click"/> |
El resultado de tu interfaz deberá quedar algo como esto (yo le cambié el color a mi LayoutRoot, puedes mantener el preestablecido o cambiarlo).
Ahora, pasando a la parte de C#, comienza con declarar una variable de tipo booleano y una de tipo Point.
Point punto; bool banderaBoton = false; |
Y en el manejador del evento clic del botón, coloca el siguiente código.
private void btnRotar_Click(object sender, System.Windows.RoutedEventArgs e) { banderaBoton = !banderaBoton; if (banderaBoton) { CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); btnRotar.Content = "Detener rotación"; } else { CompositionTarget.Rendering -= new EventHandler(CompositionTarget_Rendering); btnRotar.Content = "Iniciar rotación"; } } |
Como puedes ver, lo único que haces es manejar una pequeña bandera booleana y gracias a ella puedes crear o deshacer el manejador de eventos del evento Rendering que pertenece a la clase CompositionTarget , ese evento te servirá para comenzar a activar el movimiento de los bordes que ya tienes, también puedes ver que la proyección de cada borde tiene su nombre propio, esto lo te servirá para poder mandar llamar a la propiedad directamente sin mayor bronca.
void CompositionTarget_Rendering(object sender, EventArgs e) { proyeccion1.RotationY += ((punto.X - (LayoutRoot.ActualWidth /2)) / LayoutRoot.ActualWidth) * 4; proyeccion2.RotationY += ((punto.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 4; proyeccion3.RotationY += ((punto.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 4; proyeccion4.RotationY += ((punto.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 4; proyeccion5.RotationY += ((punto.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 4; proyeccion6.RotationY += ((punto.X - (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 4; } |
Y mediante unas simples operaciones comenzarás a manipular su rumbo y dirección, lo que haces es usar la propiedad X de tu variable de tipo punto y dependiendo de su posición relativa con respecto a tu control principal (LayoutRoot) la velocidad acelera o disminuye.
Por ahora lo único que hace falta hacer es darle un valor a ese punto, y eso lo consigues utilizando el evento MouseMove del LayoutRoot de la siguiente forma.
private void LayoutRoot_MouseMove(object sender, MouseEventArgs e) { punto = e.GetPosition(LayoutRoot); } |
En donde obtienes la posición de tu puntero con respecto al contenedor principal.
¡Listo! Ya tienes tu control de carrusel para poder mostrar cualquier elemento de una forma mas animada.
Puedes descargar el código fuente desde aquí.
Muy bueno!Muchas gracias por compartirlo
Que bien que te haya servido, saludos!!!