PROGRAMACIÓN DE COMPONENTES DEE

ESCRITORIO
UNIDAD Nº I
Desarrollo de Aplicaciones con WPF

1 www.iplacex.cl
 SEMANA 2

Consideraciones previas

Alineación Curricular del Material de Estudio

El contenido que se expone a continuación está ligado a la siguiente unidad de

competencia:

- Programar una aplicación de escritorio, según requerimientos de la empresa.

Sobre las fuentes utilizadas en el material

El presente Material de Estudio constituye un ejercicio de recopilación de distintas fuentes,
cuyas referencias bibliográficas estarán debidamente señaladas al final del documento. Este
material, en ningún caso pretende asumir como propia la autoría de las ideas planteadas. La
información que se incorpora tiene como única finalidad el apoyo para el desarrollo de los
contenidos de la unidad correspondiente, respetando los derechos de autor ligados a las ideas e
información seleccionada para los fines específicos de cada asignatura.

2 www.iplacex.cl
 Introducción
El desarrollo de aplicaciones es un proceso largo. Se debe considerar cuales son las
necesidades que debe cubrir un usuario y cual o cuales son los caminos más aptos para
el desarrollo de esta solución, considerando una diversidad de factores, como el nivel de
conocimiento de los usuarios finales, sistemas en donde se ejecutará y configuraciones
de compatibilidad que se deban tomar en cuenta.

Uno de estos factores en la interfaz de usuario. Esta está sujeta a requerimientos no

funcionales del cliente u organización y considera todos los aspectos físicos que se deben
tener en cuenta en el desarrollo del frontend de una aplicación.

Existe una diversidad de herramientas que permiten desarrollar esta importante pero no
menos compleja parte del software. En el caso de las aplicaciones de escritorio en
Windows es posible escoger entre tres distintos frameworks: WinForms, WPF y UWP,
aunque, como recordarás, esta asignatura se centra específicamente en WPF (Windows
Presentation Foundation).

Durante esta semana, aprenderás que son los controles, cuáles son los más utilizados,
las propiedades más importantes presentes en estos elementos y quizás el evento más
utilizado en desarrollo, el evento Click, el que desencadena acciones al presionar un
botón.

3 www.iplacex.cl
 Ideas fuerza

Evento: es un suceso que ocurre cuando el usuario ejecuta una acción sobre algún control
de la interfaz, por ejemplo, presionar un botón.

Propiedad: corresponde a miembros que permiten la administración de datos y valores

siendo un mecanismo flexible para realizar esta acción.

GUI: es la representación gráfica de las acciones que puede realizar el usuario para
administrar los datos de una aplicación.

4 www.iplacex.cl
 Índice
1. UI en aplicaciones......................................................................................................... 6
1.1 WPF. Windows Presentation Foundation ............................................................ 7
1.2 XAML ................................................................................................................... 9
1.3 Estructura básica de proyecto WPF ................................................................... 11
1.4 Ventana: interfaz y clase ..................................................................................... 12
1.5 Controles en WPF ................................................................................................ 15
2. Arquitectura a utilizar: MVC ...................................................................................... 25

5 www.iplacex.cl
 Desarrollo
1. UI en aplicaciones

Todos somos usuarios y todos utilizamos distintos tipos de aplicaciones en nuestro diario
vivir. Estas, desde ya hace varios años nos han ido facilitando la realización de tareas
complejas, transformando estas actividades a veces tediosas en acciones simples e
intuitivas para los consumidores de aplicaciones.

Como desarrolladores de software nos cuesta ponernos en el lugar de un usuario que

posea un bajo nivel de conocimiento en el uso de ordenadores. Para ellos la más simple
de las interacciones con una aplicación puede resultar tediosa, escalando hasta niveles
cercanos a la frustración. En cambio, para nosotros, se nos hace una tarea un poco más
fácil, ya que contamos con conocimientos avanzados no solo en el uso de un ordenador,
sino también en la capacidad de poder entender interfaces de usuario que sean complejas.

Bajo estos parámetros, en donde a algunos se les dificulta y a otros se les facilita realizar
acciones en aplicaciones, las interfaces de usuario juegan un rol fundamental en estas sin
importar del tipo que sean o dispositivo en el cual están siendo ejecutadas.

El objetivo de la interfaz de usuario es hacer que la interacción de estos con la app o

programa sea lo más simple y eficiente posible, evitando que este tenga que realizar más
acciones de las necesarias para poder cumplir con una tarea de forma satisfactoria.

6 www.iplacex.cl
Existen técnicas para la construcción de estas que se basan en aspectos psicológicos
como UX, en donde el diseño se centra, a grandes rasgos, en que tan cómodo se pueda
llegar a sentir el usuario al utilizar una app.

1.1 WPF. Windows Presentation Foundation

Para desarrollo de interfaces de usuario en aplicaciones de escritorio en Windows

podemos encontrar dos tecnologías: Windows Forms y WPF. Durante el transcurso de
esta asignatura nos centraremos en desarrollo con WPF.

Windows Presentation Foundation o WPF es un framework de desarrollo de aplicaciones

de escritorio para Windows. Forma parte de las tecnologías .NET y utiliza XAML
(Extensible Application Markup Language) para proveer modelos declarativos para el
desarrollo de aplicaciones. Este lenguaje de marcado por etiquetas posee una sintaxis
similar a HTML (utilizado en desarrollo de sitios web) y los manifiestos XML (utilizado para
comunicación entre aplicaciones y archivos de configuración), en donde la estructura se
basa en la jerarquización de los elementos.

Estructura básica documento HTML

7 www.iplacex.cl
 Estructura básica de esquema XAML

Si comparamos ambas estructuras de archivos (HTML y XAML), podremos encontrar

ciertas similitudes. Por ejemplo, la etiqueta de <Window></Window> vendría a ser un símil
de la etiqueta <html></html> de HTML. Por otro lado, <Grid></Grid> sería un equivalente
a la etiqueta <body></body> en HTML.

Veamos en más profundidad que es XAML y como trabaja dentro de las aplicaciones WPF.

8 www.iplacex.cl
 1.2 XAML

Como vimos, XAML significa Extensible Application Markup Language y permite

desarrollar aplicaciones de escritorio en WPF. Con este lenguaje de marcado de etiquetas,
podremos definir distintos controles para la estructura gráfica del programa y para la
interacción del usuario con el software. A estos controles los denominaremos objetos, ya
que se comportan como cualquier otra clase de C#, con propiedades, métodos y eventos,
solo que todos estos ya vienen condicionados por defecto, aunque también es posible
crear nuevos según sea necesario.

Como se estableció arriba, estos objetos contienen propiedades. Estas propiedades

permitirán principalmente obtener la información que el usuario ingresa dentro de estos y
además modificar aspectos visuales de los elementos en base a requerimientos no
funcionales de los clientes (colores institucionales, tamaños, tipos de fuentes, etc) y según
condiciones que se deban cumplir.

También, es posible especificar comportamientos para estos controles. Estas acciones las
conoceremos como eventos y permitirán agregar distintas funcionalidades a estos
controles, como por ejemplo drag-and-drop, que hacer cuando se hace click en el botón,
entre otros.

ANTES DE CONTINUAR CON LA LECTURA…REFLEXIONEMOS

Los controles WPF son clases. Poseen propiedades, métodos y eventos, capaces de
añadir customización y funcionalidad a los mismos.

9 www.iplacex.cl
Más adelante en este material, encontrarás los controles, propiedades y eventos más
importantes.

10 www.iplacex.cl
1.3 Estructura básica de proyecto WPF

Todo proyecto de desarrollo de software responde a una estructura jerárquica de carpetas

y archivos, en donde cada uno cumple una función distinta. En los proyectos WCF la
historia es la misma. Aunque primero, veamos la estructura general de un proyecto
desarrollado con Visual Studio.

- Solución: es una carpeta que

contendrá el o los proyectos a incluir en
el desarrollo de una aplicación,
manteniendo el orden jerárquico. En la
imagen de la izquierda, corresponderá a
“Solution ‘HolaMundo’ (1 of 1 project)”

- Proyecto: corresponde a cada uno

de los tipos de proyectos que se
utilizarán en el desarrollo de una app. En
este caso, solo existe un proyecto,
llamado HolaMundo y que corresponde
al proyecto de tipo WPF en la solución.

Este proyecto WPF (el cual será el que estarás viendo en la asignatura), posee la siguiente
estructura:

- Dependencies: corresponde a las

dependencias que se utilizarán en el
proyecto. Por ejemplo, si deseas
implementar librerías NuGet como
Entity Framework, desde aquí deben
ser incluidas.

- App.xaml: es el archivo principal de

11 un proyecto www.iplacex.cl
WPF. Contiene
información del proyecto, como
recursos adicionales y la pantalla de
inicio que se mostrará al ser ejecutada
- AssemblyInfo.cs: contiene la informacion de ensamblaje de la aplicación. Este archivo
no debe ser modificado, a menos que sea estrictamente necesario y que además sepas
los cambios que se realizarán y de qué forma.

- MainWindow.xaml: permite editar la interfaz de usuario de la aplicación agregando

controles como botones, grillas de datos, imágenes, entre otros. Además, es posible
modificar aspectos de diseño de estos controles, como la posición en pantalla, tamaños y
colores y los nombres de los controles, esenciales para poder interactuar con ellos desde
el código. Utiliza XAML para generar la interfaz de usuario de la pantalla de la app.

- MainWindow.xaml.cs: forma parte del archivo MainWindow.xaml, es una clase y permite

agregar la funcionalidad en forma de código para el o los controles presentes dentro de la
interfaz de usuario.

1.4 Ventana: interfaz y clase

Como sabemos, una ventana es la representación física de un programa. En ella es
posible interactuar con las acciones y opciones que los desarrolladores han establecido
para que el usuario pueda realizar sus tareas.

WPF también trabaja por medio de ventanas y un proyecto de este tipo puede tener una
o múltiples ventanas, y sin importar cual sea el objetivo de cada una, todas comparten

12 www.iplacex.cl
algo en común: poseen dos archivos, uno orientado a contener la interfaz de usuario o
frontend en donde los desarrolladores posicionaremos los controles de interacción
disponibles para el usuario (botones, campos de texto, etiquetas, menús, etc), y otro
archivo que contendrá la clase asociada a esta ventana y que actuará como backend para
entregar funcionalidad a estos controles.

Antes de poder crear una ventana, es necesario comprender como se estructuran a nivel
de código tanto la interfaz como la clase de la ventana. Para esto, tomaremos como
ejemplo la ventana principal que es creada por defecto en un proyecto de escritorio WPF:
MainWindow.

- MainWindow.xaml: contiene el código de la interfaz de usuario escrito en XAML. Su

estructura básica consta del objeto <Window></Window> y que engloba todo el contenido
que irá dentro de la interfaz de la ventana. Contiene las propiedades de configuración,
como la clase con la cual está enlazada, el título de la ventana y la versión de xaml a
implementar, la cual se establece por defecto al crear un proyecto.

También contiene un objeto <Grid></Grid>, en donde se agregarán los distintos controles

de la interfaz de usuario de la ventana.

MainWindow.xaml

13 www.iplacex.cl
Si hacemos el ejercicio de similitud a HTML, <Window></Window> vendría a ser la
etiqueta <html></html>, y <Grid></Grid> la etiqueta <body></body>.

- MainWindow.xaml.cs: contendrá todo el código de las funcionalidades escrito en C# para

los controles de la ventana. La estructura de esta clase parte con la importación de
librerías y dependencias por medio de las directivas using. Como cualquier en cualquier
otra clase en C#, se indica el namespace y el nombre de la clase. Por defecto, ya vendrá
codificado el constructor de la clase, el cual ejecutará el método InitializeComponent()
cada vez que sea instanciada la ventana, es decir, se ejecutado el programa en este caso.

MainWindow.xaml.cs

14 www.iplacex.cl
Al momento de agregar una ventana dentro del proyecto, automáticamente se crearán
tanto el archivo para la interfaz de usuario como para entregar funcionalidad a esta
interfaz. La forma de agregar una nueva ventana será vista en el material procedimental
de la semana, junto con otros procedimientos, como agregar controles, modificar algunas
de sus propiedades y crear menús con opciones.

1.5 Controles en WPF

El SDK (Software Development Kit) de WPF utiliza el termino control para referirse a toda
clase que pueda ser representada como una instancia de objeto visible dentro de la
interfaz de una aplicación. Estos controles pueden ser campos de texto, botones, canvas,
grilla de datos, calendarios, etc.

Estos elementos pueden ser creados a nivel de código utilizando la clase de la ventana
instanciando sus objetos, ser creados manualmente dentro del editor XAML o arrastrando
desde el toolbox hasta el editor de diseño.

Los controles más importantes que debes conocer son:

Control Etiqueta Descripción

Button <Button /> reacciona a la interacción del usuario y levanta un
evento Click, el cual servirá para dar funcionalidad
a este. Posee tres estados: pressed, unpressed y
focus
Calendar <Calendar /> permite al usuario seleccionar una fecha utilizando
un calendario. Puede ser utilizado de forma
independiente o como parte del control DatePicker

15 www.iplacex.cl
CheckBox <CheckBox /> representa opciones que el usuario puede
seleccionar. Es posible crear uno o muchos, elegir
más de uno y pueden ser agrupados
ComboBox <ComboBox /> despliega una lista de opciones a merced del
usuario. Por defecto se encuentra colapsada
DataGrid <DataGrid /> permite desplegar y editar información desde
distintas fuentes, como bases de datos o listas. Es
posible crear 4 tipos de columnas:
DataGridTextColumn (string),
DataGridCheckBoxColumn (boolean),
DataGridComboBoxColumn (enum) y
DataGridHyperlinkColumn (uri)
DatePicker <DatePicker /> permite seleccionar o ingresar de forma manual una
fecha
Image <Image /> despliega imágenes cargadas estática o
dinámicamente
Label <Label /> muestra texto plano en la interfaz, aunque también
es posible que pueda contener elementos de tipo
UIElement
ListBox <ListBox /> provee al usuario de una lista de opciones
desplegables
Menu <Menu /> permite organizar elementos asociados entre sí. Se
pueden asociar comandos (combinaciones de
teclas) y controladores de eventos. Posee
cabeceras de menú e ítems.
MenuItem <MenuItem /> corresponde a los ítems desplegados desde la
cabecera de un menú, cada uno realizando una
acción distinta. Aplica evento Click como los
botones.
RadioButton <RadioButton /> permite elegir solo una opción entre muchas. Se
pueden agrupar

16 www.iplacex.cl
 TextBlock <TextBlock /> permite introducir textos relativamente largos, por
ejemplo, la descripción de un producto
TextBox <TextBox /> permite introducir textos relativamente cortos, por
ejemplo, el nombre de una persona

Todos estos controles además poseen propiedades y eventos. Las propiedades siendo
las caracteristicas (nombre, tamaño, color, etc) y los eventos los comportamientos que
estos posean. Todos los eventos son especificados en la estructura xaml de los controles,
mientras que solo algunas propiedades son mostradas dentro de estas etiquetas.

Las propiedades que serán más utilizados en esta asignatura serán los siguientes:

- Name: es el nombre que tendrá el control, debe ser único y permitirá que pueda ser
invocado desde el código. Afecta a todos los controles. Para identificarlos dentro del
código, el nombre estará compuesto de una abreviatura del tipo de control, seguido de la
acción o a que corresponde el control.

- Content: es el texto que mostrará el control por pantalla al usuario. Afecta a controles
como Label y Button.

17 www.iplacex.cl
- GroupName: permite agrupar controles dentro de una misma categoría. Afecta a los
controles CheckBox y RadioButton.

- Text: permite principalmente obtener el valor que el usuario ingresa en campos de texto
como TextBox y TextBlock. Adicionalmente, permite cargar datos dinámicamente desde
el código de la ventana, para, por ejemplo, cargar datos de un usuario al cual se le
actualizarán los datos. Por lo general, esta propiedad no será especificada dentro del
código xaml del control.

18 www.iplacex.cl
- SelectedDate: permite seleccionar o asignar la fecha a un control de tipo Calendar y
DatePicker.

- IsEnabled: establece que un control no está disponible para su uso dentro de la interfaz.
Este tipo de configuración puede ser usado para activar controles bajo una cierta
condición. Esta propiedad está disponible para todos los controles.

- IsRequiredForForm: establece si el elemento es o no requerido para el envio de un

formulario. Cumple la misma función que required en HTML5. Está disponible para ser
implementado dentro de todos los controles de un formulario.

19 www.iplacex.cl
- Items e ItemSource: permiten especificar desde un tipo IEnumerable (matrices, clases
enum), que datos se listarán en el control. Items es aplicable a ListBox y ComboBox,
mientras que ItemSource está disponible para ListBox, ComboBox y DataGrid. Es
recomendable especificar listado desde el código y no desde la interfaz, para que pueda
ser cargado de forma dinámica.

20 www.iplacex.cl
- SelectedIndex, SelectedItem y SelectedValue: Permiten obtener el índice, el nombre con
que es desplegado (también el valor completo de una fila) y el valor asociado
respectivamente, de las opciones listadas en controles de tipo ComboBox y ListBox. Por
otro lado, es posible también aplicarlos dentro de controles DataGrid, aunque con un poco
más de trabajo, ya que la fila seleccionada deberá ser “casteada” a la clase o tipo de dato
que corresponda. Esto se debe a que la grilla de datos acepta estructuras de datos más
complejas.

21 www.iplacex.cl
Por el lado de los eventos de los controles, quizás el evento que más se implementa dentro
de una aplicación es el evento Click. Este permitirá ejecutar código de forma instantánea
al cliquear un botón. Veamos el siguiente ejemplo, en donde al presionar el botón se
deberá mostrar un mensaje de bienvenida.

En la interfaz se creará una nueva instancia del control Button, que tendrá el nombre
btnSaludo y ejecutará el evento Click mostrando un mensaje cuando sea presionado por
el usuario. El botón lucirá de la siguiente manera una vez ejecutado el programa:

Entonces, al presionarse el botón se mostrará el siguiente cuadro con el mensaje de

bienvenida:

22 www.iplacex.cl
Esa interacción del usuario (cliquear el botón) ejecutará el evento Click y todas las
instrucciones que fueron definidas dentro de este. Para este ejemplo, solo se procedió a
mostrar un MessageBox con el texto del saludo.

El evento Click también puede ser especificado para las opciones y elemento que posee
un menú de opciones.

23 www.iplacex.cl
 ANTES DE CONTINUAR CON LA LECTURA…REFLEXIONEMOS

La cantidad de controles disponible para la implementación dentro de la interfaz de

una app WPF son bastantes. Además, cada un posee sus propiedades, métodos y
comportamientos inherentes. En esta oportunidad solo podemos centrarnos en los
más importantes para el desarrollo de esta asignatura, pero si deseas conocer a fondo
estos tópicos, puedes visitar WPF - Control Library

24 www.iplacex.cl
 2. Arquitectura a utilizar: MVC

El desarrollo de software es un proceso complejo que requiere meticulosidad,

responsabilidad, experiencia y conocimientos prácticos, técnicos y conceptuales que
deben ser aplicados de forma continua durante el desarrollo y posterior al mismo al realizar
en las fases de actualización y mejora de una aplicación.

Contar con una arquitectura a nivel de sistema y a nivel de aplicación favorecen la

realización de esta sucesión de psis y eventos para entregar una aplicación funcional al
usuario final. Una arquitectura es un modelo o directriz que establece como será
construido un producto. En desarrollo de software también contamos con arquitecturas,
las cuales facilitan el diseño y creación de estos.

Existen muchas arquitecturas de software posibles a aplicar en un proyecto informático.

Podemos encontrar arquitecturas como la orientada a microservicios, arquitectura por
capas, MVC (Model-View-Controller), entre otros.

Por lo general, todas estas buscan separar en distintos niveles cada uno de los roles de
la aplicación: el modelo (conexión a base de datos, clases y entidades), el o los
controladores (clases de administración) y las vistas (interfaces), es decir, separar el
software en capas para facilitar su desarrollo y mantenibilidad.

En el desarrollo de esta asignatura a nivel de aplicación, se estará implementando una

arquitectura MVC ya que contaremos con una capa de Modelo (Model) compuesta por la
base de datos y EntityFramework, la capa de Vista (View) compuesta por la aplicación
WPF y una capa de control (Controller) funcionando como intermediario entre estas
gracias a una libraría de clases (Class Library). En esta primera unidad solo nos
centraremos en la creación de la vista con la que interactuará el usuario.

25 www.iplacex.cl
 ANTES DE CONTINUAR CON LA LECTURA…REFLEXIONEMOS

Aunque en esta asignatura implementaremos MVC en el desarrollo de este proyecto,

en las aplicaciones desarrolladas con XAML se puede implementar un patrón
arquitectónico llamado MVVM o Model-View-ViewModel.

Una de las caracteristicas más importantes de MVVM es que la capa de ViewModel

(similar a Controller en MVC) se enlaza e interactúa con la interfaz de usuario por
medio de Data Binding y Commands pero sin la necesidad de conocer realmente
como es el comportamiento del UI de la app. Si quieres conocer más de MVVM, visita
The Model-View-View-Model Pattern

26 www.iplacex.cl
 Conclusión

La aplicación que estas utilizando para leer este documento posee una interfaz de usuario.
Contiene textos, opciones y botones que son capaces de facilitar ciertas tareas en el
proceso de lectura, como el zoom, destacar texto e incluso dar la posibilidad de editar el
mismo. Estos y otros elementos componen la interfaz de usuario de aplicación.

Para realizar la construcción de estas vistas con las que el usuario interactuará en su
mayoría son construidas y diseñadas por medio de la implementación de frameworks de
frontend, como Angular, WPF o Xamarin. En este caso, el framework utilizado en esta
asignatura es WPF, el que permite desarrollar aplicaciones de escritorio para Windows.

Esta herramienta implementa XAML para dar vida a la interfaz de usuario y C# para dar
comportamientos a cada uno de estos elementos que podremos disponer en la interfaz de
usuario como botones, grillas de datos y listas desplegables, en donde cada uno de estos
controles tiene sus propios métodos, propiedades y eventos.

Ha estos proyectos también es posible aplicarles una cierta estructura general, llamada
arquitectura o patrón arquitectónico, el que define como será construido y permitirá
separar los distintos roles de la aplicación.

27 www.iplacex.cl
 Bibliografía

What is Windows Presentation Foundation (WPF)?

https://docs.microsoft.com/en-us/visualstudio/designers/getting-started-with-
wpf?view=vs-2022

XAML overview (WPF .NET)

https://docs.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0

Controls
https://docs.microsoft.com/en-
us/dotnet/desktop/wpf/controls/?view=netframeworkdesktop-4.8

MVC
https://developer.mozilla.org/es/docs/Glossary/MVC

MVVM
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-
patterns/mvvm

28 www.iplacex.cl
29 www.iplacex.cl