SEMINARIO DE PROFUNDIZACION.

INFORME 2 “XAML”

JUAN DIEGO PORTELA LOZANO

084802042018
DANIEL RICARDO FORERO CALLEJAS
084800702017
ARIS JERSON LOZANO TIMOTE
084801852018
KEVIN STING FERNANDEZ CORTEZ
084801312018

TECNOLOGÍA EN GESTIÓN DE BASES DE DATOS

UNIVERSIDAD DEL TOLIMA
IBAGUE - TOLIMA
2020
 1. INTRODUCCION

Empezaremos respondiendo la siguiente pregunta ¿Qué es XAML? Es un lenguaje de marcado

y Fue desarrollado por Microsoft a partir del 2004, desde ese entonces podemos decir que, con

este lenguaje marcado, podríamos hacer grandes desarrollos con muy poco código ya que este

guarda ciertas similitudes con otros lenguajes de marcado ya sea HTML o AXML.

En el siguiente informe vas a aprender y conocer un poco sobre el lenguaje de XAML”

eXtensible Application Markup Language” o “Lenguaje marcado extensible de aplicación”, como

ya empezamos a conocer y tener un poco de conocimiento sobre el lenguaje C#, para el siguiente

caso veremos cómo crear una aplicación de escritorio usando WPF, UWP y la vista xaml en el

IDE de visual studio .net, el cual es de fácil manejo integrado.

 2. OBJETIVOS

2.1 Objetivo general.

Crear un programa tipo escritorio elaborado en WPF (Windows Presentation Fundation) y en

UWP (Windows Universal) con vista basado en XAML (lenguaje marcado extensible de

aplicación), usando el lenguaje de C#.

2.1.1 Objetivos específicos.

 Aprender a diseñar un programa de escritorio en WPF y UWP.

 Implementar la vista basada en XAML

 Adquirir nuevos conocimientos de código en C#.

 3. DESARROLLO TEMATICO

¿Qué es XAML?

XAML es un lenguaje de marcado desarrollado por Microsoft a partir de 2004. Guarda ciertas

similitudes con otros lenguajes de marcado, ya sea HTML o AXML Android, ya se fundamentan

en la misma base, es decir, desarrollar con marcas.

Con XAML, y utilizando WPF, se pueden hacer grandes desarrollos con muy poco código.

Ejemplo de desarrollo con XAML

Vamos a ver un ejemplo en el que haremos una pantalla de login de forma rápida: Con este

código nos aparece una pantalla de login dónde nos aparecen los bloques para introducir un

usuario y contraseña, además de un botón.

<Window x:Class=”WpfApp1.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:WpfApp1”
mc:Ignorable=”d”
Title=”MainWindow” Height=”450” Width=”800”>
<StackPanel VerticalAlignment=”Center”>
<Label Content=”Usuario”/>
<TextBlock/>
<Label Content=”Password”/>
<TextBlock/>
<Button Content=”Login” Height=”50”/>
<TextBlock/>
</StackPanel>
</Window>
 Es este ejemplo creamos otro contenedor, damos un poco de margen lateral a los elementos de

la pantalla de login y hacemos el botón más pequeño.

Además, hacemos que al introducir la contraseña aparezcan los caracteres de seguridad, y

finalmente utilizamos otro tipo de fuente diferente para las etiquetas de usuario y password.

Como podemos observar, con muy pocas líneas y en poco tiempo podemos hacer una pantalla

de login e ir mejorándola con pocos cambios.[CITATION Mic161 \l 2058 ]

Controles

Un control es un elemento de la interfaz de usuario que muestra contenido o permite la

interacción. Los controles son los componentes básicos de la interfaz de usuario. Un patrón es

una receta para combinar varios controles para hacer algo nuevo.

Las vistas son objetos de interfaz de usuario, como etiquetas, botones y los controles

deslizantes que se conocen normalmente como controles o widgets en otros entornos de

programación de gráficos. Las vistas compatibles con Xamarin.Forms todos se derivan los View

clase. A todas las vistas que se definen en Xamarin. Forms se puede hacer referencia desde

archivos XAML.[CITATION Ger19 \l 2058 ]

Namespaces

Un namespace o espacio de nombres es un medio para organizar clases dentro de un medio

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

[CITATION Mic18 \l 2058 ]

 Dentro de las declaraciones de espacio de nombres en la etiqueta raíz de muchos archivos

XAML, verá que normalmente hay dos declaraciones de espacio de nombres XML. La primera

declaración asigna el espacio de nombres global de cliente / framework WPF XAML como

predeterminado:

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

segunda

declaración mapea un espacio de nombres XAML separado, mapeándolo (típicamente) al

x:prefijo.

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

xaml"

Un espacio de nombres XAML es como un espacio de nombres en C o c# / VB.NET, sirve

para agrupar lógicamente clases y otros elementos.

En WPF / XAML, tiene un espacio de nombres xmlns = http: //… que es el espacio de

nombres para los controles que WPF le ofrece de forma predeterminada. xmlns: x es un espacio

de nombres para proporcionar algunos valores especiales como x: Null para representar un valor

nulo.

También puede definir sus propios controles y nombrarlos TextBox, pero debe crear un

espacio de nombres propio para que no interfieran con el espacio de nombres global.
 Las URL mencionadas en las definiciones de los espacios de nombres no tienen nada que ver

con la conexión real a Internet o las URL existentes reales, esto es solo, los espacios de nombres

se pueden distinguir correctamente.[CITATION Mic16 \l 2058 ]

Uso de los espacios de nombres

Un ejemplo sería una instancia XML que contuviera referencias a un cliente y a un producto

solicitado por éste. Tanto el elemento que representa el cliente como el que representa el

producto pueden tener un elemento hijo llamado "numero_ID". Las referencias al elemento

"numero_ID" podrían ser ambiguas, salvo que los elementos, con igual nombre, pero significado

distinto, se llevaran a espacios de nombres distintos que los diferenciaran.

Espacio de nombres por defecto

Cuando se define en la etiqueta de inicio de un elemento XML, se aplica a todos elementos sin

prefijo del ámbito del elemento, pero no a los atributos.

Eventos

La mayoría de los marcos (frameworks) de UI modernos al igual que wpf, están impulsados por

eventos. Todos los controles, incluida la ventana (Window) (que también hereda la clase control)

exponen un rango de eventos a los que puede suscribirse. Usted puede suscribirse a estos eventos,

lo que significa que su aplicación será notificada cuando ocurran y podrá entonces reaccionar a

ellos.

Hay muchos tipos de eventos, pero algunos de los más comúnmente utilizados están hechos para

responder a la interacción del usuario con su aplicación, con el ratón o el teclado. En la mayoría

de los controles se encuentran eventos como KeyDown, KeyUp, MouseDown, MouseEnter,

MouseLeave, MouseUp y varios otros.

<Window x:Class="WpfTutorialSamples.XAML.EventsSample"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="EventsSample" Height="300" Width="300">
<Grid Name="pnlMainGrid" MouseUp="pnlMainGrid_MouseUp" El
Background="LightBlue">

</Grid>

</Window>

private void pnlMainGrid_MouseUp(object sender, MouseButtonEventArgs

e)

MessageBox.Show("You clicked me at " +

e.GetPosition(this).ToString());

evento MouseUp utiliza un delegado llamado MouseButtonEventHandler, al que debe

suscribirse. Tiene dos parámetros, un emisor (el control que causó el evento) y un objeto
MouseButtonEventArgs que contendrá información útil. Lo utilizamos en este ejemplo para

obtener la posición del cursor y notificar al usuario.

Agregar controladores de eventos en el código

XAML no es la única forma de asignar un controlador de evento a un objeto. Para agregar

controladores de eventos a un objeto en particular del código, incluidos los objetos que no pueden

usarse en XAML, puedes usar la sintaxis específica del lenguaje para agregar controladores de

eventos.

En C#, la sintaxis es usar el operador +=. El controlador se registra haciendo referencia al nombre

del método del controlador del evento que se encuentra a la derecha del operador.

Si se usa un código para agregar controladores de eventos a los objetos que aparecen en la

interfaz de usuario en tiempo de ejecución, se recomienda agregar esos controladores en

respuesta a una devolución de llamada o evento de duración del objeto, como Loaded o

OnApplyTemplate, de manera que los controladores de eventos del objeto correspondiente estén

listos para los eventos que inicie el usuario en tiempo de ejecución. En este ejemplo se muestra

un esquema XAML de la estructura de página y se proporciona la sintaxis del lenguaje C# para

agregar un controlador.
 Data Binding

Es un mecanismo mediante el cual podemos enlazar los elementos de la interfaz de usuario

con los objetos que contienen la información a mostrar. El caso más típico de data binding es el

enlazar un control de la interfaz de usuario con un valor o registro de una base de datos.

Las posibilidades que nos brinda el data binding en WPF para conseguir interfaces dinámicas

y mucho más ricas en contenido.[CITATION Ger19 \l 2058 ]

Diccionario de recursos

Los recursos Windows Presentation Foundation (WPF) admiten una característica de

diccionario de recursos combinados. Esta característica proporciona una manera de definir la

parte de recursos de una aplicación WPF fuera de la aplicación XAML compilada. Los recursos
se pueden compartir entre aplicaciones y también se aíslan de forma más conveniente para la

localización.

Introducir un diccionario de recursos combinados

En la marcación, se usa la sintaxis siguiente para introducir un diccionario de recursos

combinados en una página.

El elemento ResourceDictionary no tiene un x: Key (directiva), que generalmente es necesario

para todos los elementos de una colección de recursos. Pero otra referencia ResourceDictionary

dentro de la colección MergedDictionaries es un caso especial, reservado para este escenario de

diccionario de recursos combinado. El ResourceDictionary que presenta un diccionario

combinado de recursos no puede tener un x: Key (directiva). Normalmente, cada uno de ellos

ResourceDictionary dentro de la colección MergedDictionaries especifica un atributo Source. El

valor de Source debe ser un identificador de recursos uniforme (URI) que se resuelve en la

ubicación del archivo de recursos que se va a combinar. El destino de ese Identificador URI debe

ser otro archivo XAML, con ResourceDictionary como elemento raíz.

Es válido definir recursos dentro de un ResourceDictionary que se especifica como un

diccionario combinado, ya sea como alternativa a especificar Source, o además de recursos que
se incluyen en el origen especificado. Sin embargo, esto no es un escenario común: el escenario

principal para los diccionarios combinados es combinar recursos desde ubicaciones de archivo

externas. Si se desea especificar recursos en el marcado de una página, normalmente se deberían

definir estas opciones en el método main ResourceDictionary y no en los diccionarios

combinados.
 Esto especifica dos elementos de objeto: <StackPanel> (con contenido y una etiqueta de cierre

después) y <Button .../> (el formulario de auto cierre, con varios atributos). Los StackPanel

elementos Button de objeto y cada asignación al nombre de una clase definida por WPF y forma

parte de los ensamblados WPFWPF. Cuando se especifica una etiqueta de elemento de objeto, se

crea una instrucción para el procesamiento XAML para crear una nueva instancia del tipo

subyacente. Cada instancia se crea llamando al constructor sin parámetros del tipo subyacente al

analizar y cargar el XAML.

Sintaxis de atributos (propiedades)

Sintaxis de atributo es la sintaxis de marcado XAML que establece un valor para una

propiedad mediante la declaración de un atributo en un elemento de objeto existente. El nombre

del atributo debe coincidir con el nombre de miembro CLR de la propiedad de la clase que
respalda el elemento de objeto relevante. El nombre del atributo va seguido de un operador de

asignación (-). El valor del atributo debe ser una cadena entre comillas.

Para establecerse a través de la sintaxis de atributo, una propiedad debe ser pública y debe ser

grabable. El valor de la propiedad en el sistema de tipos de respaldo debe ser un tipo de valor o

debe ser un tipo de referencia al que se pueda crear una instancia o al que haga referencia un

procesador XAML al tener acceso al tipo de respaldo relevante.

Para los eventos XAML de WPF, el evento al que se hace referencia como el nombre del

atributo debe ser público y tener un delegado público.

La propiedad o evento debe ser un miembro de la clase o estructura que crea una instancia del

elemento de objeto contenedor.[CITATION mic16 \l 2058 ]

 4. BIBLIOGRAFÍA

Lapuente, M. J. (29/07/2018 ). EspaciosdeNombres(namespaces).

http://www.hipertexto.info/documentos/namespaces.htm. Obtenido de

https://docs.microsoft.com/es-es/dotnet/csharp/programming-guide/classes-and-

structs/classes

microsoft. (2017). Detalles de la sintaxis XAML. https://docs.microsoft.com/es-

es/dotnet/framework/wpf/advanced/xaml-syntax-in-detail.

microsoft. (2017). Espacios de nombres XAML y asignación de espacios de nombres para WPF

XAML. https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/xaml-

namespaces-and-namespace-mapping-for-wpf-xaml. Obtenido de

https://docs.microsoft.com/es-es/dotnet/csharp/basic-types

microsoft. (2020). Controles para aplicaciones de Windows. https://docs.microsoft.com/en-

us/windows/uwp/design/controls-and-patterns/?redirectedfrom=MSDN.

Ortega, J. M. (06/02/2019). Qué es XAML en .NET. https://openwebinars.net/blog/que-es-xaml-

en-net/. Obtenido de https://docs.microsoft.com/es-es/dotnet/csharp/tour-of-

csharp/classes-and-objects
 5. RECOMENDACIONES

Antes de elaborar una aplicación de escritorio debemos de saber cuáles son los requerimientos

que el cliente necesita para así mismo empezar a desarrollar la aplicación, pero en nuestro caso

este proyecto fue elaborado para la compra de artículos y accesorios de una tienda llamada “mi

Tío” ya que fueron las especificaciones que nuestro cliente solicitó. De esta manera fue necesario

utilizar el programa visual.Net, que mediante los formatos de wpf fueron necesarios para la

creación de nuestra aplicación de escritorio.

En este presente informe fue objeto de estudio, el cual fue necesario tener un poco de

conocimiento sobre las clases y métodos de código en C#, pero no es lo único que se debe tener

en cuenta ya que en este proyecto se debió de adquirir el conocimiento y la relación que tiene la

extensión De la vista XAML.

 Una Recomendación para trabajar XAML es que las clases parciales deben derivar del tipo

que respalda el elemento raíz.

 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.
 No utilice los espacios de nombres innecesarios "xmlns" en el archivo XAML, Esto
sobrecarga el tiempo de carga de la página de Silverlight.
 6. CONCLUSION.

En conclusión, podemos decir que el lenguaje marcado extensible XAML es muy útil porque

con él nos ahorramos mucho código a la hora de hacer cualquier programa de escritorio, es muy

fácil manejo por que cuenta con su propia vista de diseño y es compatible con el lenguaje de C#;

al igual que con otros lenguajes de marcado como HTML o AXML.

Además  XAML se usa también principalmente para definir el contenido visual y funciona con

código C# (C Sharp) permitiéndonos crear objetos, inicializarlos y organizarlos en jerarquías de

padres e hijos, también administra y ejecuta un extenso conjunto de soluciones específicamente

con la plataforma.NET y se se caracteriza también por tratar de desencajar lo máximo posible la

interfaz de usuario de la lógica de la aplicación, XAML define conceptos propios pero estos

conceptos funcionan dentro del concepto XML y del formato de marcado, sin embargo, este

programa de modelado es un sistema que puede ejecutarse en más de una plataforma y que esta

orientado a varios sistemas operativos.