Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WPF Demystified

2,253 views

Published on

From my September 25, 2008 MSDN Unleashed presentation in Austin, TX

Published in: Technology, Business
  • Be the first to comment

WPF Demystified

  1. 1. WPF Demystified Chris Koenig Developer Evangelist [email_address] http://blogs.msdn.com/chkoenig
  2. 2. Upcoming Events <ul><li>October </li></ul><ul><ul><li>9-10 – Tulsa TechFest </li></ul></ul><ul><ul><li>20-22 – in.Telligent Conference </li></ul></ul><ul><li>November </li></ul><ul><ul><li>4 – Election Day (Rock the Vote!) </li></ul></ul><ul><ul><li>14 – Dallas Agile.NET Conference </li></ul></ul><ul><ul><li>18-20 – MSDN TechDays (Dallas) </li></ul></ul><ul><li>December </li></ul><ul><ul><li>8-10 – VSLive! Dallas </li></ul></ul><ul><li>January </li></ul><ul><ul><li>16-18 – We Are Microsoft </li></ul></ul>
  3. 3. We Are Microsoft / GiveCamp <ul><li>Volunteer event </li></ul><ul><li>Building web applications for local-area charities & non-profits </li></ul><ul><li>January 16-18 at BravoTECH </li></ul><ul><li>Very rewarding experience! </li></ul><ul><li>http://www.wearemicrosoft.com </li></ul><ul><li>http://www.givecamp.org </li></ul>
  4. 4. What Will We Cover? <ul><li>Essential concepts of Windows Presentation Foundation </li></ul><ul><li>How to create a data-bound, service based WPF application </li></ul>
  5. 5. Helpful Experience <ul><li>User Interface development </li></ul><ul><li>.NET language </li></ul><ul><ul><li>VB </li></ul></ul><ul><ul><li>C# </li></ul></ul><ul><li>Familiar with XML </li></ul><ul><li>Visual Studio 2008 </li></ul>Level 100
  6. 6. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  7. 7. WPF Advantages <ul><li>Composable Elements </li></ul><ul><li>Flexible layout engine </li></ul><ul><li>Powerful data-binding architecture </li></ul><ul><li>Impressive print, font and document capabilities </li></ul>
  8. 8. WPF Advantages <ul><li>Lookless controls </li></ul><ul><li>Styles and Templates </li></ul><ul><li>Full integration of all UI disciplines </li></ul>
  9. 9. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  10. 10. WPF Applications <ul><li>Create WPF application with </li></ul><ul><ul><li>Visual Studio 2008 </li></ul></ul><ul><ul><li>Expression Blend </li></ul></ul><ul><li>A WPF application is managed code </li></ul><ul><ul><li>It runs on the .NET 2.0 runtime </li></ul></ul><ul><li>Some classes similar to the WinForms model </li></ul><ul><ul><li>Application class </li></ul></ul><ul><ul><li>Has Window class instead of Form class </li></ul></ul><ul><ul><li>Use .Show() or .ShowDialog() to display </li></ul></ul><ul><ul><li>Page class for forward/back navigation </li></ul></ul><ul><li>Host WinForms controls on WPF windows </li></ul><ul><li>Host WPF controls on Winform forms </li></ul>
  11. 11. Creating WPF application in Visual Studio 2008
  12. 12. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  13. 13. XAML <ul><li>XAML is a declarative programming language </li></ul><ul><li>Tool friendly: Easy to persist UI structure in XAML </li></ul><ul><ul><li>Expression Blend, ZAM 3D, Visual Studio </li></ul></ul><ul><li>XAML is parsed by dedicated parser </li></ul><ul><ul><li>Parser converts the tree of XML into a instances of objects </li></ul></ul><ul><ul><li>Most .NET types can be stored in XAML tree </li></ul></ul><ul><ul><ul><li>Most likely that these will be Visual items </li></ul></ul></ul><ul><li>WPF, WF, Silverlight & XPS use XAML </li></ul><ul><ul><li>Silverlight XAML is a sub-set of WPF XAML </li></ul></ul>
  14. 14. XAML
  15. 15. XAML
  16. 16. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  17. 17. Layout <ul><li>WPF includes a flexible, panel based layout engine </li></ul><ul><li>What is layout? </li></ul><ul><ul><li>Measuring and arranging a region of WPF UI </li></ul></ul><ul><ul><li>All layout is handled by panels </li></ul></ul><ul><ul><li>Panel has ultimate control over every child </li></ul></ul><ul><ul><ul><li>Child size, location, ZOrder </li></ul></ul></ul><ul><ul><ul><li>Child location relative to other children </li></ul></ul></ul><ul><li>Frees you from hard coding sizes/locations </li></ul><ul><ul><li>Mix and combine panels </li></ul></ul>
  18. 18. Layout <ul><li>Child communicates with host panel via Attached properties </li></ul><ul><ul><li>Inform their containing panel of desired layout </li></ul></ul><ul><ul><li>Example: Grid.Column = &quot;3&quot; </li></ul></ul><ul><ul><li>Each panel handles one type of layout </li></ul></ul><ul><ul><li>Canvas: Absolute positioning </li></ul></ul><ul><ul><li>StackPanel: Children stacked horizontal/vertical </li></ul></ul><ul><ul><li>WrapPanel: Stacked, with multi children per line </li></ul></ul><ul><ul><li>DockPanel: Attach child to side of panel </li></ul></ul><ul><ul><li>Grid: Create rows/columns for children </li></ul></ul><ul><li>Panel model is extensible with your own panels </li></ul>
  19. 19. Layout
  20. 20. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  21. 21. Styles <ul><li>Styles provide a convenient way to itemize a set of property values for an element type </li></ul><ul><ul><li>Example: Set font attributes for all textboxes </li></ul></ul><ul><li>To define a Style </li></ul><ul><ul><li>Styles are defined in a Resource element </li></ul></ul><ul><ul><li>Any element in XAML can have a resource section </li></ul></ul><ul><ul><li>Usual locations are Page, Window and Application level </li></ul></ul><ul><ul><li>Named styles have a x:Key value </li></ul></ul><ul><ul><li>Use TargetType to limit style to one element type </li></ul></ul>
  22. 22. Styles <ul><li>To apply a Style to an Element </li></ul><ul><ul><li>Reference the Style by setting the Style attribute </li></ul></ul><ul><ul><li>Use the Markup Extension syntax '{}' </li></ul></ul>
  23. 23. Styles
  24. 24. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  25. 25. Using Services and DBs <ul><li>Accessing data from WPF </li></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>LINQ </li></ul></ul><ul><ul><ul><li>LINQ to Objects </li></ul></ul></ul><ul><ul><ul><li>LINQ to SQL </li></ul></ul></ul><ul><ul><ul><li>LINQ to XML </li></ul></ul></ul><ul><ul><ul><li>LINQ to [your provider goes here] </li></ul></ul></ul><ul><ul><li>ADO.NET </li></ul></ul><ul><ul><li>Entity Framework </li></ul></ul><ul><li>Invoking Services from WPF </li></ul><ul><ul><li>WCF </li></ul></ul><ul><ul><li>SOAP, REST, WS-* </li></ul></ul>
  26. 26. Using Services and DBs <ul><li>ADO.NET Data Service </li></ul><ul><ul><li>Code name “Astoria” </li></ul></ul><ul><ul><li>Exposes SQL data over HTTP via REST endpoints </li></ul></ul><ul><ul><li>Examples: http://localhost/CohoDS.svc/Wines </li></ul></ul><ul><ul><li>… Northwind.svc/Customers?$filter=contains(City,'Kent') </li></ul></ul><ul><li>Authoring the Data Service </li></ul><ul><ul><li>Website </li></ul></ul><ul><ul><li>ADO.NET Entity Data Model </li></ul></ul><ul><ul><li>ADO.NET Data Service </li></ul></ul><ul><li>Consuming the DataService </li></ul><ul><ul><li>Generate proxy with DataSvcUtil.exe </li></ul></ul><ul><ul><li>Use “Add Service Reference” </li></ul></ul>
  27. 27. Astoria Data Services
  28. 28. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  29. 29. Data Binding <ul><li>Binding overview </li></ul><ul><ul><li>WPF synchronizes a data source and data target </li></ul></ul><ul><ul><li>Add binding to target element with {Binding ***} </li></ul></ul><ul><li>Change notification </li></ul><ul><ul><li>WPF dependency system updates target upon source changes provided: </li></ul></ul><ul><ul><ul><li>Source must implement IPropertyNotifyChanged </li></ul></ul></ul><ul><li>Single binding </li></ul><ul><ul><li>Bind a target to a single property on source </li></ul></ul><ul><ul><li>Example: TextBlock.Text to Customer.Age </li></ul></ul><ul><li>List binding </li></ul><ul><ul><li>Bind a target to a array, collection etc. </li></ul></ul><ul><ul><li>Example: Treeview.ItemsSource to Collection object </li></ul></ul>
  30. 30. Data Templates <ul><li>Templates provide a convenient way to centralize the replacement UI for: </li></ul><ul><ul><li>Tabular data </li></ul></ul><ul><ul><li>Hierarchical data </li></ul></ul><ul><ul><li>Controls </li></ul></ul><ul><li>Data Template </li></ul><ul><ul><li>Define the UI for one Type </li></ul></ul><ul><ul><ul><li>Example: Customer class </li></ul></ul></ul><ul><ul><ul><li>Render UI with six TextBlock objects and one Image </li></ul></ul></ul>
  31. 31. Data Templates
  32. 32. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  33. 33. Custom Controls <ul><li>Custom elements </li></ul><ul><ul><li>Less need for custom elements in WPF </li></ul></ul><ul><ul><li>First consider getting custom look via </li></ul></ul><ul><ul><ul><li>Composed UI </li></ul></ul></ul><ul><ul><ul><li>Styles </li></ul></ul></ul><ul><ul><ul><li>Templates </li></ul></ul></ul><ul><li>If you must create custom element choose base: </li></ul><ul><ul><li>Existing control </li></ul></ul><ul><ul><li>Control </li></ul></ul><ul><ul><li>UserControl </li></ul></ul>
  34. 34. Custom Controls <ul><li>User control benefits </li></ul><ul><ul><li>Simple </li></ul></ul><ul><ul><li>Easy to compose sub-elements into new class </li></ul></ul><ul><ul><li>Easily add custom element to UI tree </li></ul></ul><ul><li>Control library author </li></ul><ul><ul><li>Create custom User Control </li></ul></ul><ul><ul><li>Compiled into assembly </li></ul></ul><ul><li>Control consumer </li></ul><ul><ul><li>Add reference to assembly </li></ul></ul><ul><ul><li>Bring namespace into scope with xmlns attribute </li></ul></ul>
  35. 35. User Controls
  36. 36. Agenda <ul><li>Discover the top WPF benefits </li></ul><ul><li>Creating a WPF application </li></ul><ul><li>XAML </li></ul><ul><li>Layout </li></ul><ul><li>Styles </li></ul><ul><li>Using services and databases </li></ul><ul><li>Data Templates </li></ul><ul><li>User Controls </li></ul><ul><li>Control Templates </li></ul>
  37. 37. Control Templates <ul><li>All controls in WPF are lookless </li></ul><ul><ul><li>Each has a default UI template </li></ul></ul><ul><ul><li>We can replace default template with our own control template </li></ul></ul><ul><ul><li>Any valid UI element can be part of template </li></ul></ul><ul><ul><li>Templates also support binding </li></ul></ul><ul><ul><li>Templates do not change behavior of element </li></ul></ul>
  38. 38. Control Templates
  39. 39. Session Summary <ul><li>WPF is a rich UI programming framework </li></ul><ul><li>Since WPF is managed code, working with .NET APIs is easy and familiar </li></ul><ul><li>Core concept is the composable UI model </li></ul><ul><ul><li>Create UI out of any valid WPF element </li></ul></ul><ul><ul><li>Mix and merge elements </li></ul></ul><ul><ul><li>Formalize these replacement parts with Styles and Templates </li></ul></ul>
  40. 40. For More Information <ul><li>Online Resources </li></ul><ul><ul><li>msdn.microsoft.com </li></ul></ul><ul><ul><li>windowsclient.net </li></ul></ul><ul><ul><li>wpfwiki.com </li></ul></ul><ul><li>Local Community </li></ul><ul><ul><li>adnug.org </li></ul></ul><ul><ul><li>agileaustin.org </li></ul></ul><ul><ul><li>southcentraldevelopers.com </li></ul></ul>
  41. 41. Microsoft Press Publications For the latest titles, visit www.microsoft.com/learning/books/devtools
  42. 42. Non-Microsoft Publications These books can be found and purchased at all major book stores and online retailers
  43. 43. Training Resources For training information and availability www.microsoft.com/learning Course ID Title 6460A Windows Presentation Foundation
  44. 44. RAMP-UP <ul><li>Are you ready to take your career as a developer to the next level? </li></ul><ul><li>Looking for a learning experience that is designed for you? </li></ul><ul><li>Join MSDN Ramp Up and Summit Your Career! </li></ul><ul><li>MSDN Ramp Up is your online source that provides free training and technical resources to help take your development skills to the next level. </li></ul><ul><li>Step-by-Step training plans to build your development skills. </li></ul><ul><li>Premium technical content created by expert developers for developers. </li></ul><ul><li>Access to valuable online e-learning, e-references, and virtual labs. </li></ul><ul><li>50% discount on select certification exams and 30% discount on Microsoft Press training kits. </li></ul><ul><li>Join Ramp Up for free today! </li></ul><ul><li>Go to: http://msdn.microsoft.com/rampup </li></ul>

×