Informe XAML
Seminario profundización
Tutoría 2
Seminario profundización
Informe Introducción a interfaces gráficas XAML
José Omar Mayorga Pabón
Tutor
Presentado:
Universidad del Tolima
Gestión bases de datos
Septiembre 2020.
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 [Link] 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.
[Link]
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
con este elemento como destino. (Heredado de UIElement).
● 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
este elemento como posible destino de colocación. (Heredado de UIElement).
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 [Link]) 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="[Link]"
xmlns="[Link]
xmlns:x="[Link]
<[Link]>
<x:String x:Key="greeting">Hello world</x:String>
<x:String x:Key="goodbye">Goodbye world</x:String>
</[Link]>
<TextBlock Text="{StaticResource greeting}" Foreground="Gray"
VerticalAlignment="Center"/>
</Page>
<[Link]>…</[Link]>: 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 [Link].
A diferencia de la extensión de marcado StaticResource, el código no vuelve al diccionario
[Link] si los recursos no se encuentran en el primer diccionario.
Para buscar recursos de toda la aplicación desde el código, usa [Link]
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
[Link]
Ruben E. Spagnuolo(2012). Conceptos XAML, sintaxis tomado de
[Link]
tutorialspoint(2018).Conceptos XAML, controles tomado de
[Link]
Documentación visual studio(2020). Herramientas tomado de
[Link]
Que es un Evento, tomado de
[Link]
Eventos en XAML, tomado de
[Link]
Recomendaciones Xaml, tomado de [Link]
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
[Link]
%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:
[Link]
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