Inicio rápido: Crear una interfaz de usuario con XAML
Collapse the table of content
Expand the table of content

Inicio rápido: crear una interfaz de usuario con XAML (XAML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Cuando eliges desarrollar tu aplicación en Microsoft Visual Basic, C# o las extensiones de componentes de Visual C++ (C++/CX), usas XAML para definir la interfaz de usuario. XAML es un lenguaje declarativo que puedes usar para crear la interfaz de usuario de aplicaciones tales como controles, formas, texto y otro contenido presentado en la pantalla. Si tienes conocimientos de programación web, puedes considerar que XAML es similar a HTML. Al igual que HTML, XAML se compone de elementos y atributos. Pero XAML se basa en XML y, por lo tanto, debe seguir las reglas de XML, entre las cuales se incluye tener un formato correcto. Quizás te preguntes "¿por qué preocuparme por el XAML si solo voy a usar herramientas como Microsoft Visual Studio o Blend para Visual Studio para crear la interfaz de usuario?". A pesar de que existen herramientas que generan marcado, de todas maneras querrás profundizar un poco más para entender o modificar el XAML. Además, a veces es más fácil codificar la UI a mano cuando quieres un mayor control o solo quieres saber lo que sucede.

Guía básica: ¿Qué relación tiene este tema con los demás? Consulta:

Requisitos previos

Damos por hecho que sabes crear una aplicación básica de Windows en tiempo de ejecución con Visual Basic, C# o C++. Si quieres obtener instrucciones para crear tu primera aplicación de Windows en tiempo de ejecución, consulta el tema sobre cómo crear tu primera aplicación de la Tienda Windows con C#, C++ o Visual Basic.

Ejemplo de XAML

Aquí está un ejemplo de XAML simple que crea un botón.


<Grid Margin="12,0,12,0">
    <Button Content="Click Me"/>
</Grid>

Usa el elemento de <Button> para especificar el control Button. Deja, cuando puedas, que el botón adapte él mismo dinámicamente su tamaño, o usa los atributos Width y Height para especificar un tamaño exacto cuando sea necesario. La <Grid> se genera cuando creas una aplicación de Windows en ejecución con C++, C# o una aplicación de Visual Basic en Visual Studio, y se usa para colocar objetos. Si quieres obtener más información sobre el diseño XAML, consulta Inicio rápido: Definir diseños.

Puedes usar Visual Studio para generar el XAML. Por ejemplo, puedes arrastrar un botón desde el Cuadro de herramientas a la superficie de diseño, o hacer doble clic en el botón del Cuadro de herramientas.

Interfaz de usuario del Cuadro de herramientas.

Aquí está el XAML que podría generar Visual Studio.


<Grid>
    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>

Visual Studio agrega algunos atributos adicionales, tales como HorizontalAlignment y, en ocasiones, Margin, para colocar el botón. Es posible que no quieras este marcado adicional si tus necesidades son muy específicas o si tienes previsto realizar algún tipo de rediseño posterior. Si es así, simplemente elimina el atributo.

Uno de los aspectos de usar un lenguaje declarativo como XAML es tener una separación clara entre el marcado que forma la interfaz de usuario y el código que hace que la aplicación realice algo. Por ejemplo, un diseñador del equipo podría diseñar una interfaz de usuario y después entregarle el XAML al desarrollador para agregar el código de procedimiento. Aunque el diseñador y el desarrollador sean la misma persona (como suele suceder), puedes conservar los efectos visuales en archivos XAML (.xaml) y el código de interfaz de usuario de procedimientos en archivos de códigos subyacentes (.cs y .vb).

XAML no es más que un código de procedimientos (solo que más fácil)

Los elementos XAML, como <Button />, son los equivalentes de los objetos de creación de instancia en el código de procedimientos. Por ejemplo, observa este XAML.


<Grid x:Name="ContentPanel" Margin="12,0,12,0">
    <Button Height="72" Width="160" Content="Click Me" />
</Grid>

A continuación se muestra cómo este XAML se podría reemplazar parcialmente por código escrito en C# o Visual Basic.


// Initialize the button
Button myButton = new Button();
// Set its properties
myButton.Width = 160;
myButton.Height = 72;
myButton.Content = "Click Me";
// Attach it to the visual tree, specifically as a child of
// a Grid object (named 'ContentPanel') that already exists. In other words, position
// the button in the UI.
ContentPanel.Children.Add(myButton);

Para UI, XAML es más fácil de leer y más compacto que el código de procedimientos Pero, en muy raras ocasiones, es necesario usar el código de procedimientos para crear la interfaz de usuario de forma dinámica.

Propiedades

Existen dos modos de especificar valores de propiedades en XAML.

  • Sintaxis de atributo
  • Sintaxis de elemento de propiedad

La sintaxis de atributo es la sintaxis de attribute="value" que viste en los ejemplos anteriores y que quizás conozcas de HTML. En el próximo ejemplo, creamos un Rectangle rojo. Establecemos el atributo Fill en un nombre de color predefinido que el analizador de XAML convierte en un SolidColorBrush apropiado para la propiedad de relleno.


<Rectangle Fill="Red" />

De forma alternativa, podrías especificar el valor del color mediante la sintaxis de elemento de propiedad.


<Rectangle>
    <Rectangle.Fill>
        <SolidColorBrush Color="Red"/>
    </Rectangle.Fill>
</Rectangle>

En este caso, especificas de forma explícita el objeto SolidColorBrush, que es el tipo que requiere la propiedad Fill, en lugar de usar solo la cadena "Red". De este ejemplo, se puede deducir que la sintaxis de elemento de propiedad es solo una forma detallada de hacer lo mismo. Pero no todos los valores de propiedad se pueden especificar mediante una cadena de atributo simple. No todos los tipos tienen convertidores de tipos desde cadenas. Además, si necesitas especificar varias propiedades de un objeto usado como el valor de una propiedad, seguramente necesitarás usar la sintaxis de elemento de propiedad. Este ejemplo crea un Rectangle que, en lugar de un relleno rojo simple, usa un degradado creado por un LinearGradientBrush.


<!-- This rectangle is painted with a diagonal linear gradient. -->
<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>

Degradado multicolor.

La propiedad de Fill usa un objeto complejo, LinearGradientBrush, para crear el degradado. En casos como este, debes usar la sintaxis de elemento de propiedad en lugar de simplemente especificar el valor como una cadena asignada a un atributo.

XAML y el árbol visual

En el XAML, tienes elementos, como <Button> y <Grid>, que pueden tener otros elementos (nodos) debajo de ellos (secundarios). Esta relación primario/secundario especifica cosas tales como el modo en el que los objetos están colocados en la pantalla y el modo en el que responden a eventos iniciados por el usuario. Observa este ejemplo.


<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue">
        <TextBlock x:Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

El StackPanel azul está contenido dentro de una Grid roja. Los elementos TextBlock están contenidos dentro del StackPanel (estos elementos TextBlock son secundarios de StackPanel). Además, los elementos TextBlock están apilados uno encima del otro en el orden en el que se declaran en XAML.

Este diagrama de árbol muestra las relaciones entre los elementos.

Diagrama de árbol que muestra la jerarquía de elementos.

Además de determinar cómo se presenta el contenido, el árbol visual también puede tener un efecto sobre el modo en el que se procesan los eventos. Varios eventos relacionados con la interfaz de usuario y las entradas propagan los eventos hacia arriba en el árbol. Por ejemplo, puedes adjuntar un controlador de eventos al StackPanel que controle el momento en que un usuario presiona o hace clic en cualquiera de los objetos TextBlock. Aquí se muestra cómo agregar un controlador de eventos PointerPressed llamado "commonHandler" al StackPanel desde el diagrama.


<Grid Background="Red" x:Name="ContentPanel" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue" PointerPressed="commonHandler">
        <TextBlock x:Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

Aquí está el código de procedimientos para controlar el evento.


private void commonHandler(object sender, PointerRoutedEventArgs 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;
    }
}

Cuando ejecutas este ejemplo y presionas o haces clic en TextBlock, el TextBlock captura el evento, pero después el evento sube en forma de burbujas hacia el elemento principal (el StackPanel), el cual después controla el evento.

Este diagrama muestra cómo el evento sube en forma de burbujas por el árbol.

Diagrama de árbol visual que muestra cómo un evento sube en forma de burbujas por el árbol.

Debido a que el evento continúa subiendo por el árbol, podrías escuchar el evento PointerPressed en el elemento de Grid también.

Para obtener más información sobre los eventos enrutados y sobre cómo escribir controladores, consulta Introducción a eventos y eventos enrutados.

Una guía rápida sobre los atributos XAML y extensiones de marcado

Cuando creas o examinas XAML en un editor después de crearlo con las herramientas de diseño de Visual Studio, a menudo usas ciertos conceptos de marcado que son únicos para XAML, y no están directamente representados en el lenguaje de programación de copia de seguridad. Aquí hay una lista con algunos de estos conceptos.

  • El atributo x:Name. Agrega este atributo en cualquier elemento del objeto XAML donde quieres poder hacer referencia a la instancia de tiempo de ejecución creada como parte de la lógica de código subyacente. La cadena que especificas para x:Name se convierte en el nombre de la instancia creada dentro de clases parciales que están correlacionadas con el XAML, y puedes hacer referencia a la instancia al usar ese nombre. Visual Studio o Blend para Visual Studio a menudo agregan x:Name al XAML automáticamente.
  • El atributo x:Key. Agrega este atributo en los elementos del objeto XAML en una circunstancia en particular: cuando definas los recursos contenidos en un ResourceDictionary del XAML. Para obtener más información, consulta las referencias a ResourceDictionary a los recursos XAML.
  • La x: en x:Key y x:Name señala que estas entidades están definidas por el espacio de nombres XAML para el lenguaje XAML mismo. Esto es lo que le permite a estos atributos aplicarse casi a cualquier elemento de objeto XAML, inclusive elementos que representan clases que tú mismo definiste.
  • {Binding} es una extensión de marcado XAML que se usa para establecer una referencia de enlace de datos en XAML. Para obtener más información sobre conceptos de enlace de datos, consulta Inicio rápido: enlazar datos a controles o Introducción al enlace de datos.
  • {TemplateBinding} es una forma especializada de una declaración de enlace que conecta las propiedades de una plantilla con las propiedades del tiempo de ejecución de la clase que aplica la plantilla. RelativeSource es una extensión de marcado relacionada que puede establecer la propiedad {RelativeSource} de un enlace en marcado.
  • {StaticResource} es una extensión de marcado que se usa para hacer referencia a cualquiera de los recursos definidos por el XAML en un ResourceDictionary del XAML. {StaticResource} toma un solo argumento, que especifica la misma cadena de clave que el x:Key que usaste para identificar el recurso en el ResourceDictionary.
  • Si alguna vez necesitas especificar un valor null en XAML, usa la cadena {x:Null}.

Para obtener más información, consulta Guía de sintaxis XAML básica Características del lenguaje del espacio de nombres XAML (x:) o Extensiones de espacios de nombres de Windows en tiempo de ejecución para XAML

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Referencias a ResourceDictionary a los recursos XAML
Introducción a XAML
Guía de sintaxis XAML básica

 

 

Mostrar:
© 2017 Microsoft