UD2.

1 WPF

Ciclo: Desarrollo de Aplicaciones Multiplataforma

Módulo: Desarrollo de interfaces. Curso 2022-23
1
 LENGUAJES DE PROGRAMACIÓN. TIPOS.
PARADIGMAS DE PROGRAMACIÓN
●
¿Por qué WPF?
●
Evolución histórica tecnologías IU gráficas

1985, Windows 1.0  GDI + USER (2D)

1990, Silicon Graphics  OpenGL 2D, 3D

1996, DirectX 2D, DirectX3D

DirectX 9, versión con soporte .NET

GDI+, User32, Windows XP

2002, .NET  WinForms sobre GDI+ y User32

…...
●
Entre tanto muchas mejoras en hardware gráfico

2
3
 Características de WPF
●
Integración 2D, 3D, speech
●
Independencia de la resolución
●
3D nativo sobre DirectX

Usa la aceleración hardware disponible

Multimedia
●
Especificación declarativa del IU

WPF permite crear interfaces de usuario utilizando un lenguaje de marcado llamado XAML, variante XML

Visual Studio, así como los miembros de la familia de entornos de desarrollo de Microsoft como Blend, están
preparados para generar código XAML de forma nativa.

Separación de comportamiento y presentación
●
Styles, Themes, Skins, Templates
●
Modelo de composición muy flexible

4
 Independencia de la resolución
●
WPF usa gráficos vectoriales.
●
Se ajusta mejor a las distintas resoluciones de
los dispositivos.
●
Tamaños en Device Independent Units (no
pixels)

5
 Device Independent Units
●
Device Indendent Unit = 1/96 inch

A densidad normal:
◦
Windows con fuentes pequeñas  96 DPI
◦


A mayor densidad: Monitor 20” 1600x1200
◦
1/96 inch * 100 dpi = 1,042 pixel

20

6
 Plantillas
●
En WPF podemos crear elementos reutilizables
para la interfaz gráfica.
●
Plantillas:
– plantillas de control.
– plantillas de datos.

7
 Data Binding
●
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.

8
 Estilos
●
Los estilos en WPF son muy parecidos a las
hojas de estilos en cascada, CSS, para HTML.
(más potentes que el CSS).
●
Se puede manejar cualquier característica
gráfica que te imagines, márgenes, espacios,
colores, dimensiones y muchos más.

9
 Especificación declarativa
●
Separación de roles diseñador y programador
– Los diseñadores manejan herramientas específicas
●
Resultados exportables a XAML y herramientas de
conversión
●
Estilos separados del comportamiento del componente
– Los programadores añaden el comportamiento
funcional a la aplicación

10
 Modelo de composición
●
Prácticamente todos los controles pueden albergar otros
elementos.

●
En muchos casos es posible componer nuevos controles
sin necesidad de programar
11
 Conceptos principales en WPF
●
XAML
●
Jerarquía de clases
●
Árbol lógico y árbol visual Avanzadas
●
Dependency Properties  Styles
●
Eventos  Control templates
●
Layouts  Animación y Multimedia
●
Controles  Gráficos 3D
●
DataBinding  Text flow y gráficos
 Printing y XPS
12
 XAML = eXtensible Application
Markup Language
●
Marcado declarativo y fácilmente utilizable
●
El código y el contenido están separados
●
Se puede renderizar en el navegador / aplicación
independiente

XAML C#
<Button Width="100"> OK Button b1 = new Button();
<Button.Background> b1.Content = "OK";
LightBlue b1.Background = new
</Button.Background> SolidColorBrush(Colors.LightBlue);
</Button> b1.Width = 100;

13
 XAML introducción
●
Al interpretarlo se crean árboles de objetos .NET
– Es una forma de serializar objetos en XML
– Cada XML-Element es una clase .NET
– Cada XML-Property es una propiedad .NET
●
Se puede programar WPF sin XAML, todo en C#; como en
WindowsForms
●
Crea la estructura de objetos y asigna valores a sus
propiedades pero se complementa con código
– Code behind  Manejadores de eventos

14
XAML y code
behind
15
XAML y equivalente C#

16
 XAML Namespaces
Namespace de WPF

Namespace de propio de XAML

Namespace del proyecto

17
 Sintaxis elementos propiedad
●
La asignación de valores a propiedades se
puede hacer con atributos XML

O con elementos anidados que sigan la sintaxis <Elemento.Propiedad>

18
Attached properties
 Propiedades que se
establecen para un
elemento (Grid) desde otro
contenido (Button) que no
las posee

19
 Markup extensions
●
Permiten la asignación de valores en tiempo de
ejecución
●
Entre llaves, expresión que se evalúa

20
●
Ejercicio:
– Hacer un programa que reproduzca la ventana de la imagen y el
comportamiento del botón
– Ver XAML y code-behind C#
●
Editar XAML con el visor y editor de texto
●
Usar el visor de propiedades

21
Árbol lógico y árbol visual

22
Árbol lógico

23
Árbol visual

24
 Árbol lógico y Árbol visual
●
El árbol lógico es el que ve el programador
– Contiene controles y objetos (strings, etc)
●
El árbol visual puede ser cambiado (sin afectar al
lógico) cambiando la plantilla del Control o el Tema.
– Lo puede definir el diseñador
– Contiene los elementos visuales
– Todos los derivados de FrameworkElement

25
 Árbol lógico y Árbol visual
●
¿Por qué es importante la distinción?
– El programador sólo debe hacer referencia a los elementos
del árbol lógico
●
Así, la apariencia puede ser cambiada libremente
– Varias características WPF ocurren en el árbol lógico
●
Propagación de eventos
●
Ubicación de Recursos
●
Dependency properties

26
 Dependency Properties
●
Propiedades de un objeto no almacenadas en el
objeto (en una tabla externa)
●
Ventajas:
– Compartición de valores por defecto
– Menor consumo de memoria
– Herencia de propiedades por contención
– Notificación de cambios

27
 Routed events (eventos enrutados)
●
WPF utiliza eventos enrutados para superar las limitaciones
que tienen los eventos normales (eventos del CLR).
●
Un evento enrutado es un evento del CLR que está respaldado
por una instancia de la clase RoutedEvent y registrado en el
sistema de eventos de WPF. Además, al propagarse entre el
elemento que lo desencadena y la raíz del árbol de elementos,
puede ser respondido por cualquier elemento que esté en esa
ruta, en rugar de por el elemento que lo desencadenó.

28
 ●
Botón compuesto:

Si se hace click en el TextBlock se debe tomar como click en el ratón

29
Se puede considerar los eventos enrutados desde una perspectiva funcional o de
implementación:
●
Desde una perspectiva funcional , un evento enrutado es un tipo de evento que puede
invocar controladores en varios agentes de escucha de un árbol de elementos, no solo
en el origen del evento. Un agente de escucha de eventos es el elemento donde se
adjunta e invoca un controlador de eventos. Un origen de eventos es el elemento o
objeto que generó originalmente un evento.
●
Desde una perspectiva de implementación , un evento enrutado es un evento registrado
con el sistema de eventos de WPF, respaldado por una instancia de la RoutedEvent
clase y procesado por el sistema de eventos de WPF. Normalmente, un evento enrutado
se implementa con un "contenedor" de evento CLR para habilitar la asociación de
controladores en XAML y en código subyacente como lo haría con un evento CLR.

30
 Tipos de enrutamiento
●
Propagación
– Va subiendo por el árbol desde el elemento que lo desencadena hasta la raíz.
●
Túnel
– Si se inicia en la raíz y viaja a un destino situado más abajo en el árbol,
teniendo su meta en el elemento que lo desencadenó, pudiendo ser
respondido por cualquier elemento en la ruta que tenga un controlador para
dicho evento.
●
Directo
– Sólo puede ser respondido por el elemento que lo desencadenó.

31
Ejemplo 2:
<Border Height="30" Width="200" BorderBrush="Gray" BorderThickness="1">

<StackPanel Background="LightBlue" Orientation="Horizontal" Button.Click="YesNoCancelButton_Click">

<Button Name="YesButton">Yes</Button>

<Button Name="NoButton">No</Button>

<Button Name="CancelButton">Cancel</Button>
private void YesNoCancelButton_Click(object sender, RoutedEventArgs e)
{
</StackPanel> FrameworkElement sourceFrameworkElement = e.Source as
FrameworkElement;
</Border> switch (sourceFrameworkElement.Name)
{
case "YesButton":
// YesButton logic.
break;
case "NoButton":
// NoButton logic.
break;
case "CancelButton":
// CancelButton logic.
break;
}
e.Handled = true;
}

32