Windows Presentation Foundation
Download
Report
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