Informe XAML

Seminario profundización
Tutoría 2

Seminario profundización

Informe Introducción a interfaces gráficas XAML

José Omar Mayorga Pabón

Presentado:

Universidad del Tolima

1
 Informe XAML
Seminario profundización
Tutoría 2

1. Introducción

XAML, que significa extensible Application Markup Language, es la variante de XML de

Microsoft para describir una GUI. En marcos de GUI anteriores, como WinForms, se creó una

GUI en el mismo lenguaje que usaría para interactuar con la GUÍA, p. Ej. C # o VB.NET y

generalmente mantenido por el diseñador (por ejemplo, Visual Studio), pero con XAML,

Microsoft va por otro camino. Al igual que con HTML, puede escribir y editar fácilmente su

GUI.

2.Objetivos

General

El objetivo general del presente informe se basa principalmente en el reconocimiento y

comprensión básica del lenguaje XAML y sus componentes, con el fin de demostrar su

importancia ya que es la base para el desarrollo estructural de las aplicaciones en diferentes

plataformas.

Específicos

● Exponer los conceptos básicos del lenguaje XAML.

● Identificar las ventajas al realizar interfaces haciendo uso de este lenguaje.

● Llevar a cabo prácticas mediante ejemplos básicos, que faciliten la comprensión del tema

● Analizar la separación de interfaz gráfica y código para un desarrollo mucho más limpio

y comprensible.

2
 Informe XAML
Seminario profundización
Tutoría 2

3. Desarrollo temático

¿Qué es XAML?

Significado de sus siglas:

El significado de XAML proviene del inglés "extensible Application Markup Language" o

"Lenguaje de marcado extensible de aplicación".

Concepto:

XAML es un lenguaje basado en XML creado por Microsoft como una alternativa al código de

programación imperativo para poder crear objetos, inicializarlos y organizarlos en jerarquías de

padres e hijos.

Forma parte del conjunto de aplicaciones de Microsoft. Ayuda en la presentación visual del

software desarrollado en Microsoft Expression Blend o visual studio.

XAML más que todo fue diseñado para soportar las clases y los métodos de la plataforma de

desarrollo .NET, la cual es la plataforma que tiene interacción con el usuario, en especial el

despliegue en pantalla.

Características:

● XAML se usa para crear, editar y reutilizar GUI para Windows y para algunas
aplicaciones web.

● En XAML, es muy fácil crear, inicializar y establecer propiedades de un objeto

● XAML actualmente solo está disponible para la plataforma Windows.

Ventajas

● XAML suele ser más conciso y legible que el código equivalente.

3
 Informe XAML
Seminario profundización
Tutoría 2

● La jerarquía de elementos primarios y secundarios inherente en XML permite

que XAML límite con mayor claridad visual de la jerarquía de elementos primarios y

secundarios de los objetos de la interfaz de usuario.

● El código XAML puede escribirse fácilmente a los programadores, pero también se

presta a ser herramienta y generarse mediante herramientas de diseño visual.

Ejemplo:

El siguiente es un ejemplo básico de un proyecto (wpf) en blanco en el que se observa como es el

lenguaje XAML.

Tecnologías XAML

4
 Informe XAML
Seminario profundización
Tutoría 2

Una gran ventaja del lenguaje XAML es sin duda su uso no exclusivo aplicado a una

sola tecnología. Por el contrario, abarca más de una como lo pueden ser aplicaciones (WPF,

UWP, SILVERLIGHT, aplicaciones móviles con XAMARIN) permitiendo de esta manera el

desarrollo de sus interfaces gráficas (GUI) y lógica de programación.

Herramientas

5
 Informe XAML
Seminario profundización
Tutoría 2

Sabemos de la existencia del IDE de desarrollo visual studio y su gran capacidad para

trabajar en proyectos .NET de Microsoft, sin embargo, existen otras herramientas que nos sirven

para desarrollar aplicaciones y especialmente para trabajar con el lenguaje XAML, estas son:

● Expression blend

● Zam 3d

● Expression studio

Sintaxis

Similar a XML, la sintaxis de un elemento XAML siempre:

● comienza con un corchete de ángulo abierto (<) y termina con un corchete de ángulo

cerrado (>).

● Cada etiqueta de elemento también tiene una etiqueta de inicio y una etiqueta de

finalización.

Ilustración sintaxis con un objeto “button”

6
 Informe XAML
Seminario profundización
Tutoría 2

Un objeto Button está representado por el elemento <Button>.

Ejemplo

Codigo XAML Interfaz grafica

Controles

7
 Informe XAML
Seminario profundización
Tutoría 2

Como definición simple del apartado de controles podemos decir que se trata de una

“biblioteca” la cual nos facilita el desarrollo de IU. Algunos de ellos tienen una presentación

visual y son popularmente conocidos como lo pueden ser; Button, ComboBox, Textbox,

Textblock..

8
 Informe XAML
Seminario profundización
Tutoría 2

Ejemplos prácticos - controles

¿Qué es un evento?

Un evento es una acción que reconoce un objeto, como presionar un botón, presionar una tecla, y
para cada evento se puede escribir código para que responda a la acción que se realizó.

Los eventos se pueden producir como resultado de una acción del usuario, del código del
programa o puede que los desencadene el sistema.

Estos son algunos de los eventos de uso común para diferentes controles:

● Hacer clic

Ocurre cuando se hace clic en un control de botón. (Heredado de ButtonBase).

● ContextMenuCierre

Ocurre justo antes de que se cierre cualquier menú contextual del elemento. (Heredado de
FrameworkElement).

● Arrastrar

9
 Informe XAML
Seminario profundización
Tutoría 2

Ocurre cuando el sistema de entrada informa un evento de arrastre subyacente

● DropDownCerrado

Se produce cuando se cierra la parte desplegable de ComboBox.

● SelectionChanged

Ocurre cuando la selección de texto ha cambiado.

● Desenfrenado

Ocurre cuando un ToggleButton no está marcado. (Heredado de ToggleButton).

● ValueChanged

Ocurre cuando cambia el valor del rango. (Heredado de RangeBase).

● KeyDown

Se produce cuando se presiona una tecla del teclado mientras UIElement tiene el foco.
(Heredado de UIElement).

● DragOver

Se produce cuando el sistema de entrada informa de un evento de arrastre subyacente con

Ejemplo de evento de clic de botón Click (Click = "OnClick")

10
 Informe XAML
Seminario profundización
Tutoría 2

Se activará un evento OnClick.

Cuando compile y ejecute el código anterior, producirá el siguiente resultado:

11
 Informe XAML
Seminario profundización
Tutoría 2

Implementación del Evento OnClick que mostrará un mensaje cuando se haga clic en este

botón.

12
 Informe XAML
Seminario profundización
Tutoría 2

Al hacer clic en el botón, se activará el evento de clic (OnClick) y se mostrará el siguiente

mensaje.

13
 Informe XAML
Seminario profundización
Tutoría 2

NAMESPACE (ESPACIOS DE NOMBRE)

Los espacios de nombres (namespaces) son uno de los pilares que conforman los

cimientos de XML.

En general, en informática, un namespace o espacio de nombres es un medio para

organizar clases dentro de un entorno, agrupándolas de un modo más lógico y

jerárquico. Por ejemplo, si estamos desarrollando un conjunto de clases para las

operaciones de gestión de una biblioteca, podemos ir escribiendo todas las clases

y situarlas dentro de una misma aplicación o DLL (biblioteca). Supongamos que

tenemos dos clases para operaciones de gestión de préstamos,

denominadas Titulo y Fecha, y otras dos clases para operaciones de compra,

denominadas Factura y Precio.

14
 Informe XAML
Seminario profundización
Tutoría 2

DEFINIR UN ESPACIO DE NOMBRES:

Los espacios de nombres se aplican tanto a atributos como a elementos. Para definir un espacio

de nombres al que pertenece un elemento, es necesario añadir un atributo a la definición de

elemento, donde el nombre del atributo sea xmlns ("xml namespace") y el valor puede ser una

cadena cualquiera, aunque por convención suelen ser URLs. Por ejemplo, podemos hacer esto

añadiendo una entrada como la siguiente en la lista de definición de atributos de un elemento

title:

Los nombres de los espacios de nombres XML pueden aparecer como nombres calificados, que

contienen el carácter "dos puntos", separando el nombre en un prefijo de espacio de nombres y

su parte local. El prefijo, que es mapeado a un URI, selecciona un espacio de nombres. La

combinación de los URIs de espacios de nombres universalmente gestionados y el espacio de

15
 Informe XAML
Seminario profundización
Tutoría 2

nombres propio del documento produce unos identificadores que garantizan la unicidad

universal.

DEFINIR UN PREFIJO DE ESPACIOS DE NOMBRE

Usando el atributo xmls, cuando necesitamos una sola referencia a un espacio de nombres, la

tarea es fácil, pero cuando necesitamos hacer la misma referencia varias veces, añadir dicho

atributo se convierte en una tarea tediosa que también hace difícil cambiar el nombre del espacio

de nombres, en caso de que se quiera modificar posteriormente. La alternativa es definir un

prefijo de espacio de nombres, que es tan sencillo como especificar xmlns: nombre del prefijo

antes del valor del atributo, como se ve a continuación:

Esta definición configura mt como un prefijo que puede usarse para calificar el nombre del

elemento actual y cualquier elemento dentro de él. Como el prefijo puede usarse en cualquier

elemento contenido, tiene más sentido definirlo en el elemento raíz del documento XML. -

CODE BEHIND

El Code Behind es una técnica de diseño de páginas web (en concreto Microsoft ASP.NET) en el

que la página web y de fondo el código fuente se almacenan por separado en archivos,

permitiendo a los diseñadores web y programadores a trabajar de forma independiente.

16
 Informe XAML
Seminario profundización
Tutoría 2

Lo que nos quiere decir es que el code behind es una práctica o técnica de programación

orientada a objetos en donde el código fuente visual y de fondo se almacenan en archivos

diferentes.

17
 Informe XAML
Seminario profundización
Tutoría 2

18
 Informe XAML
Seminario profundización
Tutoría 2

Diccionario de recursos

El diccionario de recursos tiene la función de almacenar los recursos que se crean en el

transcurso de la elaboración del programa y nos permite re utilizar los recursos creados.

Definir y usar los recursos en XAML

Los recursos XAML son objetos a los que se hace referencia desde el marcado más de una vez.

Los recursos se definen en un objeto ResourceDictionary, normalmente en un archivo

independiente.

<Page

x:Class="MSDNSample.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Page.Resources>

<x:String x:Key="greeting">Hello world</x:String>

<x:String x:Key="goodbye">Goodbye world</x:String>

</Page.Resources>

<TextBlock Text="{StaticResource greeting}" Foreground="Gray"

VerticalAlignment="Center"/>

</Page>

<Page.Resources>…</Page.Resources>: define el diccionario de recursos.

<x:String>: define el recurso con la clave "greeting".

19
 Informe XAML
Seminario profundización
Tutoría 2

{StaticResource greeting}- Busca el recurso con la clave "greeting", que se asigna a la

propiedad Text del objeto TextBlock.

Los recursos no tienen que ser cadenas, pueden ser cualquier objeto susceptible de compartirse,

como estilos, plantillas, pinceles y colores. los controles, las formas y otros objetos

FrameworkElement no se pueden compartir, por lo que no se pueden declarar como recursos

reutilizables. Para más información sobre el uso compartido, consulta la sección Los recursos

XAML deben ser compartibles.

Buscar recursos en XAML

la búsqueda de recursos en xaml funciona igual que en cualquier otro diccionario,Al realizar una

búsqueda de recursos en el código, solo se busca en los recursos del diccionario Page.Resources.

A diferencia de la extensión de marcado StaticResource, el código no vuelve al diccionario

Application.Resources si los recursos no se encuentran en el primer diccionario.

Para buscar recursos de toda la aplicación desde el código, usa Application.Current.Resources

para obtener el diccionario de recursos de la aplicación

20
 Informe XAML
Seminario profundización
Tutoría 2

FrameworkElement

FrameworkElement es una clase base de la que heredan los controles y tiene una propiedad

Resources. Por lo tanto, se puede agregar un diccionario de recursos locales a cualquier objeto

FrameworkElement,Para acceder a los recursos de ese elemento desde el código, se usa la

propiedad Resources de ese elemento. Al acceder a los recursos de un FrameworkElement en el

código, en lugar de XAML, solo buscará en ese diccionario, no en los diccionarios del elemento

primario.

Diccionario de recursos compartidos

Un diccionario de recursos combinados combina un diccionario de recursos en otro, que

normalmente está en otro archivo.

Puedes usar la combinación de la secuencia de búsqueda y la falta de obligatoriedad de una clave

única en los ámbitos de diccionarios combinados para crear una secuencia de valores de reserva

de los recursos de ResourceDictionary. Para almacenar las preferencias de usuario para un

determinado color de pincel en el último diccionario de recursos combinado en la secuencia,

mediante un diccionario de recursos que se sincronice con el estado de tu aplicación y los datos

de preferencia del usuario. , si aún no existen preferencias del usuario, se puede definir esa

misma cadena de clave para un recurso de ResourceDictionary en el archivo MergedDictionaries

inicial, y puede servir como valor de reserva.

21
 Informe XAML
Seminario profundización
Tutoría 2

los recursos XAML deben ser compartibles

Es necesario que se pueda compartir, porque cuando se construye el árbol de objetos de una

aplicación y se usa en tiempo de ejecución, los objetos no pueden existir en varias ubicaciones

del árbol a la vez. El sistema de recursos crea copias a nivel interno de los valores de recursos

que se usarán en el gráfico de objetos de la aplicación cuando se solicite cada recurso XAML.

Un ResourceDictionary y el XAML de Windows Runtime normalmente admiten estos objetos

para compartirlos:

● Estilos y plantillas (Style y clases derivadas de FrameworkTemplate)

● Pinceles y colores (clases derivadas de los valores Brush y Color)

● Tipos de animación, incluida la clase Storyboard

● Transformaciones (clases derivadas de GeneralTransform)

● Matrix y Matrix3D

● Valores de Point

● Otras estructuras relacionadas con la interfaz de usuario, como Thickness y CornerRadius

● Tipos de datos intrínsecos de XAML

22
 Informe XAML
Seminario profundización
Tutoría 2

5. Webgrafía

Jose Manuel Montero, O.(2019, febrero 06). ¿Que es XAML? tomado de

https://openwebinars.net/blog/que-es-xaml-en-net/

Ruben E. Spagnuolo(2012). Conceptos XAML, sintaxis tomado de

http://respag.net/xaml.aspx

tutorialspoint(2018).Conceptos XAML, controles tomado de

https://www.tutorialspoint.com/xaml/xaml_tutorial.pdf

Documentación visual studio(2020). Herramientas tomado de

https://docs.microsoft.com/es-es/visualstudio/xaml-tools/?view=vs-2019

Que es un Evento, tomado de

https://www.tutorialspoint.com/xaml/xaml_event_handling.htm

Eventos en XAML, tomado de

Recomendaciones Xaml, tomado de https://geeks.ms/rmayo/2010/11/15/recomendaciones-

para-crear-interfaz-de-usuario-en-silverlight-xaml/

Hosting Nicaragua (2014, junio 28), ¿Que es el Code Behind? tomado de

23
 Informe XAML
Seminario profundización
Tutoría 2

https://www.creatuwebnicaragua.com/que-es-el-code-behind/#:~:text=Una%20t

%C3%A9cnica%20de%20dise%C3%B1o%20de,a%20trabajar%20de%20forma

%20independiente.

Microsoft, (2020), diccionario de recursos,Referencias a ResourceDictionary y a los recursos

XAML, tomado de:

https://docs.microsoft.com/es-es/windows/uwp/design/controls-and-

patterns/resourcedictionary-and-xaml-resource-references

6. Recomendaciones:

● Utiliza en todo momento estilos y plantillas. Estos elementos te ayudarán a simplificar tu

desarrollo, evitando repeticiones de código y pérdida de tiempo.

● Elimina los estilos plantillas y animaciones innecesarias, estos elementos retrasan la

carga de la aplicación.

● No utilice los espacios de nombres innecesarios "xmlns" en el archivo XAML. Esto

sobrecarga el tiempo de carga de la página de Silverlight.

● Utiliza un nombre significativo en cada uno de los prefijos del espacio de nombres de

"xmlns". Por ejemplo: xmlns:Mapas Logística es más significativo e identificables que

xmlns:ML. Esto evita las múltiples declaraciones de espacios de nombres en el futuro.

● Cuando agreguéis un control que no tiene elementos en su interior o sea un control padre

sin hijos, mejor cerrarlo con la etiqueta "/ >" en lugar de la etiqueta de cierre (</TAG>).

Esto otorga limpieza a tu código XAML y facilidad de lectura por parte de otros

colaboradores dentro de tu proyecto.

24
 Informe XAML
Seminario profundización
Tutoría 2

● Incluir comentarios en XAML siempre ayuda. Esto te será útil en un futuro a la

hora de revisar el código que no has tocado durante un tiempo. También ayuda a personas

que colaboran en tu proyecto(Diseñadores,Tester,etc.) a una fácil comprensión y con ello

mejorar el tiempo de desarrollo de Software.

● Siempre debemos intentar utilizar el objeto Grid como el panel padre de tu aplicación. El

Grid tiene unas características de flexibilidad que nos hacen la vida más sencilla en

cuanto a interfaz de usuario se refiere.

● No debes de utilizar paneles adicionales (por ejemplo, Grid, StackPanel, Wrappanel etc.)

A menos que sea necesario, estos elementos necesitan un tiempo de carga mayor que

otros objetos simples que ofrece Silverlight.

● Utilice la propiedad Visibility de los controles en lugar de la propiedad de Opacity, si lo

que deseamos es ocultar el contenido de los mismos. Si otorgamos el valor cero a la

propiedad Opacity de un objeto, dicho elemento no estará visible dentro de la interfaz de

usuario, pero ocupa espacio en la memoria y en la interfaz de usuario. Por otro lado, la

propiedad Visibility contrae el control en la interfaz de usuario, ocupando menos espacio

en memoria y a su vez dejando que otros controles utilicen el espacio que este ocupa

dentro de la interfaz de usuario.

● Siempre que vayas a diseñar la interfaz de usuario en especial animaciones utiliza

Expression Blend, esta herramienta no solo te ayudará en la creación de las mismas, sino

que además te permite utilizar un sin fin de opciones en un solo clic sin necesidad de

incorporar código de forma manual.

● Al usar diccionario de re recursos

● No confundir los conceptos relativos a ResourceDictionary con la acción de

compilación Resource, los archivos de recursos (.resw) u otros "recursos" que se

describen en el contexto de la estructuración del proyecto de código que genera el

paquete de la aplicación.

25
 Informe XAML
Seminario profundización
Tutoría 2

● se debe agregar los recursos antes de que cualquier página intente usar el

recurso.

● no se puede agregar recursos al constructor de la aplicación

● Puedes crear un archivo de diccionario de recursos en Microsoft Visual Studio mediante

la opción Agregar > Nuevo elemento… > Diccionario de recursos del menú Proyecto.

● siempre se comprueban todos los valores que proporcionas en un diccionario de recursos

principal antes de comprobar los diccionarios combinados

● Para que un objeto exista en una clase ResourceDictionary (diccionario de recursos),

dicho objeto se debe poder compartir.

● Los tipos personalizados que se usan como recursos no pueden tener la clase UIElement

en su herencia, porque un UIElement nunca se puede compartir

7. Conclusiones

Xaml es un lenguaje basado en XML y se utiliza en los sistemas operativos de Microsoft desde
Windows Vista. La particularidad de Xaml es que permite a los desarrolladores trabajar
separando los datos de la presentación, al igual que ocurre con el desarrollo web; la cuestión de
la interacción con el usuario, en el diseño de aplicaciones, implica una reflexión sobre la
posibilidad de ofrecer contenido para múltiples soportes. Existen muchas aplicaciones que están
disponibles tanto para Smartphone y tabletas como para ordenadores de escritorio, se trata de
aplicaciones web responsivas.

26