XAML

Lenguajes de interfaces de usuario, XAML
El diseño de interfaces no sólo abarca un único punto de vista aunque su principal use se destina a
la explotación de datos o sistemas de entrada/salida.
Los elementos puramente gráficos es posible representarlos y diseñarlos usando los mismos
lenguajes de programación utilizados para definir elementos de entrada/salida aunque normalmente
presentan librerías específicas.
Una manera más eficaz de diseño de interfaces es mediante el uso de lenguajes de representación,
los cuales permiten diseñar una interfaz en herramientas específicas de diseño o en editores de texto
simple siempre que se conozca la semántica del lenguaje empleado. Además, una vez creada la
interfaz es fácilmente exportable e importable entre diferentes herramientas IDE y sistemas
operativos.
Uno de los lenguajes de representación más usados es XAML (Extensible Application Markup
Language), lenguaje basado en lenguaje de marcas y que entre sus ventajas incluye la
compatibilidad con WPF (Windows Presentation Foundation), una tecnología de Microsoft
ideada para la creación de interfaces usando elementos típicos de MS Windows y WEB.
También podríamos definir XML como un lenguaje simple basado en XML para crear e
inicializar objetos .Net con relaciones jerárquicas.
El objetivo buscado por el diseño de interfaces basadas en XAML es realizar la separación

completa entre las capas de presentación y la capa lógica. Esta separación evita, como ocurría
hasta entonces, mezclar elementos de diferentes capas afectando a la modularidad de la aplicación y
el acoplamiento de la misma.
Arquitectura XAML dentro de Windows.
1
Ejemplo de diseño de interfaz con XAML
En este ejemplo usaremos el método más común de uso de XAML, el diseño de

interfaces para WPF. Para ello usaremos la herramienta oficial (y más actual a
día de hoy) de Microsoft, Visual Studio 2022, en concreto la variante
Community la cual es gratuita y se puede descargar desde
https://visualstudio.microsoft.com/es/vs/community/ y
https://visualstudio.microsoft.com/es/downloads/
Durante la instalación tendremos en cuenta de seleccionar las siguientes

características necesarias para desarrollar el ejercicio del ejemplo:
- Desarrollo de escritorio de .NET

- Desarrollo de la plataforma universal de Windows
2
Una vez instalado Visual Studio empezaremos la creación de nuestro proyecto.
A continuación usaremos el buscador situado en el extremo superior derecho

para buscar wpf y seleccionaremos Aplicación WPF (C#, Windows,
Escritorio).
3
Pondremos nombre al proyecto y marcaremos la casilla “Colocar la solución y
el proyecto en el mismo directorio”.
Una vez hecho eso nos aparecerá la interfaz por defecto de Visual Studio, por
ahora nos centraremos en el diseñador XAML, para ello seleccionaremos la
pestaña denominada XAML en la parte inferior en el caso de que no apareciese
por defecto y veríamos tanto la ventana principal (denominada Window) en el
diseñador gráfico como el código XAML en el diseñador XAML.
4
El elemento principal es la etiqueta <Window> que hará de elemento raíz,
además de la función de contenedor del resto de elementos. Una vez alcanzada
la etiqueta de cierre </Window> no podrá existir código o etiquetas
adicionales.
<Window x:Class="HolaMundo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HolaMundo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="645">
<Grid>
</Grid>
</Window>
Como nuestra ventana principal está muy sola, a continuación le añadiremos un
par de elementos más, para ello usaremos el Cuadro de Herramientas situado en
la parte izquierda del IDE y agregaremos una etiqueta “Label” y un botón
“Button”.
5
<Window x:Class="HolaMundo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HolaMundo"
mc:Ignorable="d"
Title="Los de segundo de DAM..." Height="450" Width="645"
WindowStyle="SingleBorderWindow" ResizeMode="NoResize" SizeToContent="Manual">
<Grid Margin="0,0,121,0">
<Label x:Name="TextoAmostrar" Content=" Pulsa el botón"

HorizontalAlignment="Left" Margin="108,162,0,0" VerticalAlignment="Top" Height="55"
Width="493" FontFamily="Segoe UI" FontSize="24" RenderTransformOrigin="1.264,0.431"/>
<Button x:Name="botonmostrar" Content="Púlsame,babe" HorizontalAlignment="Left"
Height="27" Margin="251,244,0,0" VerticalAlignment="Top" Width="126"/>
</Grid>
</Window>
Como se podrá observar en el código del proyecto, se han realizado diferentes
cambios, algunos de manera automática y otros por nosotros mismos al usar el
diseñador gráfico para colocar y editar “Label” “Button” y el editor de
6
elementos de texto y estilo de Ventana (WindowStyle) situado en la parte
derecha del IDE. Además, se renombró los elementos anteriores desde el propio
XAML, para ello se usó el elemento x:Name=”Nombre”.
¿Qué conclusión podemos sacar de todo esto?

Básicamente que tanto si editamos usando las herramientas gráficas del IDE
como el diseñador XAML, ambos interactúan el uno con el otro. Es decir, si
coloco un elemento gráfico con las herramientas gráficas el código XAML se
actualiza automáticamente y si editamos el código XAML desde el editor
XAML los elementos gráficos y sus propiedades se actualizan en consecuencia.
Y pensarás: “Claro como todos los IDE, ¿verdad?” PUES NO DEBERÍA,
porque te recuerdo que se supone que estamos programando una aplicación en
C#, no en XAML.
En definitiva, WPF traduce todos sus controles a una representación basada en

XAML, y es compilada en el código posteriormente.
XAML no deja de ser XML pero vitaminado, es decir al código tradicional

XML le han añadido más opciones convirtiéndolo en una opción más completa.
Para saber más sobre la sintaxis de XAML podemos consultar la guía oficial de
Microsoft en:
https://docs.microsoft.com/es-es/windows/uwp/xaml-platform/xaml-syntax-
guide
Volviendo al código C#, ahora seleccionaremos las acciones que los elementos
“Label” y “Button” van a realizar, para ello primero vamos la pestaña de
programación “CS”, en este caso MainWindow.xaml.cs
7
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace HolaMundo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
8
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
botonmostrar.Click += Botonmostrar_Click;
}
private void Botonmostrar_Click(object sender, RoutedEventArgs e)

{
TextoAmostrar.Content = "¡LO VAN A PETAR EN LAS
PRÁCTICAS!";
}
}
}
En este caso le hemos dotado al elemento “button” (denominado botonmostrar)

de la capacidad de ser pulsado con botonmostrar.Click += Botonmostrar_Click;
y que como consecuencia, el elemento “label” cambie su contenido original de
“Pulsa el botón” a “¡LO VAN A PETAR EN LAS PRÁCTICAS!”
9
Otras herramientas compatibles con XAML
Son diversas las herramientas compatibles con XAML, ya sean IDE’s

multiplataforma y multilenguaje capaces de exportar e importar su código, tales
como Avalonia https://avaloniaui.net/ que es compatible con Windows, Linux,
Mac OSX, Android, iOS y WebAssembly o UNO Platform igualmente
compatible con las mismas plataformas y accesible desde https://platform.uno/.
Además también tenemos herramientas puramente destinadas al desarrollo de

interfaces, en el caso de sistemas compatibles con las librerías GTK
(normalmente UNIX y Linux) tenemos a Glade, una diseñador de interfaces
bastante conocido capaz de tratar con varios derivados de XML (entre ellos
XAML) y que lo podemos descargar desde https://glade.gnome.org/. Debemos
tener en cuenta que Glade fue originariamente destinado para el entorno gráfico
de GNOME pero es totalmente compatible con cualquier proyecto que
implique el uso de GTK.
10
Por último, destacar la herramienta creada por Microsoft específicamente
destinada al diseño de interfaces en XAML, denominada XAML Studio y
disponible en la Microsoft Store de los sistemas operativos Windows. Dicha
herramienta fue creada con el único propósito de crear prototipos de interfaces
en XAML y exportarlos luego al IDE de tu elección.
11

XAML

Cargado por

Copyright:

Formatos disponibles

XAML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

XAML

Cargado por

Copyright:

Formatos disponibles

Lenguajes de interfaces de usuario, XAML

El objetivo buscado por el diseño de interfaces basadas en XAML es realizar la separación

Arquitectura XAML dentro de Windows.

En este ejemplo usaremos el método más común de uso de XAML, el diseño de

Durante la instalación tendremos en cuenta de seleccionar las siguientes

- Desarrollo de escritorio de .NET

A continuación usaremos el buscador situado en el extremo superior derecho

WindowStyle="SingleBorderWindow" ResizeMode="NoResize" SizeToContent="Manual">

<Label x:Name="TextoAmostrar" Content=" Pulsa el botón"

¿Qué conclusión podemos sacar de todo esto?

En definitiva, WPF traduce todos sus controles a una representación basada en

XAML no deja de ser XML pero vitaminado, es decir al código tradicional

private void Botonmostrar_Click(object sender, RoutedEventArgs e)

En este caso le hemos dotado al elemento “button” (denominado botonmostrar)

Son diversas las herramientas compatibles con XAML, ya sean IDE’s

Además también tenemos herramientas puramente destinadas al desarrollo de

También podría gustarte