Getting up to speed with WPF

Para el proyecto que dice que el arqui Roky se encuentrad desarrollando para cierta compañía estamos empezando a usar WPF para la parte de la presentación de la interfase de usuario.

El día de ayer me dí a la tarea de darle una refrescada a mi laptop con las últimas versiones de los CTP’s. He estado trabajando con el CTP que obtuve en Londres durante mi curso, sin embargo la versión que nos dieron no es la de Feb y me estoy dando cuenta que hay muchos, pero muchos cambios.

En fin, ya vieron mis pasos de como reinstalar WinFX. Para poder tener integración con algún IDE (ya sea VS NET 2005 o alguna de las ediciones Express) hay que instalar dos componentes adicionales:

• El Windows SDK (daily build) de WinFX
• El CTP de Cider (herramientas de diseño para Orcas)
• [Opcional] Windows Workflow Foundation Extensions

La instalación es muy lineal, solo hay que correr el instalador de las aplicaciones y listo. Creo que lo que tiene más problema es desinstalar y reinstalar WinFX.

Ahora vamos a probar que se haya realizado bien la instalación haciendo un pequeño programita en XAML de ejemplo (este ejemplo esta realizado en VS NET 2005 Pro, los pasos pueden cambiar en las versiones Express)

• Iniciamos Visual Studio NET 2005
• Seleccionamos New->Project y buscamos la plantilla de Windows (WinFX)
• Seleccionamos WinFX Windows Application

Esto nos va a dejar una forma blanca de diseño para aplicaciones en XAML. Lo que tenemos que hacer ahora es cambiar la vista del formulario de diseño a XAML  y copiar el siguiente segmento de código:

<Window x:Class=«Catalogos_WinFX.window1«
xmlns=«http://schemas.microsoft.com/winfx/2006/xaml/presentation«
xmlns:x=«http://schemas.microsoft.com/winfx/2006/xaml«
Title=«Catalogos_WinFX« Height=«300« Width=«300«>

<Grid>
         <Ellipse Grid.Column=«1« Grid.Row=«1« x:Name =«myEllipse« Height=«100« Fill =«Red«/>
         <Button Grid.Column=«0« Grid.Row=«2« Height=«50«>
               Este es el boton mas sangron
         <Button.Triggers>
            <EventTrigger RoutedEvent=«Button.MouseEnter«>
                  <EventTrigger.Actions>
                        <BeginStoryboard>
                           <Storyboard>
                           <ParallelTimeline Storyboard.TargetName=«myEllipse« Storyboard.TargetProperty=«(Ellipse.Width)«>
                                    <DoubleAnimation From=«10« To=«300« Duration=«0:0:1«/>
                           </ParallelTimeline>
                           </Storyboard>
                        </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>

            <EventTrigger RoutedEvent=«Button.MouseLeave«>
                  <EventTrigger.Actions>
                        <BeginStoryboard>
                           <Storyboard>
                           <ParallelTimeline Storyboard.TargetName=«myEllipse« Storyboard.TargetProperty=«(Ellipse.Width)«>
                                    <DoubleAnimation From=«300« To=«10« Duration=«0:0:1«/>
                           </ParallelTimeline>
                           </Storyboard>
                        </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>

          </Button.Triggers>
         </Button>
</Grid>
</Window>

Con esto tenemos una forma con una animación muy sencilla que nos muestra como un objeto diseñado en XAML hace reaccionar al otro dentro de un disparo de un evento. Si esta forma les funciona ya tienen listo su ambiente de desarrollo para pegarle duro a WPF.

Cheers!