presentation wpf
TRANSCRIPT
![Page 1: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/1.jpg)
Programming Windows Presentation Foundation (XAML)
Mark Davey
IT SpecialistToyota Motor Manufacturing
Indiana Inc.
![Page 2: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/2.jpg)
Agenda
• Windows Presentation Foundation Overview
What is XAML, logical trees• Programming• Development & Deployment• Getting Windows Presentation Foundation & Tools
![Page 3: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/3.jpg)
.NET At The Core
![Page 4: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/4.jpg)
Windows Presentation Foundation
A productive, unified approach to UI, A productive, unified approach to UI,
media and documents to deliver media and documents to deliver
unmatched user experienceunmatched user experience
![Page 5: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/5.jpg)
New Document Technologies
![Page 6: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/6.jpg)
2D Graphics, 3D Graphics, Imaging
3D Graphics3D Graphics
![Page 7: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/7.jpg)
Key Scenarios
Next-Gen Windows Smart Client applications:Next-Gen Windows Smart Client applications:
• Installed desktop applications
• Browser applications (XAML Browser Application)
• Flexible deployment
![Page 8: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/8.jpg)
<Border Width="400"
BorderBrush="Green"
BorderThickness="9">
<StackPanel>
<MediaElement Source="aero.wmv" />
<Button>Hello</Button>
</StackPanel>
</Border>
Audio & Video
• Formats: WMV, MPEG, Some AVIs• Can be synchronized with animations• Windows Media Foundation used to instantiate playback machinery
into a DirectShow graph
![Page 9: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/9.jpg)
ClearType & Antialiasing
Sub-pixel positioning & natural widthsSub-pixel positioning & natural widths
![Page 10: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/10.jpg)
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.
![Page 11: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/11.jpg)
Building & Deploying WPF Apps
![Page 12: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/12.jpg)
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
ManagedUnmanaged
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
AudioImaging
Text
VideoEffects
Composition Engine
MEDIA INTEGRATION LAYER
Controls
LayoutW
ind
ow
s P
rese
nta
tion
Fo
un
da
tion
XP
S V
iew
er
![Page 13: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/13.jpg)
Designer-Developer Productivity
• Microsoft Tools for Designers & Microsoft Tools for Designers & DevelopersDevelopers
• Declarative Programming through Declarative Programming through XAMLXAML
• Third Party Tools (e.g. Aurora by Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)Mobiform, ZAM 3D by Electric Rain)Designers designDesigners design
With XAML designers & With XAML designers &
developers can streamline developers can streamline
their collaborationtheir collaboration
Developers add business logicDevelopers add business logic
![Page 14: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/14.jpg)
Declarative Programming Through XAML
XAML = Extensible Application Markup LanguageXAML = Extensible Application Markup Language
•Easily toolable, declarative markup•Code and content are separate•Can be rendered in the browser / standalone application
<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>
XAML
Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;
C#
Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100
VB.NET
![Page 15: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/15.jpg)
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
![Page 16: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/16.jpg)
Controls, Templates, Styles & Resources, Layouts, Animation
Animation, Triggers, Timelines
<StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard>
<ColorAnimation To="Yellow" Duration="0:0:0.5“ Storyboard.TargetName="TheBrush" Storyboard.TargetProperty="Color" />
<DoubleAnimation To="45" Duration="0:0:2" Storyboard.TargetName="LowerEllipseTransform" Storyboard.TargetProperty="Angle" />
... </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
![Page 17: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/17.jpg)
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
![Page 18: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/18.jpg)
Logical Tree
Canvas
StackPanel
Label ListBox StackPanel StatusPanel
String ListBoxItemListBoxItem
String String
StringString
• 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
![Page 19: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/19.jpg)
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
![Page 20: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/20.jpg)
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
Determine Base Value
Evaluate (if an expression)
Apply Animation Coerce Validate
![Page 21: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/21.jpg)
Attached Properties
• Effectively attached to arbitrary objects to set dependency properties
• Dependence Properties cannot be sen without being attached
![Page 22: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/22.jpg)
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
Canvas
StackPanel
Label ListBox StackPanel StatusPanel
String ListBoxItemListBoxItem
String String
StringString
![Page 23: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/23.jpg)
WPF Document APIs
Packaging Services
XpsDocument curDoc = new
XpsDocument(Package.Open("foo.xps"));
curDoc.SignDigitally(cert …);
curDoc.Close();
UUssee CCuussttoomm VViieewweerr
CCrreeaattee // UUssee PPaacckkaaggee
SSeerriiaalliizzee
WWPPFF CCoonntteenntt
TToo XXPPSS
CCrreeaattee // UUssee
XXPPSS DDooccuummeennttss
CCrreeaattee // UUssee DDooccuummeennttss
ww// RReessttrriicctteedd PPeerrmmiissssiioonnss
![Page 24: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/24.jpg)
2D Graphics
• Drawing (Images ,Video, Geometry)• Brushes can be many different things – images,
gradients, solid colors. • Polygons
• Demo of 2D graphics using Blend
![Page 25: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/25.jpg)
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="myListBox"Background="HoneyDew"ItemsSource="{Binding
{StaticResource myDataSource}}" </ListBox>
</StackPanel>
Binding Target Binding Source
Dependency ObjectDependency Object ObjectObject
Dependency Property
PropertyTwoWay
OneWay
OneWayToSource
![Page 26: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/26.jpg)
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
![Page 27: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/27.jpg)
Animation
• An dependency property can be manipulated with a animation object– Drawing– Images– Brushes– Shapes
<EventTrigger RoutedEvent="Canvas.Loaded"><BeginStoryboard><Storyboard x:Name="Ski"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Canvas3"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/><SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.3"/><SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:06" Value="0.5"/><SplineDoubleKeyFrame KeyTime="00:00:07" Value="0.6"/><SplineDoubleKeyFrame KeyTime="00:00:08" Value="0.7"/><SplineDoubleKeyFrame KeyTime="00:00:08.3000000" Value="-0.7"/><SplineDoubleKeyFrame KeyTime="00:00:09" Value="-0.8"/><SplineDoubleKeyFrame KeyTime="00:00:10" Value="-1"/><SplineDoubleKeyFrame KeyTime="00:00:11" Value="-2"/><SplineDoubleKeyFrame KeyTime="00:00:12" Value="-3"/>
</DoubleAnimationUsingKeyFrames>
![Page 28: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/28.jpg)
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
![Page 29: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/29.jpg)
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
![Page 30: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/30.jpg)
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>
![Page 31: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/31.jpg)
Viewport3D – a window into a 3D world
• A 3D windowCamera
Lights ActionStar
![Page 32: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/32.jpg)
Materials <ModelVisual3D.Material> Brush
• Just like 2D drawing 3D uses brushes which can be a solid color or a picture
<GeometryModel3D x:Name="Roof">
<GeometryModel3D.Material> <DiffuseMaterial Brush="Blue"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-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" TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7"/> </GeometryModel3D.Geometry> </GeometryModel3D>
<DiffuseMaterial> <DiffuseMaterial.Brush> <ImageBrush ImageSource="pack://siteoforigin:,,,/Sample Models/Tiger.bmp" /> </DiffuseMaterial.Brush> </DiffuseMaterial>
![Page 33: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/33.jpg)
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="Roof">
<GeometryModel3D.Material> <DiffuseMaterial Brush="Blue"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-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" TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7"/> </GeometryModel3D.Geometry> </GeometryModel3D>
![Page 34: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/34.jpg)
Interoperability
Incrementally embrace WPF, while Incrementally embrace WPF, while
leveraging existing investments.leveraging existing investments.
WPF - Windows Forms Interoperability
WPF - HWNDs
![Page 35: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/35.jpg)
Getting Started with WPF
![Page 36: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/36.jpg)
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
![Page 37: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/37.jpg)
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
Q22007
Q2 Q4 Q12007
Q3 Q2 Q3 Q4
![Page 38: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/38.jpg)
WPF Summary
Deliver Innovative User ExperiencesDeliver Innovative User Experiences
Increase Developer-Designer ProductivityIncrease Developer-Designer Productivity
Achieve Flexible Application DeploymentAchieve Flexible Application Deployment
Leverage Existing Code Base & Skill SetLeverage Existing Code Base & Skill Set
![Page 39: Presentation wpf](https://reader035.vdocuments.net/reader035/viewer/2022081506/55763778d8b42a015c8b5092/html5/thumbnails/39.jpg)
WPF Resources
• WPF @ Windows Vista Developer Centerhttp://msdn.microsoft.com/windowsvista/building/presentation/
• WPF/.NET Framework 3.0 Community Site
• Microsoft Expressionwww.microsoft.com/expression