Windows Presentation Foundation Nuevas tecnologas del Net Framework

Windows Presentation Foundation Nuevas tecnologías del. Net Framework 3. 5 Alberto M. Fernández Álvarez alb@uniovi. es

Introducción ¿Por qué WPF? Evolución histórica tecnologías IU gráficas 1985, Windows 1. 0 GDI + USER (2 D) 1990, Silicon Graphics Open. GL 2 D, 3 D 1996, Direct. X 2 D, Direct. X 3 D Direct. X 9, versión con soporte. NET GDI+, User 32, Windows XP 2002, . NET Win. Forms sobre GDI+ y User 32 Entre tanto muchas mejoras en hardware gráfico 11/26/2020 alb@uniovi. es 2

Arquitectura simplificada 11/26/2020 alb@uniovi. es 3

11/26/2020 alb@uniovi. es 4

Características de WPF alb@uniovi. es

DEMO 11/26/2020 alb@uniovi. es 6

Características de WPF Integración 2 D, 3 D, speech Independencia de la resolución 3 D nativo sobre Direct. X Usa la aceleración hardware disponible Multimedia Especificación declarativa del IU XAML, variante XML Separación de comportamiento y presentación Styles, Themes, Skins, Templates Modelo de composición muy flexible 11/26/2020 alb@uniovi. es 7

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) 11/26/2020 alb@uniovi. es 8

Device Independent Units Device Indendent Unit = 1/96 inch A densidad normal: Windows con fuentes pequeñas 96 DPI A mayor densidad: Monitor 20” 1600 x 1200 1/96 inch * 100 dpi = 1, 042 pixel 20 11/26/2020 alb@uniovi. es 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 11/26/2020 alb@uniovi. es 10

Designer-Developer Productivity • Microsoft Tools for Designers & Developers With XAML designers & • developers can streamline Declarative Programming through XAML their collaboration Designers design • 11/26/2020 add business logic Third Party Tools (e. g. Aurora. Developers by Mobiform, ZAM 3 D by Electric Rain) alb@uniovi. es 11

XAML tools para diseñadores 11/26/2020 alb@uniovi. es 12

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 * El mismo botón con elementos anidados 11/26/2020 alb@uniovi. es 13

Ver código de proyectos de ejemplo Ver XAML, C# Crear nuevo proyecto 11/26/2020 alb@uniovi. es 14

Conceptos principales en WPF XAML Jerarquía de clases Árbol lógico y árbol visual Dependency Properties Avanzadas Styles Eventos Control templates Layouts Animación y Multimedia Controles Gráficos 3 D Text flow y gráficos Data. Binding 11/26/2020 Printing y XPS alb@uniovi. es 15

XAML = e. Xtensible Application Markup Language XAML Easily toolable, declarative markup Code and content are separate Can be rendered in the browser / standalone application C# <Button Width="100"> OK <Button. Background> Light. Blue </Button. Background> </Button> 11/26/2020 VB. NET Button b 1 = new Button(); b 1. Content = "OK"; b 1. Background = new Solid. Color. Brush(Colors. Light. Blue); b 1. Width = 100; alb@uniovi. es Dim b 1 As New Button b 1. Content = "OK" b 1. Background = New _ Solid. Color. Brush(Colors. Light. Blue) b 1. Width = 100 16

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 Windows. Forms Crea la estructura de objetos y asigna valores a sus propiedades pero se complementa con código Code behind Manejadores de eventos 11/26/2020 alb@uniovi. es 17

XAML Al compilar el XAML se genera la otra partial class XAML y code behind 11/26/2020 alb@uniovi. es 18

XAML y equivalente C# 11/26/2020 alb@uniovi. es 19

XAML Namespaces Namespace de WPF Namespace del poryecto Namespace de propio de XAML 11/26/2020 alb@uniovi. es 20

XAML 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> Útil cuando la asignación no se puede representar como un String 11/26/2020 alb@uniovi. es 21

XAML Attached properties 11/26/2020 Propiedades que se establecen para un elemento (Grid) desde otro contenido (Button) que no las posee alb@uniovi. es 22

XAML Markup extensions Permiten la asignación de valores en tiempo de ejecución Entre llaves, expresión que se evalúa Built-in Markup Extensions 11/26/2020 alb@uniovi. es 23

Ejercicio: Hacer un programa que reproduzca la ventana de la imagen y el comportamiento del botón Ver XAML y code-behind C# 11/26/2020 Editar XAML con el visor y editor de texto Usar el visor de propiedades alb@uniovi. es 24

Jerarquía de clases [. ][ ][. ][. ][. ] 11/26/2020 alb@uniovi. es 25

Jerarquía de clases: Principales Dependency. Object: Visual: Base de todos los elementos que ofrecen interacción Content. Control: Representa a todos los elementos que pueden ser pintados en la ventana Control: Base de todos los elementos 2 D Framework. Element: Soporte para Dependency Porperties Base de los controles que permiten anidamiento. Sólo UN anidado. Items. Control: Base de controles que permiten anidar varios elementos 11/26/2020 alb@uniovi. es 26

Jerarquía de clases Framework. Element hierarchy 11/26/2020 alb@uniovi. es 27

Jerarquía de clases Control hierarchy 11/26/2020 alb@uniovi. es 28

[. ][ ][. ][. ][. ] Árbol lógico y árbol visual 11/26/2020 alb@uniovi. es 29

Árbol lógico y árbol visual Árbol lógico 11/26/2020 alb@uniovi. es 30

Árbol lógico y árbol visual Árbol visual 11/26/2020 alb@uniovi. es 31

Árbol lógico y árbol visual Á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 Framework. Element 11/26/2020 alb@uniovi. es 32

Árbol lógico y árbol visual Á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 11/26/2020 Propagación de eventos Ubicación de Recursos Dependency properties alb@uniovi. es 33

[. ][. ][. ] 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 Dependency. Object da soporte a toda la jerarquía Algoritmo de resolución de Get. Value() 11/26/2020 alb@uniovi. es 34

Dependency Porperties Búsqueda ascendente en el árbol lógico 11/26/2020 alb@uniovi. es 35

Ejercicio: Copiar Dathan. Dep. O. dll en: Visual Studio 2008: C: Program FilesMicrosoft Visual Studio 9. 0Common 7PackagesDebuggerVisualizers Poner un break point en el programa del ejercicio anterior, ejecutar y detener en debug Estudiar el árbol lógico, el visual, propiedades dependientes y las asociadas 11/26/2020 alb@uniovi. es 36

[. ][. ][. ] Routed events Estándar. NET Los eventos se tratan en los manejadores registrados con el objeto que lanza el evento En WPF Los eventos pueden ser tratados por manejadores asociados a elementos de la rama del árbol lógico 11/26/2020 En todos, varios o ninguno. O sea, un evento puede ser tratado por los manejadores asociados a la rama alb@uniovi. es 37

Routed Events Routed events: Ejemplo Botón compuesto: Si se hace click en el Text. Block se debe tomar como click en el ratón Pero puede haber manejadores asociados en Stack. Panel, y/o en Button, y/o en Window 11/26/2020 alb@uniovi. es 38

Routed Events: enrutamiento Tunneling Bubbling El evento se lanza en la raíz del árbol lógico y se propaga hasta el control que lo provoca Se lanza en el control que lo provoca hacía la raíz Direct Se trata en el elemento que lo lanza 11/26/2020 alb@uniovi. es 39

Routed Events Routed events: Tipos Convenio de nombres: Tunneling: Los manejadores se llaman Preview… Bubbling: Nombres sin prefijo Preview. Mouse. Down, Preview. Mouse. Up Mouse. Down, Mouse. Up Se lanzan primero en Tunneling y después en Bubbling 1º de raíz a elemento 2º de elemento a raíz Cualquier manejador de la cadena puede detener la propagación del evento 11/26/2020 alb@uniovi. es 40

Routed Events Routed events: Ejemplo anterior: Click en centro del circulo amarillo Traza de eventos 11/26/2020 alb@uniovi. es 41

Ejercicio: Abrir el proyecto Smile. Button Examinar los manejadores de eventos Ejecutar en modo debug Provocar clicks sobre varios elementos y estudiar la traza en la ventana “Resultados” 11/26/2020 alb@uniovi. es 42

[. ][. ][. ][ ][. ] Layouts 11/26/2020 alb@uniovi. es 43

Layouts Stack. Panel 11/26/2020 alb@uniovi. es 44

Layouts Wrap. Panel 11/26/2020 alb@uniovi. es 45

Layouts Dock. Panel 11/26/2020 alb@uniovi. es 46

Layouts Grid 11/26/2020 alb@uniovi. es 47

Layouts Canvas Override the Z-Order 11/26/2020 alb@uniovi. es 48

Layouts Vertical and Horizontal Alignment 11/26/2020 alb@uniovi. es 49

[. ][. ][. ][ ][. ] Controles 11/26/2020 alb@uniovi. es 50

Controles: Menús 11/26/2020 alb@uniovi. es 51

Controles: Text. Box, Label 11/26/2020 alb@uniovi. es 52

Controles: List. View 11/26/2020 alb@uniovi. es 53

Controles: Tree. View 11/26/2020 alb@uniovi. es 54

Ejercicio: Hacer una calculadora que trabaje en notación polaca inversa Reproducir la disposición de controles de la imagen 11/26/2020 alb@uniovi. es 55

[. ][. ][. ][ ] Data. Binding Ejemplo: Datos mostrados en un formulario obtenidos de un objeto Si se modifican en formulario, el objeto debe ser actualizado Si se modifican en objeto, el formulario debe ser actualizado 11/26/2020 alb@uniovi. es 56

Data. Binding Solución manual basada en eventos. NET 11/26/2020 alb@uniovi. es 57

Data. Binding: WPF Los cambios se pasan de forma automática Condición: El objeto debe implementar INotify. Property. Changed Si es una colección esta debe implementar INotify. Collection. Changed 11/26/2020 alb@uniovi. es 58

Data. Binding: Markup extension El binding se declara en XAML Entre llaves Establece la propiedad Text de Text. Box al valor obtenido de la propiedad Age de un objeto persona ¿Pero de cual objeto? La instrucción Binding permite parámetros 11/26/2020 alb@uniovi. es 59

Data. Binding Parámetros para Binding Source: Referencia al objeto fuente Element. Name: Como anterior para XML Data Converter: Navegación por el grafo de objetos con raíz en Source (o Data. Context) XPath: Two. Way, One. Time, One. Way. To. Source, or Default Path: Cuando el objeto fuente es otro elemento WPF Mode: Dirección de la sincronización Por defecto es el Data. Context Conversor de tipos si no son compatibles … otros 12. Ver documentación… 11/26/2020 alb@uniovi. es 60

Data. Binding Implicit Data Source Si no se especifica Source, el objeto se toma de la propiedad Data. Context del elemento que hace el binding Y si no lo tiene, se busca recursivamente por la rama del árbol hasta llegar a la raíz Data. Context es de tipo Object cualquier objeto sencillo o colección 11/26/2020 alb@uniovi. es 61

Data. Binding: ejemplos 11/26/2020 alb@uniovi. es 62

Data. Binding Sintaxis para Binding Path Hay más formas, consultar la documentación 11/26/2020 alb@uniovi. es 63

Data. Binding con colecciones Colecciones de objetos o Data. Sources (XML, BDD, Object. Data. Source) Colección en Data. Context Mostrada con un Items. Control, permite seleccionar un elemento A la colección se le pueden añadir más elementos (o quitar). Debe implementar INotify. Collection. Changed para sincronizar esos cambios 11/26/2020 alb@uniovi. es 64

Data. Binding con colección: Ejemplo La colección se queda en el Data. Context del Grid 11/26/2020 alb@uniovi. es 65

Data. Binding Recuperar el Item Actual Se necesita un wrapper especial sobre la colección real 11/26/2020 alb@uniovi. es 66

Data. Binding Mostrar colección Invoca a To. String() por defecto 11/26/2020 alb@uniovi. es 67

Data. Binding Mostar colección personalizada 11/26/2020 alb@uniovi. es 68

Data. Binding Mostar colección con plantilla >) 11/26/2020 alb@uniovi. es 69

Ejercicio Revisar proyecto Binding. Basico v. 0. 4 Revisar proyecto Caribe. Resort. Playa. Belice 11/26/2020 alb@uniovi. es 70

Bibliografía 11/26/2020 alb@uniovi. es 71

Referencias Windows Presentation Foundation http: //msdn. microsoft. com/eses/library/ms 754130. aspx http: //www. wpftutorial. net/ Y sobre todo 11/26/2020 alb@uniovi. es 72