WPF Demystified

2,182 views
2,100 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,182
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
114
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • <slideTitle include=7>title slide/> <keywords></keywords> <keyMessage></keyMessage> <slideBuilds>0</slideBuilds> <slideScript> Hello and welcome to this MSDN session on 'WPF demystified'. my name is {insert name} </slideScript> <slidetransition> <transition length=7>Let us start this session by going into more detail on exactly what we will be covering.</transition> </slidetransition> <comment></comment> <moreInformation> <item></item> </moreInformation>
  • 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>

    ×