Mover el Botón y Crear Sombra

Código XAML

<Window.Triggers>

<EventTriggerRoutedEvent="Button.Click">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<ThicknessAnimationStoryboard.TargetProperty="Margin">

<Duration="0:0:0.5"From="50,50,50,50"To="0,0,50,50"AutoReverse="True"/>

<DoubleAnimationStoryboard.TargetName="myDropShadowBitmapEffect">

<Storyboard.TargetProperty="ShadowDepth"From="0"To="30"Duration="0:0:0.5">

<AutoReverse="True"/>

<DoubleAnimationStoryboard.TargetName="myDropShadowBitmapEffect"

<Storyboard.TargetProperty="Softness"From="0"To="1"Duration="0:0:0.5"

<AutoReverse="True"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Window.Triggers>

<ButtonMargin="10"Width="225"Height="50"Name="myButton">

¡Click paracrear la sombra!

<Button.BitmapEffect>

<DropShadowBitmapEffectx:Name="myDropShadowBitmapEffect"Color="Black"

ShadowDepth="0"/>

</Button.BitmapEffect>

</Button>

Mover el Botón con Sombra

Código XAML

<Window.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="true">
<Setter Property = "BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="25" Softness="1" Opacity="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="1x" From="0"
To="360" Duration="0:0:1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="1x" From="360"
To="0" BeginTime="0:0:1" Duration="0:0:1"
></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>

<Grid>
<Button Name="myAnimatedButton" Height="60" Width="120"
RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center"
HorizontalAlignment="Center">

¡Click Aquí!
<Button.RenderTransform>
<RotateTransform Angle="0" />
</Button.RenderTransform>
</Button>
</Grid>

Mover el Botón al hacer Click

Código XAML

<Window.Triggers>

<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="1x" From="0" To="360"
Duration="0:0:1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="1x" From="360" To="0"
BeginTime="0:0:1" Duration="0:0:1"
></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>

<Grid>
<Button Name="myAnimatedButton" Height="60" Width="120"
RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center"
VerticalAlignment="Center">

¡Click Aqui!
<Button.RenderTransform>
<RotateTransform Angle="0"/>
</Button.RenderTransform>
</Button>
</Grid>

Cambiar Automáticamente de color una Ellipse

Código XAML

<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Duration="0:0:5" From="Black" To="White" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Ellipse x:Name="myEllipse" Fill="Black"/>

Girar una Ellipse

Código XAML

<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myEllipse" Storyboard.TargetProperty="(Ellipse.Height)" From="0" To="500" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Ellipse x:Name="myEllipse" Fill="DarkRed"/>

Cambiar Automáticamente el Tamaño de una Imagen

Código XAML

<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myImage" BeginStoryboard.TargetProperty="(Image.Width)" From="0" To="300" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Image x:Name="myImage" Source="C:\Documents and Settings\AllUsers\Documentos\Mis imágenes\Imágenes de muestra\Puesta de sol.jpg"/>

Microsoft .NET Framework 3.0 - July 2006 CTP

Ya esta disponible la nueva version del .NET Framework 3.0
Se puede descargar desde este link http://www.microsoft.com/downloads/details.aspx?FamilyId=62057A6F-185F-41DB-ABE5-678F6FC388F0&displaylang=en

Microsoft Expression Interactive Designer June 2006 CTP y Microsoft Expression Graphic Designer June 2006 CTP

Ya esta disponible la nueva versión de Microsoft Expression Graphic Designer y Microsoft Expression Interactive Designer.
Estos programas nos permite diseñar objetos y formularios para posteriormente pasarlo a XAML y utlizarlo con Visutal Studio.

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!!