Creando la interfaz de usuario de Windows Phone (XAML)

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Creating_the_Windows_Phone_User_Interface_%28XAML%29.

Normalmente, se utiliza Silverlight para crear aplicaciones de Windows Phone y XNA para crear juegos de Windows Phone. XAML es el lenguaje declarativo utilizado en Silverlight para crear interfaces de usuario, por lo tanto en WP7 es utilizado para crear las aplicaciones de interfaz de usuario en el teléfono, tales como, controles, formas, texto y otros contenidos presentados en la pantalla. Si estás familiarizado con la programación web, tú puede pensar en XAML como lo más parecido a HTML, pero más potente. Al igual que HTML, XAML se compone de elementos y atributos. Sin embargo, XAML está basado en XML y por lo tanto debes seguir las reglas de XML.

Tú podrías preguntarte, "¿Por qué me importa XAML si sólo voy a utilizar herramientas como Visual Studio o Expression Blend para crear interfaces de usuario?" A pesar de que existen herramientas que aportan beneficio, siempre vas a querer pasar por alto el entender o modificar el código XAML. Por otra parte, es a veces más fácil trabajar el código de interfaz de usuario a mano, cuando se desea tener un control del mismo, o simplemente, si deseas saber lo que está ocurriendo en él.

Este tutorial contiene las siguientes secciones:

  • Ejemplo XAML
  • XAML es sólo el código de procedimiento (sólo es más fácil)
  • Propiedades
  • XAML y el árbol visual
  • Más que una interfaz de usuario estática

Ejemplo XAML

Lo siguiente es un simple ejemplo en código XAML, que permite crear un botón

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Height="72" Width="160" Content="Click Me" />

</ Grid>

 

Cuando se ejecuta la aplicación debe aparecer algo como esto:

 

clip_image002

 

El botón se especifica mediante el elemento <Button>.  El ancho y la altura de los atributos especifican el tamaño del botón. El <Grid> se genera cuando se crea una nueva aplicación de Windows Phone en Visual Studio, y se utiliza para colocar los objetos. Para aprender más acerca del diseño en Silverlight, consulta Distribución en la pantalla.

Puedes utilizar Visual Studio para generar el código XAML. Por ejemplo, puedes arrastrar un botón de la caja de herramientas a la superficie de diseño.

clip_image004

A continuación se muestra el código XAML que Visual Studio puede generar. (El XAML puede ser distinto).

XAML

<Grid x:Name="ContentGrid" Grid.Row="1">

<Button Content="Button" Title="72" HorizontalAlignment="Left"

Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />

</Grid>

 

 

Ten en cuenta que Visual Studio agrega algunos atributos adicionales, como HorizontalAlignment (Alineación horizontal) y el Margin (Margen), al agregar el botón. Este extra no debería ser un inconveniente si tus necesidades son muy específicas. Cabe destacar, que puedes cambiar estos atributos utilizando la interfaz de usuario de Visual Studio, pero en algunos casos, es posible que prefieras sólo el XAML directamente para editar.

 

Una de las mejores cosas acerca del uso de un lenguaje declarativo como XAML, está en tener una clara separación entre el marcado que representa la interfaz de usuario y el código que hace en la aplicación. Por ejemplo, un diseñador podría trabajar en el diseño de una interfaz de usuario y luego los desarrolladores añadir el código de procedimiento en el XAML. Incluso si el diseñador y el desarrollador son la misma persona (ya que a menudo lo son), puedes mantener tu interfaz de usuario en los archivos de XAML (.xaml) y el código de procedimiento en archivos de código subyacente (.cs y .vb).

 

XAML es sólo el código de procedimiento

Elementos XAML, como <Button/>, son el equivalente a crear instancias de objetos en el código de procedimiento. Por ejemplo, considera el siguiente XAML:

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Button Height="72" Width="160" Content="Click Me" />

</ Grid>

 

A continuación se muestra como el XAML puede ser escrito tanto en C# como en Visual Basic:

C#

/ /Inicializar el botón

Button myButton = new Button ();

/ /Establecer sus propiedades

myButton.Width = 160;

myButton.Height = 72;

myButton.Content = "Click Me";

/ /Asocia al árbol visual, específicamente como un hijo de el objeto Grid

/ /(llamada ‘ContentPanel’). En otras palabras, la posición del botón en la interfaz de usuario.

ContentPanel.Children.Add (myButton);

Visual Basic

‘Iniciar el botón

Dim myButton As New Button ()  

‘Establecer sus propiedades

myButton.Width = 160

myButton.Height = 72

myButton.Content = "Click Me"

‘Asociar al árbol visual, específicamente como un hijo de el objeto Grid ‘ (llamada ‘ContentPanel’). En otras palabras, la posición del

‘botón en la interfaz de usuario. 

ContentPanel.Children.Add (myButton)  

 

Para la Interfaz de Usuario, XAML tiene la ventaja de ser más fácil de leer y ser aun más compacto que el código de procedimiento. Sin embargo, a veces es necesario el uso de código de procedimiento para crear la interfaz de usuario de forma dinámica.

Propiedades

Los siguientes, son dos maneras de especificar los valores de la propiedad en XAML.

  • Atributo de la sintaxis de elementos
  • Propiedad de la sintaxis de elementos

El elemento de sintaxis del atributo, es el atributo = "valor", sintaxis que se ha visto en los ejemplos anteriores y que podrías estar familiarizado con él en HTML. En el siguiente ejemplo, es creado un rectángulo rojo. Su relleno es un atributo que se establece en un nombre de color predefinido.  

 

XAML

<Rectangle Fill="Red" />

Alternativamente, puedes especificar el valor del color, utilizando la sintaxis de elementos de propiedad.

XAML

<Rectangle>

<Rectangle.Fill>

<SolidColorBrush Color="Red" />

</ Rectangle.Fill>

</Rectangle>

En este caso, debes especificar explícitamente el SolidColorBrush (Pincel de color sólido), el cual es el objeto de tipo requerido por el relleno de la propiedad, no sólo la cadena "Red". A partir de este ejemplo, es posible deducir que la sintaxis de elementos de propiedad es sólo una manera detallada de hacer lo mismo. Sin embargo, no todos los valores de las propiedades se pueden especificar mediante una cadena simple de atributos. Por ejemplo, si necesitas especificar varias propiedades de un objeto que se utiliza como el valor de una propiedad, es probable que tengas que utilizar la sintaxis de elementos de la propiedad. En el siguiente ejemplo se crea un rectángulo, pero en lugar de un relleno simple de color rojo, se utilizará un degradado.

XAML

 

<- Este rectángulo se pinta con un degradado lineal diagonal. ->

<Rectangle Width="200" Height="200">

     <Rectangle.Fill>

         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

<GradientStop Color="Yellow" Offset="0.0" />

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="LimeGreen" Offset="1.0" />

         </ LinearGradientBrush>

      </ Rectangle.Fill>

</ Rectangle >

 

Cuando es ejecutada la aplicación se verá algo como esto:

 

clip_image006

 

Como puedes ver, el relleno de la propiedad, utiliza un objeto complejo (LinearGradientBrush) para crear el gradiente.  En casos como estos, es necesario utilizar la sintaxis del elemento de la propiedad, en lugar de simplemente especificar el valor como una cadena asignada a un atributo.

XAML y el árbol visual

En XAML, se tienen elementos (tales como <Button> y <Grid>) que pueden tener otros elementos (nodos) por debajo de ellos (los hijos). Esta relación padre / hijo especifican objetos que se colocan en la pantalla y responden a eventos iniciados por el usuario. Consideremos el siguiente ejemplo. 

Cuando se ejecuta la aplicación, se verá algo como esto:

clip_image008

XAML

<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Margin="20" Background="Blue">

Name="firstTextBlock" <TextBlock FontSize="30">First TextBlock</ TextBlock>

Name="secondTextBlock" <TextBlock FontSize="30"> Second TextBlock </ TextBlock>

Name="thirdTextBlock" <TextBlock FontSize="30"> Third TextBlock </ TextBlock>

</ StackPanel>

</ Grid>

El StackPanel azul está contenido dentro de un Grid  rojo. El elemento TextBlock está contenido dentro del StackPanel (el elementos TextBlock es hijo del StackPanel). Además, los elementos TextBlock están apilados uno encima del otro, en el orden en que se declaran en el XAML. El siguiente diagrama de árbol muestra las relaciones entre los elementos.

clip_image010

Además de determinar cómo se presenta el contenido, el árbol visual también puede tener un efecto de cómo se procesan los eventos. Muchos eventos típicos acontecidos en el árbol (llamados eventos enrutados) "burbuja". Por ejemplo, puedes conectar un controlador de eventos al StackPanel que controla el botón izquierdo del ratón (el evento MouseLeftButtonDown).

 El siguiente XAML muestra como agregar un MouseLeftButtonDown a un controlador de eventos denominado commonMouseHandler en el StackPanel.

XAML

<Grid Background="Red" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Margin="20" Background="Blue" MouseLeftButtonDown="commonMouseHandler">

<TextBlock Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>

<TextBlock Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>

<TextBlock Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>

 </ StackPanel>

</ Grid>

 

 

A continuación se muestra el código de procedimiento para colocar el evento:

 

 

 

 

C#

 

private void commonMouseHandler (object sender, RoutedEventArgs e)

 {

FrameworkElement feSource = e.OriginalSource as FrameworkElement;

switch (feSource.Name)

{

case "firstTextBlock":

firstTextBlock.Text = firstTextBlock.Text + “Click!";

break;

case "secondTextBlock":

secondTextBlock.Text = secondTextBlock.Text + “Click!";

break;

case "thirdTextBlock":

thirdTextBlock.Text = thirdTextBlock.Text + “Click!";

break;

}

 }

 

Visual Basic

 

Private Sub commonMouseHandler (ByVal sender As System.Object, _

ByVal e As System.Windows.Input.MouseButtonEventArgs)

Dim feSource Como FrameworkElement e.OriginalSource =

Select case feSource.Name

Case "firstTextBlock"

   firstTextBlock.Text = firstTextBlock.Text & "Click!"

Case "secondTextBlock"

   secondTextBlock.Text = secondTextBlock.Text & "Click!"

Case "thirdTextBlock"

   thirdTextBlock.Text = thirdTextBlock.Text & "Click!"

End Select

End Sub

 

Para probar este ejemplo, haz clic en el TextBlock. Cuando esto sucede, TextBlock es capturado, y se propaga hasta su elemento padre (el StackPanel), que a su vez controla el evento.

clip_image012

 

El siguiente diagrama muestra como el evento se propaga hasta el árbol:

clip_image014

 

1.       El usuario hace clic en TextBlock.

2.        El evento se propaga hasta el elemento primario.

3.         y siguen las burbujas hasta el árbol.

Dado que el evento continúa hasta el árbol, puede "escuchar" al evento MouseLeftButtonDown en el Grid.

Más que una interfaz de usuario estática

Tú puedes hacer algo más que la exhibición de una interfaz de usuario estática con XAML. Puedes crear animaciones, incrustar videos y enlazar datos solamente usando el lenguaje de marcación.  Aprenderás más acerca del uso del XAML en otros tutoriales, sin embargo, he aquí un ejemplo de una animación simple en código XAML. Para probar este ejemplo, haz clic en el rectángulo para poder visualizar el efecto.

clip_image016

XAML

 

<StackPanel Background="#FDF5E6">

<StackPanel.Resources>

<Storyboard x:Name="myStoryboard">

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="myRectangle"

Storyboard.TargetProperty="Height">

<!– Este KeyFrame restablece la animación
con un valor de (30) al comienzo de la animación
–>

<LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

<!—Esta animación se utiliza para crear aceleración. El SplineDoubleKeyFrame crea una animación que comienza lenta y luego acelera. El rectángulo "cae"–>

<SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"

KeyTime="0:0:0.8" />

<!– Esta animación spline crea el "rebote" en el final, donde el rectángulo acorta su longitud rápidamente al principio y luego frena y se detiene.–>

<SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"

KeyTime="0:0:1.5" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</StackPanel.Resources>

<Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue"

Width="200" Height="30" />

</StackPanel>

C#

// Cuando el usuario hace clic en el rectángulo, la animación comienza.

private void Mouse_Clicked(object sender, MouseEventArgs e)

 {

  myStoryboard.Begin();

 }

Visual Basic

Cuando el usuario hace clic en el rectángulo, la animación comienza.

Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)

myStoryboard.Begin

End Sub

Este es un ejemplo del uso de XAML para especificar el comportamiento de los contenidos en el lugar del diseño o de otros tipos estáticos de interfaces de usuario. El elemento Storyboard define algunas propiedades generales de la animación, tal como qué objeto será animado.  Los elementos hijos de Storyboard, como LinearDoubleKeyFrame, especifica cómo se ejecuta la animación. Para obtener más información sobre animaciones, consulta Animaciones en Silverlight.

¿Qué sigue?

XAML es un lenguaje sencillo basado en XML que se utiliza para crear la interfaz de usuario en tus aplicaciones Windows Phone o aplicaciones de Silverlight. Aunque puedes utilizar una herramienta WYSIWYG como Visual Studio o Expression Blend para crear interfaces de usuario, es útil comprender el marcado que estas herramientas generan, de manera que puedas hacer ajustes cuando sea necesario.  A medida que avances a través de los demás tutoriales, podrás encontrar este poderoso lenguaje de marcado en acción.