Taller de Sistemas de Información 1

Transcripción

1 Taller de Sistemas de Información 1 Clase 4 WPF Lifecycle, Layouts, Controles, DataBinding

2 Application lifecycle INCO - Facultad de Ingeniería Montevideo, Uruguay 2

3 Application Una aplicación WPF es un proceso Windows, Este tiene una instancia del objeto Application Este provee servicios de ciclo de vida Una aplicación es una instancia de la clase System.Windows.Application INCO - Facultad de Ingeniería Montevideo, Uruguay 3

4 Application using System; using System.Windows; class Program { [STAThread] static void Main( ) { Application app = new System.Windows.Application(); Window1 window = new Window1( ); window.show( ); app.run(); } } INCO - Facultad de Ingeniería Montevideo, Uruguay 4

5 Creación explicita Cuando la aplicación esta ejecutando, WPF procesa los mensajes de Windows y rutea los eventos a los controles de UI de WPF, según sea necesario INCO - Facultad de Ingeniería Montevideo, Uruguay 5

6 Acceso a Application using System; using System.Windows; class Program { [STAThread] static void Main( ) { Application app = new System.Windows.Application(); Window1 window = new Window1( ); window.show( ); Application.Current.Run(); } } INCO - Facultad de Ingeniería Montevideo, Uruguay 6

7 Creación implícita Debido a que crear un Main como entry point de la aplicación, es de lo mas común, WPF puede proveernos un entry point por nosotros En general los proyectos WPF definen un XAML que define el objeto Application INCO - Facultad de Ingeniería Montevideo, Uruguay 7

8 <!-- App.xaml --> <Application Creación implícita x:class="implicitappsample.app" xmlns= " xmlns:x=" /> // App.xaml.cs using System; using System.Windows; namespace ImplicitAppSample { public partial class App : System.Windows.Application { protected override void OnStartup(StartupEventArgs e) { base.onstartup(e); Window1 window = new Window1( ); window.show( ); } } } INCO - Facultad de Ingeniería Montevideo, Uruguay 8

9 Creación implícita El propio WPF provee el Main Este main se encarga de crear el objeto Application e invocar el método Run() Todo lo que hay que hacer es crear una ventana y mostrarla, generalmente en el handler del evento Startup INCO - Facultad de Ingeniería Montevideo, Uruguay 9

10 INCO - Facultad de Ingeniería Montevideo, Uruguay 10

11 Con lo que WPF genera namespace ImplicitAppSample { public partial class App : Application { [System.STAThreadAttribute( )] [DebuggerNonUserCodeAttribute( )] public static void Main() { ImplicitAppSample.App app = new ImplicitAppSample.App(); app.run(); } } } INCO - Facultad de Ingeniería Montevideo, Uruguay 11

12 Creación implícita Si nuestra ventana esta definida en un archivo XAML (como seguramente lo este), podemos obviar el override del método OnStartup Para esto, establecemos la propiedad StartupUri en el XAML del objeto Application INCO - Facultad de Ingeniería Montevideo, Uruguay 12

13 Creación implícita <!-- App.xaml --> <Application x:class="implicitappsample.app" xmlns=" winfx/2006/xaml/presentation" xmlns:x=" winfx/2006/xaml" StartupUri="Window1.xaml" /> INCO - Facultad de Ingeniería Montevideo, Uruguay 13

14 Top-level Windows Es una ventana que no esta contenida ni pertenece a otra ventana La main Window de una aplicación WPF es la top-level Window que se encuentra cargada en la propiedad MainWindow del objeto Application Se carga cuando la primer instancia de Window es creada INCO - Facultad de Ingeniería Montevideo, Uruguay 14

15 Top-level Windows INCO - Facultad de Ingeniería Montevideo, Uruguay 15

16 Application shutdown Algunas aplicaciones trabajan naturalmente con la idea de una única ventana principal o Notepad, IDEs, Paintbrush, etc. Esta controla el ciclo de vida de la aplicación. Otras aplicaciones tienen múltiples ventanas top-level o incluso un ciclo de vida independiente de la ventana principal INCO - Facultad de Ingeniería Montevideo, Uruguay 16

17 Shutdown modes Podemos especificar en WPF cuando queremos que nuestra aplicación finalice, a través de la propiedad ShutdownMode en el objeto Application ShutdownMode o OnLastWindowClose = 0 (valor por defecto) o OnMainWindowClose = 1 o OnExplicitShutdown = 2 INCO - Facultad de Ingeniería Montevideo, Uruguay 17

18 Shutdown modes En el caso del shutdown explicito, la única forma de finalizar la ejecución de la aplicación es invocando el método Shutdown de la instancia de Application con la que estamos trabajando o Application.Current.Shutdown() INCO - Facultad de Ingeniería Montevideo, Uruguay 18

19 Shutdown modes Este modo puede alterarse en código cuando lo deseemos También puede configurarse en el XAML del objeto Application <Application x:class="appwindowssample.app" xmlns=" xmlns:x=" StartupUri="Window1.xaml" ShutdownMode="OnExplicitShutdown" /> INCO - Facultad de Ingeniería Montevideo, Uruguay 19

20 Shutdown Estas no son las únicas formas de finalizar una aplicación WPF (un proceso de Windows) Application.Shutdown() es una forma amigable de finalizar una aplicación, cerrar las top-level Windows, y finalizar el método Run() Esto permite que las ventanas involucradas puedan procesar sus notificaciones de Closing y Closed INCO - Facultad de Ingeniería Montevideo, Uruguay 20

21 Application Events Startup Activated Deactivated DispatcherUnhandledException SessionEnding Exit INCO - Facultad de Ingeniería Montevideo, Uruguay 21

22 Layouts INCO - Facultad de Ingeniería Montevideo, Uruguay 22

23 Layouts WPF provee una serie de herramientas flexibles para manipular la distribución de componentes en la interfaz de usuario Un buen sistema de layout balancea entre el control que brinda al desarrollador y el hecho de tener que hacer todo el trabajo INCO - Facultad de Ingeniería Montevideo, Uruguay 23

24 Las básicas WPF provee una serie de elementos denominados paneles Un panel tiene la función especifica de contener otros componentes los cuales debe distribuir apropiadamente Como cualquier componente WPF, los paneles tienen una serie de propiedades simples, que pueden componerse entre si para formar objetos complejos INCO - Facultad de Ingeniería Montevideo, Uruguay 24

25 Paneles Tenemos disponibles los siguientes paneles o o o o o o StackPanel WrapPanel DockPanel Grid Canvas UniformGrid INCO - Facultad de Ingeniería Montevideo, Uruguay 25

26 StackPanel Es el panel mas sencillo Acomoda sus hijos en una columna o en una fila En general no es muy usado para definir la totalidad de una interfaz de usuario Es mas útil para definir pequeñas subsecciones de una interfaz de usuario INCO - Facultad de Ingeniería Montevideo, Uruguay 26

27 StackPanel <StackPanel Background="#ECE9D8"> <TextBlock Margin="3">Look for:</textblock> <ComboBox Margin="3"/> <TextBlock Margin="3">Filtered by:</textblock> <ComboBox Margin="3"/> <Button Margin="3,5">Search</Button> <CheckBox Margin="3">Search in titles only</checkbox> <CheckBox Margin="3">Match related words</checkbox> <CheckBox Margin="3">Search in previous results </CheckBox> <CheckBox Margin="3"> Highlight search hits (in topics) </CheckBox> </StackPanel> INCO - Facultad de Ingeniería Montevideo, Uruguay 27

28 StackPanel Poco acomodo grafico Solamente el margen permite distribuir un poco mejor los componentes INCO - Facultad de Ingeniería Montevideo, Uruguay 28

29 WrapPanel Es una mejora sobre el StackPanel Cuando la cantidad de componentes supera el tope soportado en una línea Si agregamos un nuevo componente, el panel lo colocara en la próxima línea o Funciona como un procesador de texto INCO - Facultad de Ingeniería Montevideo, Uruguay 29

30 WrapPanel <WrapPanel Background="Beige"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> <Button>Four</Button> <Button>Five</Button> <Button>Six</Button> <Button>Seven</Button> <Button>Eight</Button> </WrapPanel> INCO - Facultad de Ingeniería Montevideo, Uruguay 30

31 DockPanel Organiza los componentes hijos, de forma tal de ocupar un borde determinado del panel Si múltiples hijos se colocan en el mismo borde, estos se apilan como si estuvieran en un StackPanel Por defecto el ultimo hijo llena el espacio no ocupado por los demás bordes INCO - Facultad de Ingeniería Montevideo, Uruguay 31

32 DockPanel <DockPanel> <Button DockPanel.Dock="Top"> Top </Button> <Button DockPanel.Dock="Bottom"> Bottom </Button> <Button DockPanel.Dock="Left">Left</Button> <Button DockPanel.Dock="Right">Right</Button> <Button>Fill</Button> </DockPanel> INCO - Facultad de Ingeniería Montevideo, Uruguay 32

33 DockPanel INCO - Facultad de Ingeniería Montevideo, Uruguay 33

34 Grid Por ejemplo, esta pantalla de propiedades del Internet Explorer, tiene una distribución típica tabular INCO - Facultad de Ingeniería Montevideo, Uruguay 34

35 Grid <Grid Background="Beige ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0">Protocol:</TextBlock> <TextBlock Grid.Column="1" Grid.Row="0"> HyperText Transfer Protocol</TextBlock> <TextBlock Grid.Column="0" Grid.Row="1">Type:</TextBlock> <TextBlock Grid.Column="1" Grid.Row="1">HTML Document</TextBlock> <TextBlock Grid.Column="0" Grid.Row="2">Connection:</TextBlock> <TextBlock Grid.Column="1" Grid.Row="2">Not encrypted</textblock> </Grid> INCO - Facultad de Ingeniería Montevideo, Uruguay 35

36 Grid La grilla necesita saber cuantas filas y columnas manejamos Para esto definimos las propiedades ColumnDefinition y RowDefinition La localización de cada elemento se hace a través de attached properties, indicando la fila y la columna o o Las grillas usan un esquema de 0-based index Esto permite tener celdas vacías INCO - Facultad de Ingeniería Montevideo, Uruguay 36

37 Grid Las celdas pueden contener múltiples elementos El orden en el que aparecen en el XAML determina quien aparece arriba de quien o o o Los que aparecen luego en el documento, se dibujan encima de los que aparecen antes Este orden se denomina Z order Podemos hacer un override de esta propiedad, con Panel.Zindex INCO - Facultad de Ingeniería Montevideo, Uruguay 37

38 UniformGrid A pesar de ser poderosa, a veces la grilla es un poco pesada de utilizar Existe un versión simplificada, denominada UniformGrid Las celdas tienen todas el mismo tamaño, por lo que no es necesario indicar colecciones de filas y columnas para indicar las dimensiones INCO - Facultad de Ingeniería Montevideo, Uruguay 38

39 UniformGrid Siempre se crean las filas y columnas según se necesitan, manteniendo el mismo numero según se agregan componentes Cada celda contiene a lo sumo un componente, por lo que no tenemos porque indicarlo explícitamente INCO - Facultad de Ingeniería Montevideo, Uruguay 39

40 UniformGrid <UniformGrid TextBlock.TextAlignment="Center"> <TextBlock Text="X" /> <TextBlock Text="O"/> <TextBlock Text="X"/> <TextBlock Text="X"/> <TextBlock Text="X"/> <TextBlock Text="O"/> <TextBlock Text="O"/> <TextBlock Text="O"/> <TextBlock Text="X"/> </UniformGrid> INCO - Facultad de Ingeniería Montevideo, Uruguay 40

41 Canvas Existen situaciones en las que necesitamos un completo control de la posición de cada componente Esto suele suceder si queremos construir una imagen a partir de componentes gráficos En estos casos, no aplican las reglas de layout antes descriptas INCO - Facultad de Ingeniería Montevideo, Uruguay 41

42 Canvas Es el mas simple de los paneles, ya que solo indicamos donde van los componentes, relativo a los bordes del Canvas En realidad, el Canvas no hace ningún layout, simplemente coloca las cosas donde le decimos que las coloque Tampoco ajusta el tamaño de los elementos dentro del Canvas, dejándolos con el tamaño que estos tengan por defecto INCO - Facultad de Ingeniería Montevideo, Uruguay 42

43 Canvas Al colocar los elementos hijos, debemos especificar la posición relativa a los bordes superiores (top / left) Si no lo hacemos todo quedara colocado en esa esquina También podemos colocar los elementos relativos al borde inferior derecho (bottom / right) INCO - Facultad de Ingeniería Montevideo, Uruguay 43

44 Canvas <Canvas Background="Yellow" Width="150" Height="100"> <TextBlock Canvas.Left="10" Canvas.Top="20"> Hello </TextBlock> <TextBlock Canvas.Right="10" Canvas.Bottom="20"> world! </TextBlock> </Canvas> INCO - Facultad de Ingeniería Montevideo, Uruguay 44

45 Propiedades comunes Width Height MinWidth MaxWidth MinHeight MaxHeight HorizontalAlignment INCO - Facultad de Ingeniería Montevideo, Uruguay 45

46 Propiedades comunes VerticalAlignment Margin Padding Visibility FlowDirection Panel.Zindex RenderTransform LayoutTransform INCO - Facultad de Ingeniería Montevideo, Uruguay 46

47 Input INCO - Facultad de Ingeniería Montevideo, Uruguay 47

48 Input Tenemos tres tipos de entrada de usuario o o o Mouse Teclado Ink (Tablet pc, Hand held, Stylus, etc) La entrada no procesada de un usuario es enviada al código a través de un mecanismo de WPF, conocido como routed event También existe una variante de mas alto nivel, denominada Command INCO - Facultad de Ingeniería Montevideo, Uruguay 48

49 Routed Events WPF define el siguiente mecanismo general para tratar eventos o o o Una clase expone múltiples eventos Un evento puede tener una cantidad arbitraria de subscriptores Si un evento no tiene handlers registrados, es ignorado INCO - Facultad de Ingeniería Montevideo, Uruguay 49

50 Routed Events WPF utiliza routed events En vez de llamar a un handler asociado al evento que un control disparo, WPF hace una recorrida de un árbol de elementos de interfaz de usuario, llamando a todos los handlers para el routed event que este asociado a cualquier nodo al cual lleguemos desde la raíz del árbol INCO - Facultad de Ingeniería Montevideo, Uruguay 50

51 Routed Events INCO - Facultad de Ingeniería Montevideo, Uruguay 51

52 <Button PreviewMouseDown="PreviewMouseDownButton" MouseDown="MouseDownButton"> <Grid PreviewMouseDown="PreviewMouseDownGrid" MouseDown="MouseDownGrid"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Canvas PreviewMouseDown="PreviewMouseDownCanvas" MouseDown="MouseDownCanvas" Width="20" Height="18" VerticalAlignment="Center"> <Ellipse PreviewMouseDown="PreviewMouseDownEllipse" MouseDown="MouseDownEllipse" x:name="myellipse" Canvas.Left="1" Canvas.Top="1" Width="16" Height="16" Fill="Yellow" Stroke="Black" /> <Ellipse Canvas.Left="4.5" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" /> <Ellipse Canvas.Left="11" Canvas.Top="5" Width="2.5" Height="3" Fill="Black" /> <Path Data="M 5,10 A 3, ,10" Stroke="Black" /> </Canvas> <TextBlock Grid.Column="1">Click!</TextBlock> </Grid> </Button> INCO - Facultad de Ingeniería Montevideo, Uruguay 52

53 Routed Events Si uno de los elementos Elipse del ejemplo anterior recibe una entrada, el routing de eventos habilitaría el Button, Grid, Canvas y Ellipse a recibir el evento Un Routed Event puede ser bubbling, tunneling o direct INCO - Facultad de Ingeniería Montevideo, Uruguay 53

54 Que significa esto? Por ejemplo, un botón no esta restringido a tener solo un textblock dentro Por ejemplo, este botón, tiene SEIS elementos gráficos dentro Adjuntar un handler para cada elemento grafico puede ser bastante pesado y poco eficiente INCO - Facultad de Ingeniería Montevideo, Uruguay 54

55 Bubbling routed events Comienza buscando handlers para el evento, en el componente que disparo el evento Luego, busca en su padre, en el padre de su padre, y así sucesivamente Este proceso se repite hasta llegar a la raíz del árbol de componentes INCO - Facultad de Ingeniería Montevideo, Uruguay 55

56 Tunneling routed events Es similar al anterior, pero comienza la búsqueda en la raíz, hasta el componente que origino el evento Trabaja en orden reverso al anterior INCO - Facultad de Ingeniería Montevideo, Uruguay 56

57 Direct events Este caso es similar a como funcionan los eventos tradicionales en.net Solo los handlers directamente attacheados al elemento originarte son notificados o No ocurre ningún routing Esto es útil para casos en los que el evento tiene sentido en el contexto del elemento originanente o Por ejemplo, MouseEnter / MouseLeave no tendría sentido en el ejemplo anterior INCO - Facultad de Ingeniería Montevideo, Uruguay 57

58 Handling del evento Con la excepción de los direct events, WPF define la mayoría de los routed events en parejas o Un bubbling y un tunneling INCO - Facultad de Ingeniería Montevideo, Uruguay 58

59 Handling del evento El tunneling event siempre comienza con Preview, y es lanzado antes o Esto da la chance de que el padre vea el evento ANTES de que llegue a los hijos (de ahí el Preview) INCO - Facultad de Ingeniería Montevideo, Uruguay 59

60 Handling del evento El evento de preview, es seguido de un evento de bubbling o En general, solo interesa manejar este ultimo El Preview suele usarse si queremos bloquear el evento o si queremos hacer algo antes que llegue al hijo INCO - Facultad de Ingeniería Montevideo, Uruguay 60

61 using System; using System.Windows; using System.Diagnostics; namespace EventRouting { public partial class Window1 : Window { public Window1( ) { InitializeComponent( ); } void PreviewMouseDownButton(object sender, RoutedEventArgs e) { Debug.WriteLine("PreviewMouseDownButton"); } void MouseDownButton(object sender, RoutedEventArgs e) { Debug.WriteLine("MouseDownButton"); } void PreviewMouseDownGrid(object sender, RoutedEventArgs e) { Debug.WriteLine("PreviewMouseDownGrid"); } void MouseDownGrid(object sender, RoutedEventArgs e) { Debug.WriteLine("MouseDownGrid"); } void PreviewMouseDownCanvas(object sender, RoutedEventArgs e) { Debug.WriteLine("PreviewMouseDownCanvas"); } void MouseDownCanvas(object sender, RoutedEventArgs e) { Debug.WriteLine("MouseDownCanvas"); } void PreviewMouseDownEllipse(object sender, RoutedEventArgs e) { Debug.WriteLine("PreviewMouseDownEllipse"); } void MouseDownEllipse(object sender, RoutedEventArgs e) { Debug.WriteLine("MouseDownEllipse"); } } } INCO - Facultad de Ingeniería Montevideo, Uruguay 61

62 Handling del evento Al ejecutar lo anterior, obtenemos en la salida esto: o o o o o o o PreviewMouseDownButton PreviewMouseDownGrid PreviewMouseDownCanvas PreviewMouseDownEllipse MouseDownEllipse MouseDownCanvas MouseDownGrid INCO - Facultad de Ingeniería Montevideo, Uruguay 62

63 Controles INCO - Facultad de Ingeniería Montevideo, Uruguay 63

64 Controles Un control es un componente de interfaz de usuario, que provee una interacción particular con el usuario En Windows tenemos muchos ejemplos de controles o TextBoxes, TextEditor, RadioButtons, etc. Los controles son los bloques constructores de cualquier interfaz WPF INCO - Facultad de Ingeniería Montevideo, Uruguay 64

65 Controles A pesar de que solemos asociare una determinada apariencia a un control, WPF provee la capacidad de alterar el look & feel de los controles Podemos alterar aspectos simples como el color de fondo o el tipo de letra, o podemos hacer cambios mas profundos, como la forma y el dibujo que presentan al usuario En cualquier caso, la escencia y funcionalidad básica del control no se altera INCO - Facultad de Ingeniería Montevideo, Uruguay 65

66 Que es un control? En WPF, los controles son todo comportamiento Delegan a los templates el trabajo de definir como será su apariencia Muchos frameworks requieren que construyamos un custom control cuando queremos customizar la apariencia, pero en WPF esto no es necesario o Los nested contents y los templates ofrecen una solución elegante y sencilla al problema INCO - Facultad de Ingeniería Montevideo, Uruguay 66

67 Que es un control? No precisamos escribir un custom control, A MENOS que precisemos un comportamiento interactivo diferente del brindado por los controles built-in INCO - Facultad de Ingeniería Montevideo, Uruguay 67

68 Que es un control? En WPF muchos elementos de interfaz grafica no son controles, como ser Ellipse y Rectangle o o No tienen un comportamiento intrínseco Son solo apariencia Estos elementos de bajo nivel no extienden a Control, sino que heredan de FrameworkElement INCO - Facultad de Ingeniería Montevideo, Uruguay 68

69 INCO - Facultad de Ingeniería Montevideo, Uruguay 69

70 Como encaja en un programa? Las partes visibles del control son provistas por el template, en vez del control mismo No esta completamente desconectado, ya que las usa para presentar la información Estos aspectos visuales son los que utiliza el usuario para interactuar con el componente INCO - Facultad de Ingeniería Montevideo, Uruguay 70

71 Como encaja en un programa? Lo anterior implica que si bien la parte visual puede ser reemplazada, este reemplazo debe cumplir con ciertas responsabilidades Existe un contrato entre el control y su parte visual En cierta forma (inusual), el control tiene un diseño basado en el patrón model-viewcontroller INCO - Facultad de Ingeniería Montevideo, Uruguay 71

72 Como encaja en un programa? A pesar de que el control se hace visible a través de un template, brinda sus servicios al desarrollador a través de un API Los controles puede usar commands para representar operaciones soportadas o Textbox soporta copy, cut, paste, etc. Los controles puede proveer propiedades para modificar la forma en como se ven y como funcionan, así como la información asociada al control (texto en un textbox, por ejemplo) INCO - Facultad de Ingeniería Montevideo, Uruguay 72

73 Como encaja en un programa? Pueden disparar eventos cuando algo importante o que deba ser atendido suceda También provee una serie de métodos, a ser usados desde el código de la aplicación, cuando la interacción deba seguir mas bien un estilo programático INCO - Facultad de Ingeniería Montevideo, Uruguay 73

74 Controles built-in WPF provee una variedad bastante amplia de controles Muchos de ellos corresponden a los controles típicos de Windows, aunque NO son wrappers sobre los controles Win32 o Son todos controles WPF nativos, soportando todas las características que estamos viendo de WPF INCO - Facultad de Ingeniería Montevideo, Uruguay 74

75 Button Es un control en el que el usuario puede hacer click El resultado del click, depende del desarrollador de la aplicación Sin embargo, en cualquier caso existen ciertas expectativas relacionadas con dicho click INCO - Facultad de Ingeniería Montevideo, Uruguay 75

76 Button Por ejemplo, clickear en un radio Button o un CheckBox, suele alterar el aspecto grafico del componente, debido a un cambio en su estado Sin embargo, clickear en un botón, debería producir un resultado Utilizar un botón es sencillo, basta agregar en el XAML o <Button Click="ButtonClicked">Button</Button> INCO - Facultad de Ingeniería Montevideo, Uruguay 76

77 Button El contenido del elemento XML (texto Button ) es utilizado en este caso como el Caption del botón El handler del evento es especificado a traves de la propiedad Click o El code behind debe contener un método con el mismo nombre que el especificado en el handler void ButtonClicked(object sender, RoutedEventArgs e) { MessageBox.Show("Button was clicked"); } INCO - Facultad de Ingeniería Montevideo, Uruguay 77

78 Button WPF provee los tres tipos estándar de botón INCO - Facultad de Ingeniería Montevideo, Uruguay 78

79 Button Podemos utilizar control templates para customizar la forma completa en como se ve un botón INCO - Facultad de Ingeniería Montevideo, Uruguay 79

80 Slider y Scrollbar Son controles que permite seleccionar un valor de un rango determinado de valores La apariencia es siempre la misma o o Una línea, en la cual tenemos una escala y un selector movible Este ultimo es el que permite ajustar el valor INCO - Facultad de Ingeniería Montevideo, Uruguay 80

81 Slider y Scrollbar Ambos controles son similares, la diferencia esta mas bien en el uso Scrollbar o Slider Se utiliza junto con un área scrolleable o Se utiliza para seleccionar un valor especifico de un rango de valores INCO - Facultad de Ingeniería Montevideo, Uruguay 81

82 Slider y Scrollbar INCO - Facultad de Ingeniería Montevideo, Uruguay 82

83 ProgressBar Indica cuanto de un proceso largo, una aplicación ha completado Provee feedback al usuario de cómo ha progresado el trabajo, junto con una idea general de cuanto falta por terminar INCO - Facultad de Ingeniería Montevideo, Uruguay 83

84 Controles de texto WPF provee controles para editar y desplegar texto, siendo el mas simple de ellos el TextBox Este provee una línea simple de texto, que puede ser desplegada y editada o Si colocamos AcceptsReturn en true, entonces podemos hacer que sea multilinea INCO - Facultad de Ingeniería Montevideo, Uruguay 84

85 Controles de texto El textbox provee facilidades de procesamiento de texto simples, como ser o o o Funciones de clipboard (cut, copy, paste) Selección de texto Undo y Redo Algunos ejemplos INCO - Facultad de Ingeniería Montevideo, Uruguay 85

86 Controles de texto INCO - Facultad de Ingeniería Montevideo, Uruguay 86

87 Controles de texto TextBox y PasswordBox proveen propiedades Text y Password respectivamente para obtener el valor ingresado en ellos o Ambas propiedades son de tipo String Para situaciones en donde precisamos texto con contenido mas allá del texto plano, tenemos el RichTextBox INCO - Facultad de Ingeniería Montevideo, Uruguay 87

88 Controles de texto RichTextBox soporta los comandos definidos por la clase EditingCommands Esto incluye las opciones clásicas de formateo como bold, italic, plain, etc, y los shortcuts de teclas tradicionales, como CTRL+B, etc INCO - Facultad de Ingeniería Montevideo, Uruguay 88

89 Controles de texto RichTextBox reconoce también texto RTF o Podemos pastear de Word y de Internet Explorer INCO - Facultad de Ingeniería Montevideo, Uruguay 89

90 Controles de texto Tanto TextBox como RichTextBox ofrecen funcionalidades de spelling Solo tenemos que establecer la propiedad attached SpellChecking.IsEnabled en true INCO - Facultad de Ingeniería Montevideo, Uruguay 90

91 Controles de texto El diccionario utilizado para realizar el spelling cumple con el atributo xml:lang INCO - Facultad de Ingeniería Montevideo, Uruguay 91

92 ToolTip Permite que un Label flotante sea desplegado sobre alguna sección de la interfaz de usuario Solo podemos utilizarlo en conjunto con otro componente de la interfaz de usuario Se vuelve visible cuando el puntero del mouse se mueve (hover) encima del target INCO - Facultad de Ingeniería Montevideo, Uruguay 92

93 ToolTip Utilizamos la propiedad ToolTip del control para asociarlo al target <TextBox Width="100" ToolTip="Type something here" /> <TextBox Width="100"> <TextBox.ToolTip> <ToolTip Content="Type something here" /> </TextBox.ToolTip> </TextBox> INCO - Facultad de Ingeniería Montevideo, Uruguay 93

94 ToolTip O podemos elaborar un poco mas el tooltip <TextBox Width="100"> <TextBox.ToolTip> <TextBlock FontSize="25"> <Ellipse Fill="Orange" Width="20" Height="20" /> Plain text is <Italic>so</Italic> <Span FontFamily="Old English Text MT">last century</span> <Ellipse Fill="Orange" Width="20" Height="20" /> </TextBlock> </TextBox.ToolTip> </TextBox> INCO - Facultad de Ingeniería Montevideo, Uruguay 94

95 GroupBox y Expander Son muy similares entre si Proveen un container para contenido arbitrario, y lugar para un header Son muy similares, pero o o el Expander puede ser expandido y colapsado, el GroupBox siempre muestra su contenido Ambos derivan de HeaderedContentControl INCO - Facultad de Ingeniería Montevideo, Uruguay 95

96 GroupBox y Expander INCO - Facultad de Ingeniería Montevideo, Uruguay 96

97 <StackPanel Orientation="Horizontal"> <GroupBox Header="Glass"> <Border Margin="2" Background="White" Padding="3"> <StackPanel> <RadioButton Content="Half-full" IsChecked="True" /> <RadioButton Content="Half-empty" /> </StackPanel> </Border> </GroupBox> <Expander Header="Glass" IsExpanded="True" Background="#def" VerticalAlignment="Center" MinWidth="90 Margin="10,0"> <Border Margin="2" Background="White" Padding="3"> <StackPanel> <RadioButton Content="Half-full" IsChecked="True" /> <RadioButton Content="Half-empty" /> </StackPanel> </Border> </Expander> </StackPanel> INCO - Facultad de Ingeniería Montevideo, Uruguay 97

98 GroupBox y Expander No solo el área de contenido puede ser cualquier cosa, sino que en el header podemos colocar contenido arbitrario Utiliza una forma dual de content model INCO - Facultad de Ingeniería Montevideo, Uruguay 98

99 <GroupBox> <GroupBox.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Slightly" FontStyle="Italic" VerticalAlignment="Center" /> <MediaElement Source="C:\Videos\Butterfly.wmv" Width="80" /> <TextBlock Text=" more " VerticalAlignment="Center" /> <Ellipse Fill="Red" Width="20" Height="60" /> <TextBlock Text=" interesting " VerticalAlignment="Center" FontWeight="Bold" /> <Button Content="_header" VerticalAlignment="Center" /> </StackPanel> </GroupBox.Header> <TextBlock Text="Boring content" /> </GroupBox> INCO - Facultad de Ingeniería Montevideo, Uruguay 99

100 List Controls WPF ofrece varios controles que pueden presentar múltiples elementos o o o ListBox, ComboBox y ListView presentan una lista de elementos TreeView presenta una jerarquía de elementos TabControl presenta una lista de items (los tabs) Todos heredan de ItemsControl INCO - Facultad de Ingeniería Montevideo, Uruguay 100

101 List Controls La forma mas fácil de usarlos, es agregar controles a su propiedad Items <ComboBox> <Button>Click!</Button> <TextBlock>Hello, world</textblock> <StackPanel Orientation="Horizontal"> <TextBlock>Ellipse:</TextBlock> <Ellipse Fill="Blue" Width="100" /> </StackPanel> </ComboBox> INCO - Facultad de Ingeniería Montevideo, Uruguay 101

102 List Controls INCO - Facultad de Ingeniería Montevideo, Uruguay 102

103 List Controls Cada control que se agrega a uno de estos list controls, es colocado automaticamente en un contenedor para que pueda ser colocado en el control Cada control tiene su item container apropiado o ComboBoxItem, ListBoxItem, TabItem, ListViewItem y TreeViewItem INCO - Facultad de Ingeniería Montevideo, Uruguay 103

104 List Controls En el ejemplo anterior, este container es generado automáticamente Este proceso se denomina Item Container Generation Es conveniente, pero a veces necesitamos mas control INCO - Facultad de Ingeniería Montevideo, Uruguay 104

105 <TabControl> <TabItem Header="_Button"> <Button>Click!</Button> </TabItem> <TabItem> <TabItem.Header> <TextBlock FontSize="18" FontFamily="Palatino Linotype"> <AccessText>_Text</AccessText> </TextBlock> </TabItem.Header> <TextBlock>Hello, world</textblock> </TabItem> <TabItem> <TabItem.Header> <Ellipse Fill="Blue" Width="30" Height="20" /> </TabItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock>Ellipse:</TextBlock> <Ellipse Fill="Blue" Width="100" /> </StackPanel> </TabItem> </TabControl> INCO - Facultad de Ingeniería Montevideo, Uruguay 105

106 ListView ListView deriva de ListBox, dando la posibilidad de ver los datos estilo grilla Debemos describir las columnas de dicha grilla <ListView> <ListView.View> <GridView AllowsColumnReorder="true"> <GridViewColumn Header="Name" /> <GridViewColumn Header="Line Spacing" /> <GridViewColumn Header="Sample" /> </GridView> </ListView.View> </ListView> INCO - Facultad de Ingeniería Montevideo, Uruguay 106

107 <ListView ItemsSource="{x:Static Fonts.SystemFontFamilies}"> <ListView.View> <GridView> <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Source}" /> <GridViewColumn Header="Line Spacing" DisplayMemberBinding="{Binding LineSpacing}" /> <GridViewColumn Header="Sample"> <GridViewColumn.CellTemplate> <DataTemplate> <TextBlock FontFamily="{Binding}" FontSize="20" Text="ABCDEFGabcdefg" /> </DataTemplate> </GridViewColumn.CellTemplate> </GridViewColumn> </GridView> </ListView.View> </ListView> INCO - Facultad de Ingeniería Montevideo, Uruguay 107

108 TreeView Presenta una visión jerárquica de los datos en vez de una lista secuencial Esto implica que los elementos TreeViewItem deben estar anidados entre si INCO - Facultad de Ingeniería Montevideo, Uruguay 108

109 <TreeView> <TreeViewItem Header="First top-level item" IsExpanded="True"> <TreeViewItem Header="Child" /> <TreeViewItem Header="Another child" IsExpanded="True"> <TreeViewItem Header="Grandchild" /> <TreeViewItem Header="Grandchild 2" /> </TreeViewItem> <TreeViewItem Header="A third child" /> </TreeViewItem> <TreeViewItem Header="Second top-level item"> <TreeViewItem Header="Child a" /> <TreeViewItem Header="Child b" /> <TreeViewItem Header="Child c" /> </TreeViewItem> <TreeViewItem IsExpanded="True"> <TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <Ellipse Fill="Blue" Width="15" Height="15" /> <TextBlock Text="Third top-level item" /> <Ellipse Fill="Blue" Width="15" Height="15" /> </StackPanel> </TreeViewItem.Header> <TreeViewItem Header="Child a" /> <TreeViewItem Header="Child b" /> <TreeViewItem Header="Child c" /> </TreeViewItem> </TreeView> INCO - Facultad de Ingeniería Montevideo, Uruguay 109

110 Menues Permite definir los clásicos menues de las ventanas y/o los menús emergentes de las aplicaciones INCO - Facultad de Ingeniería Montevideo, Uruguay 110

111 <Menu> <MenuItem Header="_File"> <MenuItem Header="_New" /> <MenuItem Header="_Open..." /> <MenuItem Header="_Save" /> <MenuItem Header="Sa_ve As..." /> <Separator /> <MenuItem Header="Page Se_tup..." /> <MenuItem Header="_Print..." /> <Separator /> <MenuItem Header="E_xit" /> </MenuItem> <MenuItem Header="_Edit"> <MenuItem Header="_Undo" /> <MenuItem Header="_Redo" /> <Separator /> <MenuItem Header="Cu_t" /> <MenuItem Header="_Copy" /> <MenuItem Header="_Paste" /> <MenuItem Header="_Delete" /> <Separator /> <MenuItem Header="Select _All" /> </MenuItem> <MenuItem Header="_Help"> <MenuItem Header="Help _Topics" /> <MenuItem Header="_About..." /> </MenuItem> </Menu> INCO - Facultad de Ingeniería Montevideo, Uruguay 111

112 ContextMenu <Grid Background="Transparent"> <Grid.ContextMenu> <ContextMenu> <MenuItem Header="Foo" /> <MenuItem Header="Bar" /> </ContextMenu> </Grid.ContextMenu>... </Grid> INCO - Facultad de Ingeniería Montevideo, Uruguay 112

113 Toolbars La mayoría de las aplicaciones de Windows proveen toolbars, como medio de acceso rápido a un grupo de funcionalidades INCO - Facultad de Ingeniería Montevideo, Uruguay 113

114 Toolbars WPF provee los controles ToolbarTray y Toolbar ToolbarTray provee un container en el cual podemos agregar multiples controles Toolbar INCO - Facultad de Ingeniería Montevideo, Uruguay 114

115 <ToolBarTray> <ToolBar> <Button> <Canvas Width="16" Height="16" SnapsToDevicePixels="True"> <Polygon Stroke="Black" StrokeThickness="0.5" Points="2.5, , , ,15 2.5,15"> <Polygon.Fill> <LinearGradientBrush StartPoint="1,1" EndPoint="0.2,0.7"> <GradientStop Offset="0" Color="#AAA" /> <GradientStop Offset="1" Color="White" /> </LinearGradientBrush> </Polygon.Fill> </Polygon> <Polygon Stroke="Black" Fill="DarkGray" StrokeThickness="0.5" StrokeLineJoin="Bevel" Points="9.5, , ,4.5" /> </Canvas> </Button> <Button> <Canvas Width="16" Height="16" > <Polygon Stroke="Black" StrokeThickness="0.5" Fill="Khaki" SnapsToDevicePixels="True" Points="0.5, , , , , , ,14.5" /> <Polygon Stroke="Black" SnapsToDevicePixels="True" StrokeThickness="0.5" Points="1.5, , , ,14.5" > <Polygon.Fill> <LinearGradientBrush StartPoint="0.25,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="#FF4" /> <GradientStop Offset="1" Color="#CA7" /> </LinearGradientBrush> </Polygon.Fill> </Polygon> <Path Stroke="Blue" StrokeThickness="1" Data="M 8,2 C 9,1 12,1 14,3" /> <Polygon Fill="Blue" Points="15,1 15.5,4.5 12,4" /> </Canvas> </Button> </ToolBar> <ToolBar> <Button>Second toolbar</button> <CheckBox IsChecked="True">Choice</CheckBox> </ToolBar> </ToolBarTray> INCO - Facultad de Ingeniería Montevideo, Uruguay 115

116 GridSplitter Permite ajustar las dimensiones del layout de la aplicación, ajustando los tamaños una columna o fila de una grilla <Grid Height="100" Width="400"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="6" /> <ColumnDefinition Width="2*" /> </Grid.ColumnDefinitions> <Ellipse Grid.Column="0" Fill="Red" /> <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" /> <Ellipse Grid.Column="2" Fill="Blue" /> </Grid> INCO - Facultad de Ingeniería Montevideo, Uruguay 116

117 GridSplitter INCO - Facultad de Ingeniería Montevideo, Uruguay 117

118 Data Binding INCO - Facultad de Ingeniería Montevideo, Uruguay 118

119 Data Binding El propósito de la gran mayoría de las aplicaciones que tienen interacción con el usuario, es presentar datos, y permitir que los usuarios modifiquen dichos datos Algunas tareas que tendremos que realizar con los datos: o Mostrarlos, convertirlos, ordenarlos, filtrarlos, relacionarlos, y editarlos INCO - Facultad de Ingeniería Montevideo, Uruguay 119

120 Data Binding WPF incorpora un motor de data binding, que permite realizar muchas de las tareas anteriores, con menos código No quita que las tareas puedan hacerse sin este motor, solo que quedan mas complejas Por ejemplo INCO - Facultad de Ingeniería Montevideo, Uruguay 120

121 Sin Data Binding INCO - Facultad de Ingeniería Montevideo, Uruguay 121

122 Sin Data Binding Podemos implementar lo anterior con un simple XAML <!-- Window1.xaml --> <Window...> <Grid>... <TextBlock...>Name:</TextBlock> <TextBox Name="nameTextBox"... /> <TextBlock...>Age:</TextBlock> <TextBox Name="ageTextBox"... /> <Button Name="birthdayButton"...>Birthday</Button> </Grid> </Window> INCO - Facultad de Ingeniería Montevideo, Uruguay 122

123 Sin Data Binding public class Person { string name; public string Name { get { return this.name; } set { this.name = value; } } int age; public int Age { get { return this.age; } set { this.age = value; } } public Person( ) {} public Person(string name, int age) { this.name = name; this.age = age; } } INCO - Facultad de Ingeniería Montevideo, Uruguay 123

124 // Window1.xaml.cs... public class Person {...} public partial class Window1 : Window { Person person = new Person("Tom", 11); public Window1( ) { InitializeComponent( ); // Fill initial person fields this.nametextbox.text = person.name; this.agetextbox.text = person.age.tostring(); // Handle the birthday button click event this.birthdaybutton.click += birthdaybutton_click; } void birthdaybutton_click(object sender, RoutedEventArgs e) { ++person.age; MessageBox.Show(string.Format( "Happy Birthday, {0}, age {1}!", person.name, person.age), "Birthday"); } } INCO - Facultad de Ingeniería Montevideo, Uruguay 124

125 Sin Data Binding El código crea un objeto persona, y lo usa para inicializar los campos de la ventana Cuando se presiona el botón del cumpleaños, la persona se modifica, y los datos se muestran en un message box INCO - Facultad de Ingeniería Montevideo, Uruguay 125

126 Sin Data Binding INCO - Facultad de Ingeniería Montevideo, Uruguay 126

127 Sin Data Binding El ejemplo es bastante sencillo Los cambios en el objeto se reflejan en un MessageBox Podríamos mejorarlo para que los cambios afecten la ventana principal INCO - Facultad de Ingeniería Montevideo, Uruguay 127

128 Sin Data Binding void birthdaybutton_click(object sender, RoutedEventArgs e) { ++person.age; // Manually update the UI this.agetextbox.text = person.age.tostring(); } MessageBox.Show(string.Format( "Happy Birthday, {0}, age {1}!", person.name, person.age), "Birthday"); INCO - Facultad de Ingeniería Montevideo, Uruguay 128

129 Sin Data Binding La forma de hacer mas dinámica nuestra aplicación, agregamos una línea de código Parece una forma sencilla de mejorarla, pero tiene un problema No escala bien a medida que la aplicación se hace mas complicada, requiriendo cada vez mas de estas líneas de código INCO - Facultad de Ingeniería Montevideo, Uruguay 129

130 Cambios en los objetos Una forma mas robusta para que la UI lleve registro de los cambios, es que el objeto avise cuando una propiedad cambia, por ejemplo, lanzando un evento La forma correcta de hacer esto, es que el objeto implemente INotifyPropertyChanged INCO - Facultad de Ingeniería Montevideo, Uruguay 130

131 using System.ComponentModel; // INotifyPropertyChanged... public class Person : INotifyPropertyChanged { // INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; protected void Notify(string propname) { if( this.propertychanged!= null ) { PropertyChanged( this, new PropertyChangedEventArgs(propName)); } }... INCO - Facultad de Ingeniería Montevideo, Uruguay 131

132 } string name; public string Name { get { return this.name; } set { if( this.name == value ) { return; } this.name = value; Notify("Name"); } } int age; public int Age { get { return this.age; } set { if(this.age == value ) { return; } this.age = value; Notify("Age"); } } public Person( ) {} public Person(string name, int age) { this.name = name; this.age = age; } INCO - Facultad de Ingeniería Montevideo, Uruguay 132

133 Notificación de cambios Cuando la propiedad Age de la persona cambia, debida a la acción del handler de la ventana, el objeto persona hace un raise del evento PropertyChanged Podríamos manualmente capturar este evento, colocar un handler y reaccionar ante el mismo, como hacemos con cualquier otro handler INCO - Facultad de Ingeniería Montevideo, Uruguay 133

134 Notificación // Window1.xaml.cs de cambios... public class Person : INotifyPropertyChanged {...} public partial class Window1 : Window { Person person = new Person("Tom", 11); public Window1( ) { InitializeComponent( ); // Fill initial person fields this.nametextbox.text = person.name; this.agetextbox.text = person.age.tostring( ); // Watch for changes in Tom's properties person.propertychanged += person_propertychanged; } // Handle the birthday button click event this.birthdaybutton.click += birthdaybutton_click; INCO - Facultad de Ingeniería Montevideo, Uruguay 134

135 Notificación de cambios void person_propertychanged( object sender, PropertyChangedEventArgs e) { switch( e.propertyname ) { case "Name": this.nametextbox.text = person.name; break; case "Age": this.agetextbox.text = person.age.tostring(); break; } } INCO - Facultad de Ingeniería Montevideo, Uruguay 135

136 Notificación de cambios } void birthdaybutton_click(object sender, RoutedEventArgs e) { ++person.age; // person_propertychanged will update agetextbox MessageBox.Show( string.format( "Happy Birthday, {0}, age {1}!", person.name, person.age), "Birthday"); } INCO - Facultad de Ingeniería Montevideo, Uruguay 136

137 Notificación de cambios Con el código anterior, ocurre una cascada de eventos que hacen que el handler del botón del cumpleaños, no tenga que actualizar la UI Gráficamente, se puede apreciar en el siguiente diagrama este flujo de eventos INCO - Facultad de Ingeniería Montevideo, Uruguay 137

138 INCO - Facultad de Ingeniería Montevideo, Uruguay 138

139 Notificación de cambios Sin embargo, hemos resuelto parte del problema Aun tenemos que actualizar manualmente en el handler del cambio de propiedad, la interfaz grafica Pero tenemos otro problema INCO - Facultad de Ingeniería Montevideo, Uruguay 139

140 Cambios en la UI Necesitamos también un mecanismo que detecte los cambios en la interfaz grafica, y los propague hacia el objeto En ejemplo anterior, si cambiamos el nombre y presionamos el botón Birthday, puede pasarnos esto INCO - Facultad de Ingeniería Montevideo, Uruguay 140

141 Cambios en la UI INCO - Facultad de Ingeniería Montevideo, Uruguay 141

142 Cambios en la UI Necesitamos monitorear la propiedad Text del textbox, actualizando en caso afirmativo la propiedad INCO - Facultad de Ingeniería Montevideo, Uruguay 142

143 Cambios en la UI public partial class Window1 : Window { Person person = new Person("Tom", 11); public Window1( ) { InitializeComponent( ); // Fill initial person fields this.nametextbox.text = person.name; this.agetextbox.text = person.age.tostring( ); // Watch for changes in Tom's properties person.propertychanged += person_propertychanged; // Watch for changes in the controls this.nametextbox.textchanged += nametextbox_textchanged; this.agetextbox.textchanged += agetextbox_textchanged; // Handle the birthday button click event this.birthdaybutton.click += birthdaybutton_click; }... INCO - Facultad de Ingeniería Montevideo, Uruguay 143

144 Cambios en la UI } void nametextbox_textchanged(object sender, TextChangedEventArgs e) { person.name = nametextbox.text; } void agetextbox_textchanged(object sender, TextChangedEventArgs e) { int age = 0; if( int.tryparse(agetextbox.text, out age) ) { person.age = age; } } void birthdaybutton_click(object sender, RoutedEventArgs e) { ++person.age; MessageBox.Show(string.Format( "Happy Birthday, {0}, age {1}!", person.name, person.age), "Birthday ); } INCO - Facultad de Ingeniería Montevideo, Uruguay 144

145 Cambios en la UI INCO - Facultad de Ingeniería Montevideo, Uruguay 145

146 Sincronización Sin importar entonces en donde se de el cambio (objeto,ui), ambos elementos se mantienen sincronizados Sin embargo, a pesar de que tenemos lo que buscábamos, tuvimos que escribir bastante código INCO - Facultad de Ingeniería Montevideo, Uruguay 146

147 Sincronización El constructor de Window1 tuvo que inicializar los datos en los controles, convirtiendo según necesidad a String El constructor Window1 tuvo que enganchar los handlers de los eventos PropertyChanged del objeto Person INCO - Facultad de Ingeniería Montevideo, Uruguay 147

148 Sincronización El evento PropertyChanged, para tomar los nuevos datos de la persona, convirtiendo a String según sea necesario El constructor de Window1 debe enganchar el handler de TextChanged Handler de TextChanged para propagar cambios en la UI a la persona, convirtiendo de String según sea necesario INCO - Facultad de Ingeniería Montevideo, Uruguay 148

149 Sincronización Claramente, la cantidad de código a escribir se nos va de las manos, si la cantidad de objetos, propiedades de los objetos y eventos aumenta Además, este tipo de tareas parecen bastante repetitivas De ahí que WPF las abstrae en funcionalidades del framework, dándole el nombre de Data Binding INCO - Facultad de Ingeniería Montevideo, Uruguay 149

150 WPF Data Binding Consiste en registrar un par de propiedades, una de ellas en un objeto (Person.Name), la otra en la interfaz grafica (Textbox.Text), con el motor de Data Binding Este motor es el que se encarga de mantener ambas sincronizadas, convirtiendo los tipos de datos según sea necesario INCO - Facultad de Ingeniería Montevideo, Uruguay 150

151 WPF Data Binding INCO - Facultad de Ingeniería Montevideo, Uruguay 151

152 Bindings Para registrar ambas propiedades, utilizamos el objeto Binding Todas las siguientes son equivalentes <TextBox...> <TextBox.Text> <Binding Path="Age" /> </TextBox.Text> </TextBox> <TextBox Text="{Binding Path=Age}" /> <TextBox Text="{Binding Age}" /> INCO - Facultad de Ingeniería Montevideo, Uruguay 152

153 Bindings Algo un poco mas elaborado <TextBox...> <TextBox.Foreground> <Binding Path="Age" Mode="OneWay" Source="{StaticResource Tom}" Converter="{StaticResource ageconverter}" /> </TextBox.Foreground> </TextBox> INCO - Facultad de Ingeniería Montevideo, Uruguay 153

154 Bindings Volviendo a este ejemplo, <TextBox Text="{Binding Path=Name}" /> es equivalente a INCO - Facultad de Ingeniería Montevideo, Uruguay 154

155 Bindings En general, podemos pensar que Path es la ruta para acceder a una propiedad dentro del objeto fuente de la información En el caso anterior, el binding se da entre el TextBox (propiedad Text) y la propiedad Age de un objeto que será determinado luego INCO - Facultad de Ingeniería Montevideo, Uruguay 155

156 Bindings En el caso anterior, el textbox actúa como el binding target, consumiendo los cambios del binding source El binding target puede ser cualquier elemento WPF, pero solo podemos bindear contra las dependency properties El binding source puede ser cualquier propiedad de cualquier elemento WPF INCO - Facultad de Ingeniería Montevideo, Uruguay 156

157 Bindings En este caso, el binding source puede especificarse en runtime Sin embargo, en general, el binding source provendrá de un Data Context INCO - Facultad de Ingeniería Montevideo, Uruguay 157

158 Data source implícitos Un Data Context es el lugar en el que los bindings buscan por su data source si no se les ha dado ninguna instrucción especial En WPF todo FrameworkElement y todo FrameworkContentElement tienen una propiedad DataContext INCO - Facultad de Ingeniería Montevideo, Uruguay 158

159 Data source implícitos Esta es de tipo Object, por lo que podemos colocar cualquier cosa que deseemos INCO - Facultad de Ingeniería Montevideo, Uruguay 159

160 Data source implícitos Cuando se busca un objeto para utilizar como data source de un binding, se recorre el árbol de componentes en forma inversa, partiendo del componente en cuestión Esto es bastante útil cuando queremos que dos componentes compartan el mismo data source INCO - Facultad de Ingeniería Montevideo, Uruguay 160

161 Data source implícitos INCO - Facultad de Ingeniería Montevideo, Uruguay 161

162 Data source implícitos Esto funciona así o o o El binding busca un DataContext en el propio TextBox El binding busca un DataContext en la Grid El binding busca un DataContext en el Window Hacer que ambos textbox compartan el mismo objeto Person, es cuestión de colocarlo en el DataContext de la grilla INCO - Facultad de Ingeniería Montevideo, Uruguay 162

163 // Window1.xaml.cs using System; using System.Windows; using System.Windows.Controls; namespace WithBinding { public partial class Window1 : Window { Person person = new Person("Tom", 11); public Window1( ) { InitializeComponent( ); grid.datacontext = person; this.birthdaybutton.click += birthdaybutton_click; } void birthdaybutton_click(object sender, RoutedEventArgs e) { ++person.age; MessageBox.Show(string.Format( "Happy Birthday, {0}, age {1}!", person.name, person.age), "Birthday"); } } } INCO - Facultad de Ingeniería Montevideo, Uruguay 163

164 Data source implícitos Entonces, si bien la funcionalidad es la misma, el código de sincronización se ha reducido enormemente INCO - Facultad de Ingeniería Montevideo, Uruguay 164

165 Data Islands Una de las catacteristicas especiales de WPF, es que permiten la creacion de casi cualquier tipo de objeto dentro del XAML Por ejemplo, si queremos trabajar con el objeto Person anterior, podemos hacer INCO - Facultad de Ingeniería Montevideo, Uruguay 165