Creando la interfaz de usuario de Windows Phone (XAML)

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.

21 thoughts on “Creando la interfaz de usuario de Windows Phone (XAML)

  1. Omar

    Hola talvez me ayudan

    al probar el ejemplo de

    private void commonMouseHandler (object sender, RoutedEventArgs e)

    lo copio igual y me genera los siguientes errores:
    The name ‘firstTextBlock’ does not exist in the current context
    The name ‘firstTextBlock’ does not exist in the current context
    The name ‘secondTextBlock’ does not exist in the current context
    The name ‘secondTextBlock’ does not exist in the current context
    The name ‘thirdTextBlock’ does not exist in the current context
    The name ‘thirdTextBlock’ does not exist in the current context

    que estoy haciendo mal??????
    GRACIAS

  2. Rodrigo Díaz Concha Post author

    Hola Omar, en qué proyecto estás haciendo el código? Asegúrate de no borrar la llamada a InitializeComponent() en el constructor de las clases! Por favor avísanos si lo has podido resolver. Gracias y salu2!

  3. Miguel

    lo probé y me sale perfecto gracias..
    solo que quería agregarle algunas cosas adicionales como por ejemplo:
    en la primer parte cuando se agrega al contentpanel un nuevo elemento hijo: probé agregando un nuevo botón cuando dé click en un botón y si me salió.
    //código
    Button b= new Button();
    b.Height=100;
    b.Width=150;
    b.Content=”lo hice”;
    ContentPanel.Children.Add(b);
    pero ahora quiero agregar un rectángulo y que se imprima en mi contentpanel como en el caso anterior del botón, pero no me salió.
    vi que en XAML se puede asignar el color con Fill=”#FF1A1AD8″, pero en código C# no sale la opción para Fill, no se que colocar para asignarle un color a mi rectángulo en código.
    ojala me pueda ayudar con esto.
    gracias.
    estoy utilizando expressión Blend 4.

  4. javier

    Hola:
    cuando hacgo esta parte del codigo se pone este grid o la propiedad background =”Red” va en el primer el grid

    2.Cuando pongo el name me señala que no puedo agregar un string
    Grid x:Name=”ContentPanel” Background=”Red” Grid.Row=”1″ Margin=”12,0,12,0″>

    Name=”firstTextBlock” First TextBlock

    Name=”secondTextBlock” Second TextBlock

    Name=”thirdTextBlock” Third TextBlock

  5. javier

    Hola:
    cuando pulso el boton para el simulador me sale este mensaje:

    Event handler ‘commonMouseHandler’ not found on class ‘PhoneApp1.MainPage’

    gracias

  6. LUIS EDUARDO

    Para los que no les funciona la parte de:

    Name=”firstTextBlock” First TextBlock
    Name=”secondTextBlock” Second TextBlock
    Name=”thirdTextBlock” Third TextBlock

    Hay que corregirlo por lo siguiente:

    First TextBlock

    Second TextBlock

    Third TextBlock

  7. LUIS EDUARDO

    Para corregirlo en la parte que dice:

    Name=”firstTextBlock” First TextBlock
    Name=”secondTextBlock” Second TextBlock
    Name=”thirdTextBlock” Third TextBlock

  8. LUIS EDUARDO

    En la primera parte Name aparece por fuera de la etiqueta “StackPanel” para corregirlo tienen que agregarle la propiedad Name=”firstTextBlock” dentro del “StackPanel”

  9. Juan Carlos Cardona

    la correcion para el ejemplo de eventos es:

    Dim feSource As 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

  10. Manuel

    tengo un problema con la ultima animacion, hago todo lo que dicen, pero cuando clickeo el rectangulo, no pasa nada. Ayudenme por favor.
    Gracias

  11. Fernando

    Gracias por el tutorial, esta excelente.

    Para algunos que tuvieron errores al compilar, creo que deben asegurarse que al copiar el texto pueden haber algunos errores de sintaxis, como espacios en las etiquetas o palabras pegadas, o comillas mal, etc,. es importante revisar bien cuando se utiliza el copy paste

  12. Erick Delgadillo

    Muy bueno el Blog , ahora a probar en la practica con la información brindada

    Saludes

  13. VIctor Hurtado

    Exelente de Tutorial espero seguir aprendiendo cada de ves y poder contar con ustedes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">