SlideShare a Scribd company logo
Programming Windows Presentation Foundation (XAML) Mark Davey IT Specialist Toyota Motor Manufacturing Indiana Inc.
Agenda Windows Presentation Foundation Overview What is XAML, logical trees Programming Development & Deployment Getting Windows Presentation Foundation & Tools
.NET At The Core
Windows Presentation Foundation A productive, unified approach to UI, media and documents to deliver unmatched user experience
New Document Technologies
2D Graphics, 3D Graphics, Imaging 2D Graphics 3D Graphics Imaging
Key Scenarios Next-Gen Windows Smart Client applications: Installed desktop applications Browser applications (XAML Browser Application) Flexible deployment
Audio & Video Formats: WMV, MPEG, Some AVIs Can be synchronized with animations Windows Media Foundation used to instantiate playback machinery into a DirectShow graph <Border Width=&quot;400&quot;  BorderBrush=&quot;Green&quot;  BorderThickness=&quot;9&quot;> <StackPanel> <MediaElement Source=&quot;aero.wmv&quot; /> <Button>Hello</Button> </StackPanel> </Border>
ClearType & Antialiasing Sub-pixel positioning & natural widths
WPF/E aka Silverlight Microsoft realized that RIA (Rich Internet Applications) are the future. HTML/DOM/AJAX combo difficult to use and limited Adobe Flash rapidly gaining market share YouTube, Yahoo start page, Microsoft own pages Video over internet very powerful application  Almost everything available in WPF except 3D Not limited to Vista/XP2, Available on Mac and open source versions on Linux Full integration with .NET languages (C# VB.NET) and DLR (such as Ruby & Python) Probably more important than WPF, probably standard Microsoft development medium in after 2009 due to its flexibility.
Building & Deploying WPF Apps
WPF Architecture Property Engine Input / Eventing System .NET Framework 2.0 Desktop Windows Manager Media Integration Layer DirectX Windows Vista Display Driver (LDDM) Windows Media Foundation Composition Engine Print Spooler Managed Unmanaged Application Services Deployment Services Databinding USER INTERFACE SERVICES XAML Accessibility Property System Input & Eventing BASE SERVICES DOCUMENT SERVICES Packaging Services XPS Documents Animation 2D 3D Audio Imaging Text Video Effects Composition Engine MEDIA INTEGRATION LAYER Controls Layout Windows Presentation Foundation XPS Viewer
Designer-Developer Productivity Microsoft Tools for Designers & Developers Declarative Programming through XAML Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Designers design With XAML designers & developers can streamline their collaboration Developers add business logic
Declarative Programming Through XAML XAML = Extensible Application Markup Language Easily toolable, declarative markup Code and content are separate Can be rendered in the browser / standalone application <Button Width=&quot;100&quot;> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = &quot;OK&quot;; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = &quot;OK&quot; b1.Background = New _   SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET
Why XAML It seems strangle to use XML as a declarative language that Microsoft would base their future on. Why? Concise implementation (Similar to HTML) Human Readable (except Vector & Meshes) Interoperable between multiple tools such as Blend, Orcas, XAMLPAD
Controls, Templates, Styles & Resources, Layouts, Animation Animation, Triggers, Timelines < StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click&quot;> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard> <ColorAnimation To=&quot;Yellow&quot; Duration=&quot;0:0:0.5“ Storyboard.TargetName=&quot;TheBrush&quot;  Storyboard.TargetProperty=&quot;Color&quot; /> <DoubleAnimation To=&quot;45&quot; Duration=&quot;0:0:2&quot; Storyboard.TargetName=&quot;LowerEllipseTransform&quot;  Storyboard.TargetProperty=&quot;Angle&quot; /> ... </StackPanel.Triggers> …  remainder of contents of StackPanel, including x:Name'd  TheBrush and LowerEllipseTransform … </StackPanel> UI Services Templates Layout  Controls Library Styles and Resources Annotation Templated  Button
XAML the starting point If you serialized a set of WPF objects XAML would be produced.  Most Microsoft applications generate WPF in XAML format. Elements & attributes (WPF+Objects+XML=XAML) If you serialized a set of WPF objects XAML would be produced
Logical Tree Visual Tree is Logical Tree Expanded using local themes Based up not just XAML but current windows configuration Themes. Can change based upon user UI
Visual Tree Visual Tree is Logical Tree Expanded using local themes Based up not just XAML but current windows  Themes. Can change based upon user UI
Dependency Properties Multiple properties for each control (up to a 100) impossible to set all on every single control Much like CSS where properties set once for whole Special Features  Change notification Property value inheritance Support for multiple providers
Attached Properties Effectively attached to arbitrary objects to set dependency properties Dependence Properties cannot be sen without being attached
Routed Events Events do not just happen on the object but also travel the tree and can be processed by other objects.  Tunneling Bubbling Direct
WPF Document APIs Use Custom Viewer Create / Use Package Serialize WPF Content  To XPS Create / Use  XPS Documents Create / Use Documents w/ Restricted Permissions Packaging Services XpsDocument curDoc = new XpsDocument(Package.Open(&quot;foo.xps&quot;)); curDoc.SignDigitally(cert …); curDoc.Close();
2D Graphics Drawing (Images ,Video, Geometry) Brushes can be many different things – images, gradients, solid colors.  Polygons Demo of 2D graphics using Blend
Data Binding UI can be bound to CLR objects and XML Dependency properties can also be bound to ADO.NET and objects associated with Web Services and Web properties   Sort, filter, and group views can be generated on top of the data Data templates can be applied to data Simple RSS demo Layout & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox  Name=&quot;myListBox&quot; Background=&quot;HoneyDew&quot; ItemsSource=&quot;{Binding  {StaticResource myDataSource}}&quot;  </ListBox> </StackPanel> Binding Target Binding Source Dependency Object Object Dependency Property Property TwoWay OneWay OneWayToSource
Transforms Dependent properties can be changed allowing manipulation of objects on the screen. Parent object can hold many child objects that are all manipulated at one time. Often used with animation
Animation An dependency property can be manipulated with a animation object Drawing Images Brushes Shapes <EventTrigger RoutedEvent=&quot;Canvas.Loaded&quot;> <BeginStoryboard> <Storyboard x:Name=&quot;Ski&quot;> <DoubleAnimationUsingKeyFrames BeginTime=&quot;00:00:00&quot; Storyboard.TargetName=&quot;Canvas3&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)&quot;> <SplineDoubleKeyFrame KeyTime=&quot;00:00:00&quot; Value=&quot;0.2&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:02&quot; Value=&quot;0.3&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:03&quot; Value=&quot;0.4&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:05&quot; Value=&quot;0.4&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:06&quot; Value=&quot;0.5&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:07&quot; Value=&quot;0.6&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:08&quot; Value=&quot;0.7&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:08.3000000&quot; Value=&quot;-0.7&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:09&quot; Value=&quot;-0.8&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:10&quot; Value=&quot;-1&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:11&quot; Value=&quot;-2&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:12&quot; Value=&quot;-3&quot;/> </DoubleAnimationUsingKeyFrames>
Multimedia Key feature of WPF and Silverlight allows integration of video, audio and speech TAG are  Soundplayer (limited to WAV files only) MediaPlayer (MP3 with full control) MediaElement Video
Documents <FlowDocumentReader> is a class that can read documents  XAML documents can be updated on the fly and built at runtime. Excellent example is using XSLT to create nice documents from simple markup tags. Demo of Rich Reading Experience
3D Graphics Lights, Camera Action! Graphics in 3D are totally different with different controls/objects Viewport3D – a window into a 3D world Camera <Viewport3D.Camera> Objects <ModelVisual3D.Content> Materials <ModelVisual3D.Material> Brush Mesh <ModelVisual3D.Geometry>
Viewport3D – a window into a 3D world A 3D window Camera Lights Action Star
Materials <ModelVisual3D.Material> Brush Just like 2D drawing 3D uses brushes which can be a solid color or a picture < GeometryModel3D x:Name=&quot;Roof&quot;> <GeometryModel3D.Material> <DiffuseMaterial Brush=&quot;Blue&quot;/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions=&quot;-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25&quot; TriangleIndices=&quot;0 1 2 0 2 3 4 5 6 4 6 7&quot;/> </GeometryModel3D.Geometry> </GeometryModel3D> <DiffuseMaterial> <DiffuseMaterial.Brush> <ImageBrush ImageSource=&quot;pack://siteoforigin:,,,/Sample Models/Tiger.bmp&quot; /> </DiffuseMaterial.Brush> </DiffuseMaterial>
Mesh <ModelVisual3D.Geometry> Each object is made up of a series of triangles or multisided polygons. A Series of 3D point represented as 3 numbers X,Y,Z.  The order of the points represents the face. < GeometryModel3D x:Name=&quot;Roof&quot;> <GeometryModel3D.Material> <DiffuseMaterial Brush=&quot;Blue&quot;/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions=&quot;-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25&quot; TriangleIndices=&quot;0 1 2 0 2 3 4 5 6 4 6 7&quot;/> </GeometryModel3D.Geometry> </GeometryModel3D>
Interoperability Incrementally embrace WPF, while  leveraging existing investments. WPF - Windows Forms Interoperability WPF - HWNDs
Getting Started with WPF
Next Steps First Buy  Title: Windows Presentation Foundation Unleashed Author: Adam Nathan, Sams  (Currently the best book on the subject) Download the Blend 2 May Preview Download the Net 3.0 SDK Download the extensions to Visual Studio 2005. Click on
Availability & Packaging Microsoft Development SDK for Visual Studio 2005 Development  Microsoft Development Componets Windows Expression Blend 2  Visual Studio “Orcas” Component of .NET FramICRODmework 3.0 for  Q2 2007 Q2 Q4 Q1 2007 Q3 Q2 Q3 Q4
WPF Summary Deliver Innovative User Experiences Increase Developer-Designer Productivity Achieve Flexible Application Deployment Leverage Existing Code Base & Skill Set
WPF Resources WPF @ Windows Vista Developer Center http://msdn.microsoft.com/windowsvista/building/presentation/   WPF/.NET Framework 3.0 Community Site Microsoft Expression www.microsoft.com/expression

More Related Content

Similar to Presentation wpf (20)

PPT
Cleveland Silverlight Firestarter - XAML Basics
Sarah Dutkiewicz
 
PPTX
Yahoo! On Microsoft .NET 3.0 and Microsoft Expression
goodfriday
 
PPT
WPF Windows Presentation Foundation A detailed overview Version1.2
Shahzad
 
PPTX
XAML: One Language to Rule Them All
Frank La Vigne
 
PPT
Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Frank La Vigne
 
PPTX
Expression Blend for Developers
READIFY
 
PPTX
WPF Deep Dive
Aniruddha Chakrabarti
 
PPT
Catching up on Rich Clients Part 1 of 2
ukdpe
 
PPT
A Tour of Windows Presentation Foundation (WPF)
ukdpe
 
PPTX
Wpf Tech Overview2009
Our Community Exchange LLC
 
PPT
Silverlight 2
Dave Bost
 
PPT
Introduction to XAML and WPF
Doncho Minkov
 
PPT
WPF Concepts
Doncho Minkov
 
PPTX
Windows phone and azure
★ Dovydas Navickas
 
PDF
Silverlight 2 For Developers
Mithun T. Dhar
 
PPTX
xaml overview
Sanat Maharjan
 
PPTX
Chpater1
Engleang Sam
 
PPT
MSDN Unleashed: WPF Demystified
Dave Bost
 
PPT
WPF Graphics and Animations
Doncho Minkov
 
PPTX
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
goodfriday
 
Cleveland Silverlight Firestarter - XAML Basics
Sarah Dutkiewicz
 
Yahoo! On Microsoft .NET 3.0 and Microsoft Expression
goodfriday
 
WPF Windows Presentation Foundation A detailed overview Version1.2
Shahzad
 
XAML: One Language to Rule Them All
Frank La Vigne
 
Re-use Your Skills and Code to Expand the Reach of Your Apps with Silverlight
Frank La Vigne
 
Expression Blend for Developers
READIFY
 
WPF Deep Dive
Aniruddha Chakrabarti
 
Catching up on Rich Clients Part 1 of 2
ukdpe
 
A Tour of Windows Presentation Foundation (WPF)
ukdpe
 
Wpf Tech Overview2009
Our Community Exchange LLC
 
Silverlight 2
Dave Bost
 
Introduction to XAML and WPF
Doncho Minkov
 
WPF Concepts
Doncho Minkov
 
Windows phone and azure
★ Dovydas Navickas
 
Silverlight 2 For Developers
Mithun T. Dhar
 
xaml overview
Sanat Maharjan
 
Chpater1
Engleang Sam
 
MSDN Unleashed: WPF Demystified
Dave Bost
 
WPF Graphics and Animations
Doncho Minkov
 
Building AOL's High Performance, Enterprise Wide Mail Application With Silver...
goodfriday
 

Recently uploaded (20)

PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
PDF
Python basic programing language for automation
DanialHabibi2
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
July Patch Tuesday
Ivanti
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
Python basic programing language for automation
DanialHabibi2
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
July Patch Tuesday
Ivanti
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
Ad

Presentation wpf

  • 1. Programming Windows Presentation Foundation (XAML) Mark Davey IT Specialist Toyota Motor Manufacturing Indiana Inc.
  • 2. Agenda Windows Presentation Foundation Overview What is XAML, logical trees Programming Development & Deployment Getting Windows Presentation Foundation & Tools
  • 3. .NET At The Core
  • 4. Windows Presentation Foundation A productive, unified approach to UI, media and documents to deliver unmatched user experience
  • 6. 2D Graphics, 3D Graphics, Imaging 2D Graphics 3D Graphics Imaging
  • 7. Key Scenarios Next-Gen Windows Smart Client applications: Installed desktop applications Browser applications (XAML Browser Application) Flexible deployment
  • 8. Audio & Video Formats: WMV, MPEG, Some AVIs Can be synchronized with animations Windows Media Foundation used to instantiate playback machinery into a DirectShow graph <Border Width=&quot;400&quot; BorderBrush=&quot;Green&quot; BorderThickness=&quot;9&quot;> <StackPanel> <MediaElement Source=&quot;aero.wmv&quot; /> <Button>Hello</Button> </StackPanel> </Border>
  • 9. ClearType & Antialiasing Sub-pixel positioning & natural widths
  • 10. WPF/E aka Silverlight Microsoft realized that RIA (Rich Internet Applications) are the future. HTML/DOM/AJAX combo difficult to use and limited Adobe Flash rapidly gaining market share YouTube, Yahoo start page, Microsoft own pages Video over internet very powerful application Almost everything available in WPF except 3D Not limited to Vista/XP2, Available on Mac and open source versions on Linux Full integration with .NET languages (C# VB.NET) and DLR (such as Ruby & Python) Probably more important than WPF, probably standard Microsoft development medium in after 2009 due to its flexibility.
  • 12. WPF Architecture Property Engine Input / Eventing System .NET Framework 2.0 Desktop Windows Manager Media Integration Layer DirectX Windows Vista Display Driver (LDDM) Windows Media Foundation Composition Engine Print Spooler Managed Unmanaged Application Services Deployment Services Databinding USER INTERFACE SERVICES XAML Accessibility Property System Input & Eventing BASE SERVICES DOCUMENT SERVICES Packaging Services XPS Documents Animation 2D 3D Audio Imaging Text Video Effects Composition Engine MEDIA INTEGRATION LAYER Controls Layout Windows Presentation Foundation XPS Viewer
  • 13. Designer-Developer Productivity Microsoft Tools for Designers & Developers Declarative Programming through XAML Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Designers design With XAML designers & developers can streamline their collaboration Developers add business logic
  • 14. Declarative Programming Through XAML XAML = Extensible Application Markup Language Easily toolable, declarative markup Code and content are separate Can be rendered in the browser / standalone application <Button Width=&quot;100&quot;> OK <Button.Background> LightBlue </Button.Background> </Button> XAML Button b1 = new Button(); b1.Content = &quot;OK&quot;; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; C# Dim b1 As New Button b1.Content = &quot;OK&quot; b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100 VB.NET
  • 15. Why XAML It seems strangle to use XML as a declarative language that Microsoft would base their future on. Why? Concise implementation (Similar to HTML) Human Readable (except Vector & Meshes) Interoperable between multiple tools such as Blend, Orcas, XAMLPAD
  • 16. Controls, Templates, Styles & Resources, Layouts, Animation Animation, Triggers, Timelines < StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click&quot;> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard> <ColorAnimation To=&quot;Yellow&quot; Duration=&quot;0:0:0.5“ Storyboard.TargetName=&quot;TheBrush&quot; Storyboard.TargetProperty=&quot;Color&quot; /> <DoubleAnimation To=&quot;45&quot; Duration=&quot;0:0:2&quot; Storyboard.TargetName=&quot;LowerEllipseTransform&quot; Storyboard.TargetProperty=&quot;Angle&quot; /> ... </StackPanel.Triggers> … remainder of contents of StackPanel, including x:Name'd TheBrush and LowerEllipseTransform … </StackPanel> UI Services Templates Layout Controls Library Styles and Resources Annotation Templated Button
  • 17. XAML the starting point If you serialized a set of WPF objects XAML would be produced. Most Microsoft applications generate WPF in XAML format. Elements & attributes (WPF+Objects+XML=XAML) If you serialized a set of WPF objects XAML would be produced
  • 18. Logical Tree Visual Tree is Logical Tree Expanded using local themes Based up not just XAML but current windows configuration Themes. Can change based upon user UI
  • 19. Visual Tree Visual Tree is Logical Tree Expanded using local themes Based up not just XAML but current windows Themes. Can change based upon user UI
  • 20. Dependency Properties Multiple properties for each control (up to a 100) impossible to set all on every single control Much like CSS where properties set once for whole Special Features Change notification Property value inheritance Support for multiple providers
  • 21. Attached Properties Effectively attached to arbitrary objects to set dependency properties Dependence Properties cannot be sen without being attached
  • 22. Routed Events Events do not just happen on the object but also travel the tree and can be processed by other objects. Tunneling Bubbling Direct
  • 23. WPF Document APIs Use Custom Viewer Create / Use Package Serialize WPF Content To XPS Create / Use XPS Documents Create / Use Documents w/ Restricted Permissions Packaging Services XpsDocument curDoc = new XpsDocument(Package.Open(&quot;foo.xps&quot;)); curDoc.SignDigitally(cert …); curDoc.Close();
  • 24. 2D Graphics Drawing (Images ,Video, Geometry) Brushes can be many different things – images, gradients, solid colors. Polygons Demo of 2D graphics using Blend
  • 25. Data Binding UI can be bound to CLR objects and XML Dependency properties can also be bound to ADO.NET and objects associated with Web Services and Web properties Sort, filter, and group views can be generated on top of the data Data templates can be applied to data Simple RSS demo Layout & Databinding <StackPanel> <Label>Select A Customer</Label> <ListBox Name=&quot;myListBox&quot; Background=&quot;HoneyDew&quot; ItemsSource=&quot;{Binding {StaticResource myDataSource}}&quot; </ListBox> </StackPanel> Binding Target Binding Source Dependency Object Object Dependency Property Property TwoWay OneWay OneWayToSource
  • 26. Transforms Dependent properties can be changed allowing manipulation of objects on the screen. Parent object can hold many child objects that are all manipulated at one time. Often used with animation
  • 27. Animation An dependency property can be manipulated with a animation object Drawing Images Brushes Shapes <EventTrigger RoutedEvent=&quot;Canvas.Loaded&quot;> <BeginStoryboard> <Storyboard x:Name=&quot;Ski&quot;> <DoubleAnimationUsingKeyFrames BeginTime=&quot;00:00:00&quot; Storyboard.TargetName=&quot;Canvas3&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)&quot;> <SplineDoubleKeyFrame KeyTime=&quot;00:00:00&quot; Value=&quot;0.2&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:02&quot; Value=&quot;0.3&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:03&quot; Value=&quot;0.4&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:05&quot; Value=&quot;0.4&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:06&quot; Value=&quot;0.5&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:07&quot; Value=&quot;0.6&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:08&quot; Value=&quot;0.7&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:08.3000000&quot; Value=&quot;-0.7&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:09&quot; Value=&quot;-0.8&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:10&quot; Value=&quot;-1&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:11&quot; Value=&quot;-2&quot;/> <SplineDoubleKeyFrame KeyTime=&quot;00:00:12&quot; Value=&quot;-3&quot;/> </DoubleAnimationUsingKeyFrames>
  • 28. Multimedia Key feature of WPF and Silverlight allows integration of video, audio and speech TAG are Soundplayer (limited to WAV files only) MediaPlayer (MP3 with full control) MediaElement Video
  • 29. Documents <FlowDocumentReader> is a class that can read documents XAML documents can be updated on the fly and built at runtime. Excellent example is using XSLT to create nice documents from simple markup tags. Demo of Rich Reading Experience
  • 30. 3D Graphics Lights, Camera Action! Graphics in 3D are totally different with different controls/objects Viewport3D – a window into a 3D world Camera <Viewport3D.Camera> Objects <ModelVisual3D.Content> Materials <ModelVisual3D.Material> Brush Mesh <ModelVisual3D.Geometry>
  • 31. Viewport3D – a window into a 3D world A 3D window Camera Lights Action Star
  • 32. Materials <ModelVisual3D.Material> Brush Just like 2D drawing 3D uses brushes which can be a solid color or a picture < GeometryModel3D x:Name=&quot;Roof&quot;> <GeometryModel3D.Material> <DiffuseMaterial Brush=&quot;Blue&quot;/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions=&quot;-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25&quot; TriangleIndices=&quot;0 1 2 0 2 3 4 5 6 4 6 7&quot;/> </GeometryModel3D.Geometry> </GeometryModel3D> <DiffuseMaterial> <DiffuseMaterial.Brush> <ImageBrush ImageSource=&quot;pack://siteoforigin:,,,/Sample Models/Tiger.bmp&quot; /> </DiffuseMaterial.Brush> </DiffuseMaterial>
  • 33. Mesh <ModelVisual3D.Geometry> Each object is made up of a series of triangles or multisided polygons. A Series of 3D point represented as 3 numbers X,Y,Z. The order of the points represents the face. < GeometryModel3D x:Name=&quot;Roof&quot;> <GeometryModel3D.Material> <DiffuseMaterial Brush=&quot;Blue&quot;/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions=&quot;-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25&quot; TriangleIndices=&quot;0 1 2 0 2 3 4 5 6 4 6 7&quot;/> </GeometryModel3D.Geometry> </GeometryModel3D>
  • 34. Interoperability Incrementally embrace WPF, while leveraging existing investments. WPF - Windows Forms Interoperability WPF - HWNDs
  • 36. Next Steps First Buy Title: Windows Presentation Foundation Unleashed Author: Adam Nathan, Sams (Currently the best book on the subject) Download the Blend 2 May Preview Download the Net 3.0 SDK Download the extensions to Visual Studio 2005. Click on
  • 37. Availability & Packaging Microsoft Development SDK for Visual Studio 2005 Development Microsoft Development Componets Windows Expression Blend 2 Visual Studio “Orcas” Component of .NET FramICRODmework 3.0 for Q2 2007 Q2 Q4 Q1 2007 Q3 Q2 Q3 Q4
  • 38. WPF Summary Deliver Innovative User Experiences Increase Developer-Designer Productivity Achieve Flexible Application Deployment Leverage Existing Code Base & Skill Set
  • 39. WPF Resources WPF @ Windows Vista Developer Center http://msdn.microsoft.com/windowsvista/building/presentation/ WPF/.NET Framework 3.0 Community Site Microsoft Expression www.microsoft.com/expression

Editor's Notes

  • #2: Please replace the name and title here with your name and title.
  • #4: In 2001, we introduced .NET Framework. In Nov 2005, we released .NET Framework 2.0. Yet, there was a need to offer our customers additional functionality, such as better user experience in software and workflow. With Windows Vista, we are introducing Microsoft ® .NET Framework 3.0 (formerly named WinFX). .NET Framework 3.0 builds upon .NET Framework 2.0, with additional capabilities, such as Windows Presentation Foundation (WPF), Windows Communication Foundation (WCF), Windows Workflow Foundation (WF), and “Infocard.”
  • #5: Windows Presentation Foundation (WPF) is a productive, unified approach to UI, Media, and Documents that you can use to deliver unmatched user experiences to your customers.
  • #6: Open Document Specifications Open Packaging Conventions and XML Paper Specification (XPS) for use by devices and any application on any platform. WPF Document APIs Application programming interfaces (APIs) to manage package and content. XPS Print Path Print pipeline with XPS spool format and printer-page description language to speed and improve print job fidelity. New driver model. Print Driver for “Save As” A print-to-file converter for creating XPS Documents from any Microsoft Windows-based application. XPS Viewer A WPF utility that allow users to view, protect and print XPS Documents. Hosted in IE.
  • #7: Let’s look at the WPF support for 2D and 3D graphics, and imaging. Graphics - The following areas comprise the Windows Presentation Foundation graphic APIs. Brushes.  Use the Brush classes to paint areas with solid colors, patterns, images, and drawings. Shapes.  Use Shape classes to create and render 2-D geometric shapes. Imaging.  Use the imaging classes to encode, manipulate, and displays bitmaps, and to apply special effects such as glow and blur to images and vectors. Geometries.  Geometries, like shape objects, represent 2-D shapes. Geometries are more versatile than shape objects, in that they can be used to define curves, clipping regions, and hit-testing areas. Unlike shape objects, geometries do not participate in the layout system and cannot draw themselves to the screen. They can be rendered using other framework elements, controls, visuals, or brushes. Transformations.  Use the Transform classes to rotate, translate, scale, and apply other 2-D effects to geometries, visuals, brushes, framework elements, and controls. Animations.  Use the animation and timing APIs to make objects change color, move, spin, grow, shrink, and more. Visuals.   Visual objects are the building blocks of the Windows Presentation Foundation rendering system. The visual layer is the Windows Presentation Foundation equivalent to GDI. All Windows Presentation Foundation objects use visuals to draw to the screen. 3-D Graphics - The System.Windows.Media.Media3D namespace defines 3-D graphics primitives, transformations, and animations that can be used to create 3-D controls and graphics. Imaging Platform Basics Not the mainstream WPF usage, but critical for a class of customers Industrial strength, used extensively in the Windows Vista Shell 3rd party extensible bitmap CODEC architecture Microsoft-supplied CODECs for JPEG, TIFF, PNG, GIF, BMP, ICO Streams and NT Sections Thumbnails in the Windows Vista shell “ Mainline” encode / decode, explicit imaging operations, etc. Access through managed and native code Imaging engine in Windows Vista, can be used by Win32
  • #8: WPF is the next-generation Windows smart-client UI technology: Immersive Desktop applications – Includes rich ISV and LOB applications that can be deployed to Windows as a stand-alone client. Enterprise Intranet applications – A unique capability of WPF is that you can use the same code base to deploy a WPF app either as a stand-alone desktop client, or in the browser. This lets you maintain just one code base for enterprise applications that are needed in both deployment models - stand-alone and in the browser. This dramatically lowers TCO. Windows Media Center applications - Current Media Center spotlight apps are created mostly in DHTML. WPF offers a much more sophisticated visual toolbox to create a great user experience that scales to different form factors (from CRT monitors to laptop LCDs to big screen TVs), thanks to its DPI-independent resolution. End-users using Media Center Extender can also navigate using their remote controls Now that’s user experience! Premium Internet applications – As consumers, we may often be avid “super” users of certain internet applications, while at the same time being just casual users of most other internet applications. As avid users, we often expect an exclusive user experience that’s better than the norm. WPF (that is XAML Browser Applications or XBAPs), through its UI and media integration (audio, video, sound, animation, 2D, 3D, document services, styling, data binding, etc.), is a great platform to build these rich internet applications, where exclusivity is a requirement.
  • #9: WPF supports the following audio/video formats. Windows Media Video (. wmv ) files are Advanced Systems Format (.asf) files that include audio, video, or both compressed with Windows Media Audio (WMA) and Windows Media Video ( WMV ) codecs. MPEG (pronounced M-peg), which stands for Moving Picture Experts Group , is the name of family of standards used for coding audio-visual information (e.g., movies, video, music) in a digital compressed format. The major advantage of MPEG compared to other video and audio coding formats is that MPEG files are much smaller for the same quality. This is because MPEG uses very sophisticated compression techniques. AVI , an acronym for Audio Video Interleave , is a multimedia container format introduced by Microsoft in November 1992 , as part of the Video for Windows technology. AVI files contain both audio and video data in a standard container that allows simultaneous playback.
  • #10: WPF supports ClearType fonts, which results in better readibility and comprehension. Notice the difference between the upper text and the bottom text. WPF also supports alti-aliasing, which rounds off rough pixel edges. This again results is better content readibility and comprehension. Subtle but important text features like this add up to provide customers will a great online reading experience.
  • #13: ARCHITECTURE: This diagram shows the basic architecture for WPF. Notice all the different media types (in yellow) that are handled by WPF: Vectors, Bitmaps, 3D, Audio and Video, Text and Effects! Second, notice how the animation capabilities of WPF spans across all the media types, allowing you to animate any kind of content. The WPF Composition Engine (in black) is one of the revolutionary features of WPF. This engine provides capability of having live content inside of another content. This means that you can have a 3D object rotating inside a Button control and furthermore you can have a video projected over the surface of the 3D object! This tree structure and nesting capability is available for all content and every control that WPF provides. WPF is not only about rich user interfaces but also about high fidelity information, connection and data. Controls, Layout and Databinding are just some of the examples of this power. The XPS format is a rich document definition that allows us to enjoy the best of WPF in a document. In summary, WPF represents an evolution in terms of richness, interactivity as well as information and data. DESIGN PRINCIPLES - The design principles behind Windows Presentation Foundation can be categorized as follows: Integration : Windows Presentation Foundation offers a unified API that spans the services identified in Table 1. Developers today are faced with a myriad choice of disparate technologies and APIs, depending on whether they are targeting 2D graphics (GDI or GDI+), user interface (USER32 or Windows Forms), media (DirectShow), or 3D (Direct3D or OpenGL). Windows Presentation Foundation provides a single model that is orthogonal across all these services and allows seamless integration of content within a single application. You can use the same constructs for animation, data binding and styling, regardless of whether you are targeting 2D, 3D or text content. Vector graphics. As described in the introduction, Windows Presentation Foundation takes full advantage of the powerful Graphical Processing Units that are part of modern PC systems. At its heart, the composition engine is vector-based, allowing for scaling of all output to match the resolution of a specific machine. The rendering architecture uses Direct3D for all output: on video cards that implement DirectX 7 or later in hardware, Windows Presentation Foundation renders output using the GPU wherever possible. In situations where hardware rendering cannot be used, software rendering is available as a fallback. Lastly, a floating-point logical pixel system and 32-bit ARGB color support provide a rich high-fidelity experience that anticipates future technology needs, such as high-DPI displays. Declarative programming. Windows Presentation Foundation introduces XAML (eXtensible Application Markup Language), an XML-based language for instantiating and populating nested object hierarchies. While XAML isn&apos;t exclusively tied to Windows Presentation Foundation, it is inherently suitable for tasks such as UI definition and construction. The design of XAML allows applications to parse and manipulate UI logic at run-time for dynamic workflow scenarios. Importantly, the XAML / code-behind model embodied in Windows Presentation Foundation allows designers and developers to work collaboratively on client application design and development, using tools such as Expression &amp;quot;Sparkle&amp;quot; as well as third-party specialist tools including ZAM 3D and Mobiform Aurora. Easy deployment . With support for both standalone applications and Web-browser applications, Windows Presentation Foundation offers the best of both deployment models. Web-browser applications run from within Internet Explorer, either occupying the entire window or within an inline frame. They offer the ease of deployment for which Web applications are famed, as well as operating within a partial trust sandbox that protects the client machine against malicious applications. Yet they can still take advantage of the local client hardware and use 3D and media services for the richest Web experience available today. On the other hand, standalone applications are locally installed via ClickOnce or MSI technologies and offer full access to the underlying platform. Document lifecycle. Windows Presentation Foundation introduces a new set of document and print technologies. Applications that need to persist data to a local store can use the Open Packaging Conventions , a ZIP-based packaging convention shared with Office 12 that supports core properties and custom metadata, digital signatures and rights management functionality. For applications that want to share documents for collaboration across multiple machines, even without the application installed, the XML Paper Specification allows visuals to be fixed in a printable, portable format.
  • #14: If user experience matters, design matters. If design matters, designers matter. If designers matter, we need to make designers first class citizens of the traditional software development process. Let’s talk about how Microsoft is unlocking Developer and Designer collaboration and is empowering them to create successful UX software applications. 1) Traditionally designers would “mockup” the graphic design for a software application. Then by any means possible designers would deliver this “looks” to the developer… they would use JPG images, PNGs, PSDs or even Powerpoint presentations to express the designer intention. Then the developer would receive this “static images” and would try to convert that into reality. If the designer created some “non standard” controls, the developer was forced to code in GDI+ or other complex technologies to create the control raising the time and budget to such level that it was simply better to take the decision of making the UI more “standard”. The developer trying to recreate the idea of the designer would deliver something like what is shown on the right side of the screen. As you can see it represents only a tiny bit of the original vision. 2) In order to enable the collaboration between developers and designers, Microsoft has created XAML. XAML is the format which integrates the development process and is the way for both developers and designers to access the functionalities of WPF. As you can see we have no middle man anymore. XAML is generated by the designer, XAML is consumed by the developer. Further more, the workflow is now two-way meaning that the development process can also start from the developer side who creates XAML and then delivers this XAML to the designer which can take it and style it or completely redesign its appearance. 3) As a brief sample this are the tools that enable this kind of process: On the designer side we have Expression and on the Developer side we have Visual Studio.
  • #15: Stands for Extensive Application Markup Language Easily toolable, declarative markup Build applications in simple declarative statements Can be used for any CLR object hierarchy Code and content are separate Streamline collaboration between designers and developers Developers add business logic, while designers design Can be rendered in the browser (as part of a web page) or as a standalone application XAML WPF introduces a new role to the rich client software development team – that of professional designer. Gone are the days of boring gray buttons and poorly designed applications: with the declarative programming model enabled by XAML, you can split off presentation and logic in the same way as with a web application. XAML is a markup language that is inherently toolable, allowing for designers and developers to use independent tools. XAML (which stands for &amp;quot;Extensible Application Markup Language&amp;quot;) provides an XML-based way to specify declaratively a hierarchy of objects with properties and logic. We&apos;re positioning XAML as a user interface design language, because it is ideal for generating the kind of code that traditionally resided in a hidden #region area and was hard to maintain by both developers and tools. If you&apos;ve ever wanted to edit the auto-generated blocks of code created by Visual Studio but been dissuaded by the warning comments writ large, or you&apos;ve gone ahead regardless and been burnt badly when your tools refused to load your changes, you&apos;ll appreciate XAML. XAML is not Avalon, and Avalon is not XAML. It so happens that they come out of the same team at Microsoft, but they are not intrinsically wedded together. I&apos;ve been asked before &amp;quot;where can I go to get the XSD for XAML?&amp;quot; and hopefully it&apos;s now clear that this question doesn&apos;t make much more sense than asking for the C# schema. XAML gets compiled into an object definition.
  • #17: Controls: WPF provides a rich set of controls – Border , BulletDecorator , Button , Canvas , CheckBox , ComboBox , ContextMenu , Control , DockPanel , DocumentViewer, Expander , FlowDocumentPageViewer , FlowDocumentReader , FlowDocumentScrollViewer , Frame , Grid , GridSplitter , GridView , GroupBox , Image , Label , ListView , ListBox , Menu , Panel , PasswordBox , Popup , Tooltip, etc…. Animation, Triggers and Timelines – In the illustration above, &amp;quot;Start&amp;quot; refers to an ellipse, MouseDown describes an event, and &amp;quot;Resume&amp;quot; describes the action that will be taken on the timeline &amp;quot;OnLoaded&amp;quot; when that event occurs. These 3 pieces make up a trigger. All this can be accomplished using a timeline, such as one shown above in Microsoft Expression Interactive Designer. Styles and Resources – Styles c entrally define the appearance and interactive behaviors of the elements in your app. A resource is an object defined within an application based on Microsoft® Windows® Presentation Foundation (WPF) for the purpose of re-using the resource in different places. One of the most common uses of a resource is in re-using a color in different controls. You can change the color of the resource once and see the changes affect any controls that linked to it. Changing one asset with multiple relationships is easier than replacing many instances of data that has been copied and pasted several times. Resources can be applied to any kind of value, such as text, numbers, styles, templates, and complex objects. An external resource dictionary is a file that represents a set of resources. This file can be used in any project by linking to the resource dictionary from a scene or application. External resource dictionaries enable other applications to export re-usable assets which can then be imported into Microsoft Expression™ Interactive Designer. These external resource dictionary files allow designers and developers to re-use the same asset across multiple applications based on WPF. Layout panels let you position elements within a window Different layout panels Canvas – for specifiying exact (x,y) positioning DockPanel – for docking elements without worrying about exact (x,y) positioning StackPanel – for stacking elements from left to right or from top to bottom Grid – for row/grid positioning, while specifying column and row definitions WrapPanel - models the right hand pane of an Explorer window, allowing you to handle items that flow over to a new row when the current row is full
  • #24: Serialize WPF content to XPS Application/activity easily creates XPS file from WPF elements Create/Use XPS Documents Workflow activity or desktop application edits or creates XPS Documents; includes support for Package services for XPS Documents Create/Use Package Activity or application opens package and reads/changes/adds parts and relationships , Digital Signatures and Metadata Use Custom Viewer Application includes viewer control that displays XPS pages and WPF content Create/Use Documents w/ Restricted Permissions Application interacts with Windows RMS to create or consume Open Packaging Convention documents with restricted permissions
  • #26: Data binding is the process that establishes a connection between the application UI and business logic. A typical use of data binding is to place server or local configuration data into forms or other UI controls. In Windows Presentation Foundation, this concept is expanded to include the binding of a broad range of properties to a variety of data sources. In WPF, dependency properties of elements can be bound to CLR objects (including ADO.NET objects or objects associated with Web Services and Web properties) and XML data. Dependency properties are properties that are registered with the Windows Presentation Foundation (formerly code-named &amp;quot;Avalon&amp;quot;) dependency property system. You can take advantage of the dependency property system in the following ways: By backing your common language runtime (CLR) property with a dependency property. This allows your property to have support for styling, databinding, animation, initial default values, value expressions, property invalidations, or inheritance. Examples of dependency properties include the Background property and the FontSize property. By creating attached properties. Attached properties are properties that can be set on any DependencyObject types. An example attached property is the Dock property. OneWay binding causes changes to the source to automatically update the target, but changes to the target are not propagated back to the source. This type of binding is appropriate if the control being bound is implicitly read-only. For instance, you may bind to a source such as a stock ticker or perhaps your target property has no control interface provided for making changes, such as a data-bound background color of a table. TwoWay binding causes changes to either the source or the target to automatically update the other. This type of binding is appropriate for forms or other fully interactive UI scenarios. Most properties default to OneWay binding, but some dependency properties (typically properties of user-editable controls such as the Text property of TextBox and the IsChecked property of CheckBox ) default to TwoWay binding. A programmatic way to determine whether a dependency property binds one-way or two-way by default is to get the property metadata of the property using GetMetadata and then check the boolean value of the BindsTwoWayByDefault property. OneWayToSource is the reverse of OneWay binding; it updates the source when the target changes.
  • #35: You can incrementally embrace WPF, w/o throwing away your existing code base or skill set. WPF-Windows Forms Interoperability Host WPF controls in a Windows Forms application using WindowsFormsHost Host Windows Forms controls in a WPF application using ElementHost Augment the WPF features with Windows Forms features WPF-HWNDs Interoperability WPF &amp; HWNDs enable WPF interoperability with Win32, MFC, Active Template Library, ActiveX &amp; DirectX Use HWNDSource to host WPF inside HWNDs &amp; to host HWNDs inside WPF
  • #39: WPF is Microsoft’s strategic presentation technology for Windows smart client user experiences. Use WPF to deliver innovative user interfaces through support for UI, media, document services, hardware acceleration, vector graphics, resolution-independent DPI for different form factors, data visualization, and superior content readability. Increase developer-designer productivity and collaboration through Visual Studio, Microsoft Expression Interactive Designer, and XAML. Write code once, and deploy as stand-alone client or in a browser. Incrementally embrace WPF through interoperability with Win32 and Windows Forms. Leverage vested knowledge in .NET Framework, CLR languages and Visual Studio IDE. Derive business value through new paradigms of user experiences, business intelligence through data visualizations, brand awareness through differentiated customer experiences, and customer loyalty through higher customer satisfaction.