Windows Presentation Foundation

1. Windows PresentationFoundation Microsoft Luis Guerrero DeveloperAdvisor Blog: http://www.luisguerrero.net Blog: http://geeks.ms/blogs/luisguerrero Email: lguerrero@plainconcetps.com

2. Silverlight Microsoft Luis Guerrero DeveloperAdvisor Blog: http://www.luisguerrero.net Blog: http://geeks.ms/blogs/luisguerrero Email: lguerrero@plainconcetps.com

3. ¿WPF? • ¿Que es WPF? • Experiencia previa • Windows Forms • ¿Donde estamos?

4. .NET Framework technologies .NET Framework 2.0 • Common language runtime (CLR) and base class libraries. • Support for generic types and methods. • Compilers for C#, Visual Basic, C++, and J#. • ADO.NET. • ASP.NET. • Windows Forms. • Web services.

5. .NET Framework technologies .NET Framework 2.0 SP1 • Updates .NET Framework 2.0 assemblies

6. .NET Framework technologies .NET Framework 3.0  • Windows Presentation Foundation (WPF). • Windows Communications Foundation (WCF). • Windows Workflow Foundation (WF). • Cardspace.

7. .NET Framework technologies .NET Framework 3.0 SP1 • Updates .NET Framework 3.0 assemblies

8. .NET Framework technologies .NET Framework 3.5 • Language Integrated Query (LINQ). • New compilers for C#, Visual Basic, and C++. • ASP.NET AJAX.

9. .NET Framework technologies .NET Framework 3.5 SP1 • ASP.NET Dynamic Data. • ADO.NET Entity Framework. • Data provider support for SQL Server 2008. • Support for the .NET Framework Client Profile, a setup package that includes only assemblies used by client applications. • Support for PixelShaders in WPF. • Improved performance in WPF.

10. Silverlight Platform • Corepresentationframework • .NET Framework for Silverlight • Installer and updater

11. ¿Qué es WPF? WPF esunatecnologiaparadesarrollar la siguientegeneración de aplicaciones en Windows y en la web, utilizandotoda la potencia del hardware y creandolasmejoresexperiencias de usuario (UX).

12. demo

13. Silverlight Platform

14. Silverlight Silverlight es un plug-in para navegadores que permite crear aplicaciones RIA Características • Animaciones • Gráficos vectoriales • Reproducción de vídeo y audio. • CLR / .NET • Multinavegador • Multisistema

15. Silverlight Platform • Corepresentationcomponents • Input • UI rendering • Media • Controls • Layout • Data binding • DRM • XAML

16. Silverlight Platform • .NET Framework for Silverlight • Data • LINQ • LINQ to XML • Base classlibrary • WCF (Windows CommunicationFoundation • CLR (commonlanguageruntime) • WPF (Windows PresentationFoundation) controls • DLR (dynamiclanguageruntime)

17. Silverlight Platform • Almacenamiento aislado (Isolatedstorage) • Programación asincrona • Administración de ficheros (File Open) • Interacción entre el control y HTML • Serializacion (JSON y XML) • Packaging (xap) • XML

18. Herramientas • Visual Studio 2008 + SP1 • Microsoft Expression • Blend + SP1 • Desing • Encoder • MSDN 2008 SP1 • Visual Studio Tools for Silverlight • Silverlight 2 SDK • Se pueden descargar de: • http://www.microsoft.com/downloads/

19. ¿Qué es WPF? • Markup and Code-Behind • Applications • Controls • Input and Commanding • Layout • Data Binding • Graphics • Animation • Media • Text and Typography • Documents

20. ¿Qué es Silverlight? • Markup and Code-Behind • Applications • Controls • Layout • Data • Data Binding • Graphics • Animation • Media

21. StandaloneApplications

22. Browser-HostedApplications

23. Markup and Code-Behind • WPF utiliza una programación basada en XML (XAML) y en codebehind, como por ejemplo asp.net (ASPX). • Markup • XAML es un lenguaje basado en XML para definir la UI de manera declarativa. • <Windowxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Title="Window with Button" Width="250" Height="100"> • <Button Name="button">Click Me!</Button> • </Window>

24. Markup and Code-Behind • Code-Behind • Es muy parecido a asp.net tenemos que definir cual es la clase que va implementar la funcionalidad de la ventana. • <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SDKSample.AWindow" Title="Window with Button" Width="250" Height="100"> • <Button Name="button“ Click="button_Click"> Click Me!</Button> • </Window>

25. Markup and Code-Behind • Code-Behind • Es muy parecido a asp.net tenemos que definir cual es la clase que va implementar la funcionalidad de la ventana. • usingSystem.Windows; // Window, RoutedEventArgs, MessageBox • namespaceSDKSample • { • publicpartialclassAWindow : Window • { • publicAWindow() • { • InitializeComponent(); • } • voidbutton_Click(objectsender, RoutedEventArgs e) • { • // Show message box whenbuttonisclicked • MessageBox.Show("Hello, Windows PresentationFoundation!"); • } • } • }

26. XAML • XAML es Extensible Application Markup Language • Está basado en XML • Jerárquico • Soporte para listas • Así es como se define la UI de las aplicaciones • Es un mapeo entre XML y los tipos del .NET Framework • Nodos -> Tipos • Atributos -> CLR Property o DependencyProperty

27. XAML • xmlns • xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" • xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" • xmlns:custom="clr-namespace:SDKSample;assembly=SDKSampleLibrary" • Namescope • Ambitosdentro de XAML para el nombre de los elementosdentro del arbol. • x:Name=“control” • FindName(“control”)

28. XAML • API para leer y guardar XAML desde código • XamlReader.Load • XamlReader.Parse • XamlWriter.Save

29. demo trabajo con XAML

30. Lab01 xaml

31. Controls • Buttons • Button and RepeatButton. • Digital Ink • InkCanvas and InkPresenter. • Documents: • DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer, and StickyNoteControl. • Input: • TextBox, RichTextBox, and PasswordBox.

32. Controls • Layout: • Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window, and WrapPanel. • Media: • Image, MediaElement, and SoundPlayerAction. • Menus: • ContextMenu, Menu, and ToolBar. • Navigation: • Frame, Hyperlink, Page, NavigationWindow, and TabControl.

33. Controls • Selection: • CheckBox, ComboBox, ListBox, TreeView, and RadioButton, Slider. • User Information: • AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock, and ToolTip.

34. Controls • Layout: • Canvas, StackPanel, Grid • Button / Command • Button, HyperlinkButton, RepeatButton • Selection controls: • CheckBox, ComboBox, ListBox, RadioButton, Slider • Date display and selection: • Calendar, DatePicker • Information Display (read-only) • TextBlock

35. Controls • Text display and editing • PasswordBox, TextBox • Data display • DataGrid • Graphics and video display • Image, MultiScaleImage, MediaElement, InkPresenter • Aditional layout and grouping • Border, ContentControl, GridSplitter, ScrollBar, ScrollViewer, TabControl, Popup • User Help • ToolTip

36. Layout • Layout es la disposición de los elementos en pantalla. • Es una de las partes más importantes del desarrollo de software (UI) y está entre las que más CPU gasta. • En WPF hay controles que nos ayudan con el Layout. • Layoutcontrols: • Canvas: Child controls provide their own layout absolute. • DockPanel: Child controls are aligned to the edges of the panel. • Grid: Child controls are positioned by rows and columns. • StackPanel: Child controls are stacked either vertically or horizontally. • VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented. • WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

37. Layout • En la programación tradicional de UI cada control tenía su rectángulo para dibujarse. • Ahora hay dos medidas, Arrange y Measure • Measure: Le preguntamos a nuestro hijo en que tamaño se siente confortable. • Arrange: Organizamos o ordenamos los elementos hijos en función del tamaño disponible

38. Alignment, Margins and Padding • FrameworkElement define una serie de propiedades comunes a todos los controles de WPF. • HorizontalAlignment • Margin • Padding • VerticalAlignment • Es muy parecido a HTML • Desaparece el concepto de Location (Point) y Size (Size)

39. Alignment, Margins and Padding

40. Alignment, Margins and Padding

41. demo Layout

42. Lab02 Layout

43. DependecyProperty • Una de las principales motivaciones en el diseño de la arquitectura de WPF fue la preferencia sobre propiedades sobre los métodos o los eventos. • En WPF aparecen las DependencyProperty (propiedades de dependencia) que complementan el sistema de propiedades de CLR. • La misión de las DP es proveer un sistema para calcular el valor de una propiedad, notificaciones de cambio, coacción y metadatos.

44. DependecyProperty Notificaciones de cambio (ambos sentidos) Validaciones UI Objeto de negocio

45. DependencyProperty private inttemperatura; public intTemperatura { get { return temperatura; } set { temperatura = value; } }

46. DependencyProperty publicintTemperaturaDP { get { return (int)GetValue(TemperaturaDPProperty); } set { SetValue(TemperaturaDPProperty, value); } } publicstaticreadonlyDependencyProperty TemperaturaDPProperty = DependencyProperty.Register( "TemperaturaDP", typeof(int), typeof(Wigo), new UIPropertyMetadata(0));

47. DependencyProperty • Es un sistema flexible para definir propiedades. • Internamente se almacenan en un diccionario así que solamente tenemos los valores para las DP que tengamos establecidas. • Al ser un sistema dinámico podemos adjuntar (attach) Dependencyproperty de otras clases. • Resuelve el clásico ejemplo de usar la propiedad Tag (Object) para llevarse objetos personalizados. • Únicamente se deben usar para enlazar objetos con UI.

48. DependencyProperty • Tenemos dos delegados que nos permiten obtener notificaciones sobre cambios de variables y validación. • PropertyChangedCallback • CoerceValueCallback • Metadatos • AffectMeasure • AffectRender • DP de solo lectura (Read-Only)

49. demo Usando Dependency Properties

50. demo Creando Dependency Property personalizadas