Transcript WPF paraprogramadores de Windows Forms

WPF para programadores
de Windows Forms
Luis Guerrero
Software Architect
Plain Concepts
http://www.luisguerrero.net/
¿Qué es WPF?
WPF es la siguiente tecnología para
desarrollar aplicaciones cliente en Windows.
Permite desarrollar mejores experiencias de
usuario (UX) y que el diseñador se integre
en el flujo de creación, compartiendo
herramientas.
Ejemplos
¿Qué me aporta WPF?
WPF no es una evolución de Windows
Forms (WF 2.0) sino que es una tecnología
completamente nueva.
Permite trabajar con los controles de una
manera mucho más flexible, sin
limitaciones.
Integra al diseñador, con Expression Blend,
permitiendo que abra un fichero .sln desde
Blend.
Dos tipos de aplicaciones
Standalone
Browser-Hosted
Soporte para navegación
Características
Markup and CodeBehind
Applications
Controls
Input and Commanding
Layout
Data Binding
Graphics
Animation
Media
Text and Typography
Documents
Definiendo la UI
Antes, en WF se definía la UI solamente
con el código del diseñador, no había
ninguna otra manera.
Este fichero estaba mantenido por Visual
Studio.
No es jerárquico
Código espagueti
Definiendo la UI - WPF
Se utiliza XAML (Xml Application Markup
Language).
Es jerárquico y permite tener colecciones de
elementos. Está bien definido y está tipado.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="Window with Button" Width="250" Height="100">
<Button Name="button">Click Me!</Button>
</Window>
Markup and Code-Behind
Es muy parecido a como ASP.NET funciona
<Window
using System.Windows; // Window, RoutedEventArgs, MessageBox
xmlns="http://schemas.microsoft.c namespace SDKSample
<Window
om/winfx/2006/xaml/presentation" {
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
public partial class AWindow : Window
xmlns:x="http://schemas.microsoft
{
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
.com/winfx/2006/xaml"
public AWindow()
x:Class="SDKSample.AWindow" Title="Window
with Button"
{
x:Class="SDKSample.AWindow"
InitializeComponent();
Width="250" Height="100">
Title="Window with Button"
}
Width="250" Height="100">
void button_Click(object
RoutedEventArgs e)
<Button Name="button“ Click="button_Click">
Clicksender,
Me!</Button>
{
<Button Name="button“
</Window>
Click="button_Click"> Click
Me!</Button>
</Window>
// Show message box when button is clicked
MessageBox.Show("Hello, Windows Presentation Foundation!");
}
}
}
demo
Generar UI con Blend
No tengáis miedo de abrir el Blend !!
Controles - WF
Dos conceptos:
Aspecto (Visual)
Funcionalidad (Behavior)
Estos dos conceptos están unidos en WF y
no hay manera de separar.
Para modificar el aspecto hay que tocar el
comportamiento.
override OnPain(…)
Difícilmente personalizables.
Controles – WPF
Se separan conceptos en WPF,
materializados en:
Árbol visual (VisualTree) aspecto
Árbol lógico (LogicalTree) comportamiento
Lo que permite que podamos modificar el
aspecto sin que afecte al comportamiento.
Podemos cambiar el aspecto de un control
sin tener que heredar, preservando su tipo!!
demo
Personalizar un control
El botón ninja
Layout - WF
El layout se basa en cuatro propiedades
Location
Size
Anchor
Dock
Es muy complicado aprovechar el espacio
de la pantalla para nuestros controles.
Layout - WPF
Está basado en un layout de web.
Hay muchas más propiedades para el
layout
HorizontalAlignment
VerticalAlignment
Margin
Width
Heigth
+ Attached Dependency Properties
Layout – WPF
Tenemos controles que nos ayudan con el
Layout (Panel)
Border, Canvas, DockPanel, Expander, Grid,
GridView, GroupBox, Panel, ScrollBar,
ScrollViewer, StackPanel, WrapPanel.
Esta basado en dos funciones
Measure(Size)
Arrange(Rect)
demo
Layout con Expression
Blend
DataBinding
El Databinding es una de las partes más
potentes de WPF.
No hay limitaciones en cuanto a lo que
puedes hacer un Databinding.
DataBinding - Direcciones
Dirección del Databind
OneWay: de origen a destino y cuando el origen
cambie
TwoWat: en ambos sentidos y con notificaciones
de cambio
OneWayToSource: es igual que OneWay pero al
reves, de destino a origen
OneTime: enlace a datos igual que OneWay pero
únicamente una vez.
DataBinding – Colecciones
Las colecciones también se aprovechan del enlace a
datos.
Binding con colecciones, podemos hacer un binding
de un origen de datos que implemente IEnumerable
Si nuestra colección es de tipo
ObservableCollection<T> esta clase implementa la
interfaz INotifyCollectionChanged que permite
notificar los cambios en la colección.
demo
DataBinding
<TextBlock Text=“{Binding Path=Name}” />
Templating
Los diferentes tipos de plantillas me
permiten cambiar el aspecto visual de un
control.
Diferentes tipos de plantillas:
ControlTemplate (ContentControl y Control)
ItemsPanelTemplate (Items)
DataTemplate (Clase sin árbol visual)
HierarchicalDataTemplate (Jerárquico)
Styles
Permiten cambiar el aspecto de un control.
Setter
Property
Value
Trigger
Property
Value
Acción
demo
Templating and Styles
Question & Answer
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT
MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.