Transcript Windows Presentation Foundation

Windows Presentation
Foundation
Nuevas tecnologías del .Net Framework
3.5
Alberto M. Fernández Álvarez
Introducció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
jul-15
[email protected]
2
Arquitectura simplificada
jul-15
[email protected]
3
jul-15
[email protected]
4
Características de WPF

DEMO
jul-15
[email protected]
6
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


XAML, variante XML
Separación de comportamiento y presentación


jul-15
Styles, Themes, Skins, Templates
Modelo de composición muy flexible
[email protected]
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)
jul-15
[email protected]
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” 1600x1200

1/96 inch * 100 dpi = 1,042 pixel
20
jul-15
[email protected]
9
Especificación declarativa

Separación de roles diseñador y
programador

Los diseñadores manejan herramientas
específicas



jul-15
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
[email protected]
10
Designer-Developer Productivity
•
•
Designers design •
jul-15
Microsoft Tools for Designers &
Developers
With XAML designers &
developers
can streamline
Declarative Programming
through
XAML
their collaboration
add business logic
Third Party Tools (e.g. AuroraDevelopers
by
Mobiform, ZAM 3D by Electric Rain)
[email protected]
11
XAML tools para diseñadores
jul-15
[email protected]
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
jul-15
[email protected]
13

Ver código de proyectos de ejemplo


jul-15
Ver XAML, C#
Crear nuevo proyecto
[email protected]
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 3D
 Text flow y gráficos
DataBinding

jul-15
Printing y XPS
[email protected]
15
XAML = eXtensible 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>
LightBlue
</Button.Background>
</Button>
jul-15
VB.NET
Button b1 = new Button();
b1.Content = "OK";
b1.Background = new
SolidColorBrush(Colors.LightBlue);
b1.Width = 100;
[email protected]
Dim b1 As New Button
b1.Content = "OK"
b1.Background = New _
SolidColorBrush(Colors.LightBlue)
b1.Width = 100
16
XAML
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

jul-15
Code behind  Manejadores de eventos
[email protected]
17
XAML
Al compilar el XAML se
genera la otra partial class
XAML y code
behind
jul-15
[email protected]
18
XAML
XAML y equivalente C#
jul-15
[email protected]
19
XAML
XAML Namespaces
Namespace de WPF
Namespace del poryecto
Namespace de propio de XAML
jul-15
[email protected]
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>

jul-15
Útil cuando la asignación no se puede
representar como un String
[email protected]
21
XAML
Attached properties

jul-15
Propiedades que se
establecen para un
elemento (Grid) desde
otro contenido (Button)
que no las posee
[email protected]
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
jul-15
[email protected]
23

Ejercicio:


Hacer un programa que reproduzca la
ventana de la imagen y el comportamiento
del botón
Ver XAML y code-behind C#


jul-15
Editar XAML con el visor y editor de texto
Usar el visor de propiedades
[email protected]
24
Jerarquía de clases
[.][][.][.][.][.][.][.]
jul-15
[email protected]
25
Jerarquía de clases
Jerarquía de clases: Principales

DependencyObject:


Visual:


Base de todos los elementos que ofrecen interacción
ContentControl:


Representa a todos los elementos que pueden ser pintados
en la ventana
Control:


Base de todos los elementos 2D
FrameworkElement:


Soporte para Dependency Porperties
Base de los controles que permiten anidamiento. Sólo UN
anidado.
ItemsControl:

jul-15
Base de controles que permiten anidar varios elementos
[email protected]
26
Jerarquía de clases
FrameworkElement hierarchy
jul-15
[email protected]
27
Jerarquía de clases
Control hierarchy
jul-15
[email protected]
28
[.][.][][.][.][.][.][.]
Árbol lógico y árbol visual
jul-15
[email protected]
29
Árbol lógico y árbol visual
Árbol lógico
jul-15
[email protected]
30
Árbol lógico y árbol visual
Árbol visual
jul-15
[email protected]
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.



jul-15
Lo puede definir el diseñador
Contiene los elementos visuales
Todos los derivados de FrameworkElement
[email protected]
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


Varias características WPF ocurren en el
árbol lógico



jul-15
Así, la apariencia puede ser cambiada
libremente
Propagación de eventos
Ubicación de Recursos
Dependency properties
[email protected]
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
DependencyObject da soporte a toda la
jerarquía
Algoritmo de resolución de GetValue()
jul-15
[email protected]
34
Dependency Porperties
Dependency Porperties

Búsqueda ascendente en el árbol lógico
jul-15
[email protected]
35

Ejercicio:

Copiar DathanDepO.dll en:
Visual Studio 2008:
C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\Debugger\Visualizers


jul-15
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
[email protected]
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


jul-15
En todos, varios o ninguno.
O sea, un evento puede ser tratado por los
manejadores asociados a la rama
[email protected]
37
Routed Events
Routed events: Ejemplo


Botón compuesto:
Si se hace click en el TextBlock se debe tomar
como click en el ratón

jul-15
Pero puede haber manejadores asociados en
StackPanel, y/o en Button, y/o en Window
[email protected]
38
Routed Events
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

jul-15
Se trata en el elemento que lo lanza
[email protected]
39
Routed Events
Routed events: Tipos

Convenio de nombres:

Tunneling: Los manejadores se llaman Preview…


Bubbling: Nombres sin prefijo


PreviewMouseDown, PreviewMouseUp
MouseDown, MouseUp
Se lanzan primero en Tunneling y después en
Bubbling



jul-15
1º de raíz a elemento
2º de elemento a raíz
Cualquier manejador de la cadena puede detener
la propagación del evento
[email protected]
40
Routed Events
Routed events: Ejemplo

Ejemplo anterior:

Click en centro del circulo amarillo
Traza de eventos
jul-15
[email protected]
41

Ejercicio:




jul-15
Abrir el proyecto SmileButton
Examinar los manejadores de eventos
Ejecutar en modo debug
Provocar clicks sobre varios elementos y
estudiar la traza en la ventana
“Resultados”
[email protected]
42
[.][.][.][.][.][][.][.]
Layouts
jul-15
[email protected]
43
Layouts
StackPanel
jul-15
[email protected]
44
Layouts
WrapPanel
jul-15
[email protected]
45
Layouts
DockPanel
jul-15
[email protected]
46
Layouts
Grid
jul-15
[email protected]
47
Layouts
Canvas
Override the Z-Order
jul-15
[email protected]
48
Layouts
Vertical and Horizontal Alignment
jul-15
[email protected]
49
[.][.][.][.][.][.][][.]
Controles
jul-15
[email protected]
50
Controles
Controles: Menús
jul-15
[email protected]
51
Controles
Controles: TextBox, Label
jul-15
[email protected]
52
Controles
Controles: ListView
jul-15
[email protected]
53
Controles
Controles: TreeView
jul-15
[email protected]
54

Ejercicio:


jul-15
Hacer una calculadora que trabaje en
notación polaca inversa
Reproducir la disposición de controles de la
imagen
[email protected]
55
[.][.][.][.][.] [.][.][]
DataBinding

Ejemplo: Datos mostrados en un formulario
obtenidos de un objeto


jul-15
Si se modifican en formulario, el objeto debe ser
actualizado
Si se modifican en objeto, el formulario debe ser
actualizado
[email protected]
56
DataBinding
DataBinding

Solución manual basada en eventos
.NET
jul-15
[email protected]
57
DataBinding
DataBinding: WPF


Los cambios se pasan de forma automática
Condición:


El objeto debe implementar INotifyPropertyChanged
Si es una colección esta debe implementar
INotifyCollectionChanged
jul-15
[email protected]
58
DataBinding
Binding: Markup extension

El binding se declara en XAML


Entre llaves
Establece la propiedad Text de TextBox al
valor obtenido de la propiedad Age de un
objeto persona


¿Pero de cual objeto?
La instrucción Binding permite
parámetros
jul-15
[email protected]
59
DataBinding
Parámetros para Binding

Source: Referencia al objeto fuente


ElementName:


Como anterior para XML Data
Converter:


Navegación por el grafo de objetos con raíz en Source (o
DataContext)
XPath:


TwoWay, OneWay, OneTime, OneWayToSource, or Default
Path:


Cuando el objeto fuente es otro elemento WPF
Mode: Dirección de la sincronización


Por defecto es el DataContext
Conversor de tipos si no son compatibles
… otros 12. Ver documentación…
jul-15
[email protected]
60
DataBinding
Implicit Data Source

Si no se especifica Source, el objeto se toma
de la propiedad DataContext del elemento
que hace el binding


jul-15
Y si no lo tiene, se busca recursivamente por la
rama del árbol hasta llegar a la raíz
DataContext es de tipo Object  cualquier objeto
sencillo o colección
[email protected]
61
DataBinding
Binding: ejemplos
jul-15
[email protected]
62
DataBinding
Sintaxis para Binding Path

Hay más formas, consultar la
documentación
jul-15
[email protected]
63
DataBinding
Binding con colecciones




Colecciones de objetos o DataSources
(XML, BDD, ObjectDataSource)
Colección en DataContext
Mostrada con un ItemsControl, permite
seleccionar un elemento
A la colección se le pueden añadir más
elementos (o quitar). Debe implementar
INotifyCollectionChanged para
sincronizar esos cambios
jul-15
[email protected]
64
DataBinding
Binding con colección: Ejemplo
La colección se queda
en el DataContext del Grid
jul-15
[email protected]
65
DataBinding
Recuperar el Item Actual

Se necesita un wrapper especial sobre
la colección real
jul-15
[email protected]
66
DataBinding
Mostrar colección
Invoca a ToString()
por defecto
jul-15
[email protected]
67
DataBinding
Mostar colección personalizada
jul-15
[email protected]
68
DataBinding
Mostar colección con plantilla
>)
jul-15
[email protected]
69

Ejercicio


jul-15
Revisar proyecto BindingBasico v.0.4
Revisar proyecto CaribeResortPlayaBelice
[email protected]
70
Bibliografía
jul-15
[email protected]
71
Referencias

Windows Presentation Foundation



http://msdn.microsoft.com/eses/library/ms754130.aspx
http://www.wpftutorial.net/
Y sobre todo
jul-15
[email protected]
72