Rotar Imágenes con WinFX

Bueno, para empezar con esto del WinFX he decidido hacer una pequeña aplicación en la cual tenemos una imagen que podremos hacer rotar. La aplicación es muy simple, pero es un comienzo...
El código estará en imagenes porque blogguer no me permite escribir código XAML ya que lo interpreta como código HTML.

Código XAML


<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RotarImagen" Height="357" Width="290" WindowStartupLocation="CenterScreen">

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
</Grid.RowDefinitions>
<RadioButton Grid.Column="0" Grid.Row="0" Height="13.2766666666667" HorizontalAlignment="Center" Name="rb45" VerticalAlignment="Center" Width="74.25">45º</RadioButton>
<RadioButton Grid.Column="0" Grid.Row="1" Height="13.2766666666667" HorizontalAlignment="Center" Name="rb180" VerticalAlignment="Center" Width="74.25">180º</RadioButton>
<RadioButton Grid.Column="1" Grid.Row="0" Height="13.2766666666667" HorizontalAlignment="Center" Name="rb90" VerticalAlignment="Center" Width="74.25">90º</RadioButton>
<RadioButton Grid.Column="1" Grid.Row="1" Height="13.2766666666667" HorizontalAlignment="Center" Name="rb360" VerticalAlignment="Center" Width="74.25">360º</RadioButton>
<Image Grid.Row="2" Grid.ColumnSpan="2" Name="Imagen" Source="C:\Documents and Settings\All Users\Documentos\Mis imágenes\Imágenes de muestra\Invierno.jpg" Margin="62.1045572153489,12.9410731669111,50.579900124844,62.723955231492">
<Image.RenderTransform>
<RotateTransform Angle="0">
</RotateTransform>
</Image.RenderTransform>
</Image>
</Grid>
</Window>

Primero añadimos un Grid para poder insertar varios elementos en el formulario. En este grid definiremos 2 columnas y tres filas para poder insertar las diferentes opciones de rotación de la imagen.

<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
<RowDefinition Height="0.187265917602996*"></RowDefinition>
</Grid.RowDefinitions>


Después añadiremos los RadioButton para escoger el grado de rotación.

Como bien recuerda Toni Recio en su blog (http://www.lascortinasdewindows.com/) es muy importante añadir la propiedad Name a todos los objetos para posteriormente poder añadir codigo en los eventos de los controles.
También hemos escogido una columna Grid.Column y una fila Grid.Row para cada objeto para que quede ubicado en una parte determinada del grid.

Por ultimo, añadiremos la imagen que queremos rotar. En este caso, como queremos que ocupe toda una fila, añadiremos la propiedad Grid.ColumnSpan que nos permite combinar las columnas.

<Image Grid.Row="2" Grid.ColumnSpan="2" Name="Imagen" Source="C:\Documents and Settings\All Users\Documentos\Mis imágenes\Imágenes de muestra\Invierno.jpg" Margin="62.1045572153489,12.9410731669111,50.579900124844,62.723955231492">

Una parte importante de la rotación de la imagen es el siguiente codigo que viene despues de insertar la imagen.

<Image.RenderTransform>
<RotateTransform Angle="0">
</RotateTransform>
</Image.RenderTransform>

Despues de varios intentos fallidos para que funcione la aplicación, encontre la solucion en añadir la propiedad Angle="0" Sin esta propiedad nos dara un error la aplicación al intentar rotar la imagen.

El diseño del formulario quedaria de la siguiente manera:

Source

' Interaction logic for Window1.xaml
Partial Public Class Window1

Inherits Window

Public Sub New()
InitializeComponent()
End Sub

Private Sub rb45_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles rb45.Click

Dim Angulo As Double = 45
Dim Pos As Double = 90

Imagen.RenderTransform.SetValue(RotateTransform.CenterXProperty, Pos)
Imagen.RenderTransform.SetValue(RotateTransform.CenterYProperty, Pos)
Imagen.RenderTransform.SetValue(RotateTransform.AngleProperty, Angulo)

End Sub

Private Sub rb90_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles rb90.Click

Dim Angulo As Double = 90

Imagen.RenderTransform.SetValue(RotateTransform.CenterXProperty, Angulo)
Imagen.RenderTransform.SetValue(RotateTransform.CenterYProperty, Angulo)
Imagen.RenderTransform.SetValue(RotateTransform.AngleProperty, Angulo)
End Sub

Private Sub rb180_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles rb180.Click

Dim Angulo As Double = 180
Dim Pos As Double = 90

Imagen.RenderTransform.SetValue(RotateTransform.CenterXProperty, Pos)
Imagen.RenderTransform.SetValue(RotateTransform.CenterYProperty, Pos)
Imagen.RenderTransform.SetValue(RotateTransform.AngleProperty, Angulo)

End Sub

Private Sub rb360_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles rb360.Click

Dim Angulo As Double = 360

Imagen.RenderTransform.SetValue(RotateTransform.AngleProperty, Angulo)

End Sub

End Class

Primero deberemos seleccionar el control y el metodo que queremos utilizar.
Una vez seleccionado, declaremos dos variables de tipo Double para asignar el grado de rotación y también la posicion del eje, ya que al hacer la rotación, éste cambia de posicion.

Imagen.RenderTransform.SetValue(RotateTransform.CenterXProperty, Pos)
Imagen.RenderTransform.SetValue(RotateTransform.CenterYProperty, Pos)

Por ultimo, aplicaremos la propiedad RenderTransfrom al objeto imagen y le asignaremos un nuevo valor de rotación.

Imagen.RenderTransform.SetValue(RotateTransform.AngleProperty, Angulo)

Con todo esto ya tenemos nuestra pequeña aplicación basada en WinFX.
Hay que destacar que se nota que todavia esta en fase Beta (en este caso la 2), ya que al producirse errores, hace que se cierre el Visual Studio. Y sobretodo se nota mucho en la velocidad de las aplicaciones (supongo que por las tarjetas graficas).

Seguiremos trabajando y añadiendo futuras aplicaciones al blog!!