XAML Basico

En los capítulos anteriores hablamos de que es XAML y para que lo utilizamos, pero ¿Como creamos un control en XAML?. Como vemos en el siguiente ejemplo, crear un control en XAML es tán facil como escribir su nombre rodeado de los signos Mayor y Menor. Un botón se vería de la siguiente forma:

<Button>

Las etiquetas XAML tienen que ser cerradas, escribiendo un etiqueta de cierre o insertando una barra diagonal al final del nombre de la etiqueta y antes que el signo mayor de cierre:

<Button></Button>

O

<Button />

Una gran cantidad de controles te permiten poner contenido entre la etiqueta de inicio y la de finalización, en los cuales formaría parte del contenido del control. En este ejemplo, el control Button te permite especificar el texto que sera mostrado en él entre las etiquetas de inicio y cierre:

<Button>A button</Button>

En HTML la escritura no es sensible a mayúsculas, pero en XAML si lo es. Esto se debe a que los nombres corresponden a un tipo en el Framework de .NET. Lo mismo aplica para los nombres de los atributos, que corresponden a propiedades del control. Aquí tenemos un botón en el cual definimos un conjunto de propiedades agregando atributos a la etiqueta:

<Button FontWeight="Bold" Content="A button" />

Establecimos la propiedad FontWeight, que nos dió una letra de tipo negrita, y luego establecimos la propiedad Content, que sería exactamente igual a poner el texto entre las etiquetas de inicio y finalización. Sin embargo, todos los atributos de un control pueden ser definidos de esta forma, donde parecerán como etiquetas hijas del control principal, usando la notación Control-Punto-Propiedad:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

El resultado es exactamente igual al anterior, entonces en este caso sería un tema de sintaxis y nada mas. Sin embargo, muchos controles permiten otro contenido diferente a texto, como otros controles. Aquí tenemos un ejemplo donde tenemos texto en diferentes colores dentro de un mismo botón. Esto se puede lograr utilizando controles TextBlock dentro del Button:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

La propiedad Content solamente te permite anexar un elemento hijo. Para lograr anexar múltiples elementos en este caso usamos un WrapPanel para contener los diferentes bloques coloreados de texto. Los paneles como el WrapPanel juegan un papel importante en WPF y lo vamos a tratar en mucho mas detalle posteriormente. Solo por el momento considéralo como un contenedor de otros controles.

Exactamente el mismo resultado puede ser logrado con las siguientes etiquetas, la cual es simplemente otra forma de escribir lo mismo:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Código VS. XAML

Esto demuestra lo sencillo que es escribir XAML, pero con múltiples caminos diferentes para lograrlo. Si piensas que el ejemplo anterior tiene una gran cantidad de etiquetas para conseguir solamente como resultado un botón con texto en diferentes colores, trata de compararlo con la cantidad de código que se necesitaría para lograrlo en C#:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Por supuesto que el ejemplo anterior puede ser escrito menos explicito y puede utilizar una mayor cantidad de azúcar sintáctico, pero el punto sigue siendo conciso: XAML es corto y conciso para describir interfaces gráficas.