SlideShare uma empresa Scribd logo
1 de 39
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,A productive, unified approach to UI,
media and documents to delivermedia and documents to deliver
unmatched user experienceunmatched user experience
New Document Technologies
2D Graphics, 3D Graphics, Imaging
3D Graphics3D Graphics
Key Scenarios
Next-Gen Windows Smart Client applications:Next-Gen Windows Smart Client applications:
• Installed desktop applications
• Browser applications (XAML Browser Application)
• Flexible deployment
<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
ClearType & Antialiasing
Sub-pixel positioning & natural widthsSub-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
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
Layout
WindowsPresentationFoundation
XPSViewer
Designer-Developer Productivity
• Microsoft Tools for Designers &Microsoft Tools for Designers &
DevelopersDevelopers
• Declarative Programming throughDeclarative Programming through
XAMLXAML
• Third Party Tools (e.g. Aurora byThird 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 streamlinedevelopers can streamline
their collaborationtheir collaboration
Developers add business logicDevelopers add business logic
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 Button
b1.Content = "OK"
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">
<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
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
Packaging Services
XpsDocument curDoc = new
XpsDocument(Package.Open("foo.xps"));
curDoc.SignDigitally(cert …);
curDoc.Close();
oo
mm
VV
ii
ee
ww
ee
rr
tt
ee
//
UU
ss
ee
PP
aa
cc
kk
aa
gg
ee
SS
ee
riri
aa
lili
zz
ee
WW
PP
FF
CC
oo
nn
tt
ee
nn
tt
TT
oo
XX
PP
rr
ee
aa
tt
ee
//
UU
ss
ee
XX
PP
SS
DD
oo
cc
uu
mm
ee
nn
tt
ss
cc
uu
mm
ee
nn
tt
ss
ww
//
RR
ee
ss
trtr
ii
cc
tt
ee
dd
PP
ee
rr
mm
ii
ss
ss
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="myListBox"
Background="HoneyDew"
ItemsSource="{Binding
{StaticResource myDataSource}}"
</ListBox>
</StackPanel>
Binding Target Binding Source
Dependency ObjectDependency Object ObjectObject
Dependency
Property
PropertyTwoWay
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="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>
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 ActionStar
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>
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>
Interoperability
Incrementally embrace WPF, whileIncrementally embrace WPF, while
leveraging existing investments.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 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
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

Mais conteúdo relacionado

Mais procurados

Overview of Microsoft product & Microsoft cloud platform (win Azure)
Overview of Microsoft product & Microsoft cloud platform (win Azure)Overview of Microsoft product & Microsoft cloud platform (win Azure)
Overview of Microsoft product & Microsoft cloud platform (win Azure)Ahmed M. Abo Tameem
 
What is dotnet (.NET) ?
What is dotnet (.NET) ?What is dotnet (.NET) ?
What is dotnet (.NET) ?Talha Shahzad
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5IT Geeks
 
Web Design 101
Web Design 101Web Design 101
Web Design 101T.S. Lim
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
 
Asp.net mvc basic introduction
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introductionBhagath Gopinath
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
Google chrome operating system.ppt
Google chrome operating system.pptGoogle chrome operating system.ppt
Google chrome operating system.pptbhubohara
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
FRONT-END WEB DEVELOPMENT WITH REACTJS
FRONT-END WEB DEVELOPMENT WITH REACTJSFRONT-END WEB DEVELOPMENT WITH REACTJS
FRONT-END WEB DEVELOPMENT WITH REACTJSTran Phong Phu
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...Svetlin Nakov
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 

Mais procurados (20)

Overview of Microsoft product & Microsoft cloud platform (win Azure)
Overview of Microsoft product & Microsoft cloud platform (win Azure)Overview of Microsoft product & Microsoft cloud platform (win Azure)
Overview of Microsoft product & Microsoft cloud platform (win Azure)
 
.net framework
.net framework.net framework
.net framework
 
What is dotnet (.NET) ?
What is dotnet (.NET) ?What is dotnet (.NET) ?
What is dotnet (.NET) ?
 
Jsf presentation
Jsf presentationJsf presentation
Jsf presentation
 
Android vs ios
Android vs iosAndroid vs ios
Android vs ios
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Basics of the Web Platform
Basics of the Web PlatformBasics of the Web Platform
Basics of the Web Platform
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
 
Asp.net mvc basic introduction
Asp.net mvc basic introductionAsp.net mvc basic introduction
Asp.net mvc basic introduction
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Google chrome operating system.ppt
Google chrome operating system.pptGoogle chrome operating system.ppt
Google chrome operating system.ppt
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
FRONT-END WEB DEVELOPMENT WITH REACTJS
FRONT-END WEB DEVELOPMENT WITH REACTJSFRONT-END WEB DEVELOPMENT WITH REACTJS
FRONT-END WEB DEVELOPMENT WITH REACTJS
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Introduction to ios
Introduction to iosIntroduction to ios
Introduction to ios
 
Web Development
Web DevelopmentWeb Development
Web Development
 

Destaque

WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and AnimationsDoncho Minkov
 
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...ECAM Brussels Engineering School
 
Usability issues in mobile web
Usability issues in mobile webUsability issues in mobile web
Usability issues in mobile webdanishrafiq
 
2012.09.25 - Local and non-metric similarities between images - why, how and ...
2012.09.25 - Local and non-metric similarities between images - why, how and ...2012.09.25 - Local and non-metric similarities between images - why, how and ...
2012.09.25 - Local and non-metric similarities between images - why, how and ...Frédéric Morain-Nicolier
 
Practising Fourier Analysis with Digital Images
Practising Fourier Analysis with Digital ImagesPractising Fourier Analysis with Digital Images
Practising Fourier Analysis with Digital ImagesFrédéric Morain-Nicolier
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielleECAM Brussels Engineering School
 
Laboratoire de transmission numérique : Présentation du projet
Laboratoire de transmission numérique : Présentation du projetLaboratoire de transmission numérique : Présentation du projet
Laboratoire de transmission numérique : Présentation du projetECAM Brussels Engineering School
 
Android : Evolution or Revolution
Android : Evolution or RevolutionAndroid : Evolution or Revolution
Android : Evolution or RevolutionSanjiv Malik
 
supervision data center
supervision data centersupervision data center
supervision data centerRihab Chebbah
 
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATION
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATIONSYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATION
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATIONAdel Gnaoui
 
FPGAs : An Overview
FPGAs : An OverviewFPGAs : An Overview
FPGAs : An OverviewSanjiv Malik
 

Destaque (20)

WPF Graphics and Animations
WPF Graphics and AnimationsWPF Graphics and Animations
WPF Graphics and Animations
 
Ccna day4
Ccna day4Ccna day4
Ccna day4
 
Ccna day5
Ccna day5Ccna day5
Ccna day5
 
Ccna day2
Ccna day2Ccna day2
Ccna day2
 
Ccna day1
Ccna day1Ccna day1
Ccna day1
 
Ccna day3
Ccna day3Ccna day3
Ccna day3
 
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...
Y a-t-il un pilote à bord ? Quand le pilote ne comprend plus son autopilote...
 
Usability issues in mobile web
Usability issues in mobile webUsability issues in mobile web
Usability issues in mobile web
 
2012.09.25 - Local and non-metric similarities between images - why, how and ...
2012.09.25 - Local and non-metric similarities between images - why, how and ...2012.09.25 - Local and non-metric similarities between images - why, how and ...
2012.09.25 - Local and non-metric similarities between images - why, how and ...
 
Practising Fourier Analysis with Digital Images
Practising Fourier Analysis with Digital ImagesPractising Fourier Analysis with Digital Images
Practising Fourier Analysis with Digital Images
 
certificat médical
certificat médicalcertificat médical
certificat médical
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielle
 
Laboratoire de transmission numérique : Présentation du projet
Laboratoire de transmission numérique : Présentation du projetLaboratoire de transmission numérique : Présentation du projet
Laboratoire de transmission numérique : Présentation du projet
 
Recolytic
RecolyticRecolytic
Recolytic
 
Ipta2010
Ipta2010Ipta2010
Ipta2010
 
Android : Evolution or Revolution
Android : Evolution or RevolutionAndroid : Evolution or Revolution
Android : Evolution or Revolution
 
supervision data center
supervision data centersupervision data center
supervision data center
 
Dynamic Linker
Dynamic LinkerDynamic Linker
Dynamic Linker
 
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATION
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATIONSYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATION
SYSTEME DE SUPERVISION OPEN SOURCE J2EE EN TEMPS REEL D'UNE APPLICATION
 
FPGAs : An Overview
FPGAs : An OverviewFPGAs : An Overview
FPGAs : An Overview
 

Semelhante a Presentation wpf

Best Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented RealityBest Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented RealityZugara
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Microsoft Iceland
 
Silverlight 2 For Developers
Silverlight 2 For DevelopersSilverlight 2 For Developers
Silverlight 2 For DevelopersMithun T. Dhar
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Polandbrucelawson
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Patrick Lauke
 
Xamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupXamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupSeamgen
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09Martha Rotter
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Overview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI ControlOverview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI ControlAbhishek Sur
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
silverlight1.pptx
silverlight1.pptxsilverlight1.pptx
silverlight1.pptxAltafSMT
 
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...AWS Germany
 
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the Cloud Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the Cloud Amazon Web Services
 
Best Practices in Enterprise Video and Digital Asset Management
Best Practices in Enterprise Video and Digital Asset ManagementBest Practices in Enterprise Video and Digital Asset Management
Best Practices in Enterprise Video and Digital Asset ManagementNuxeo
 
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the CloudAmazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the CloudAmazon Web Services
 

Semelhante a Presentation wpf (20)

Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Best Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented RealityBest Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented Reality
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
 
SilverlightDevIntro
SilverlightDevIntroSilverlightDevIntro
SilverlightDevIntro
 
Silverlight 2 For Developers
Silverlight 2 For DevelopersSilverlight 2 For Developers
Silverlight 2 For Developers
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
 
Uni Tour Germany 11.2009
Uni Tour Germany 11.2009Uni Tour Germany 11.2009
Uni Tour Germany 11.2009
 
Xamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego MeetupXamarin 9/10 San Diego Meetup
Xamarin 9/10 San Diego Meetup
 
Silverlight Training
Silverlight TrainingSilverlight Training
Silverlight Training
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Overview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI ControlOverview of WPF in light of Ribbon UI Control
Overview of WPF in light of Ribbon UI Control
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
silverlight1.pptx
silverlight1.pptxsilverlight1.pptx
silverlight1.pptx
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...
Vom Server bis zum Workspace: Windows Anwendungen auf AWS - AWS Cloud Web Day...
 
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the Cloud Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
 
Best Practices in Enterprise Video and Digital Asset Management
Best Practices in Enterprise Video and Digital Asset ManagementBest Practices in Enterprise Video and Digital Asset Management
Best Practices in Enterprise Video and Digital Asset Management
 
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the CloudAmazon WorkSpaces - Fully Managed Desktops in the Cloud
Amazon WorkSpaces - Fully Managed Desktops in the Cloud
 

Último

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxJanEmmanBrigoli
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxElton John Embodo
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Seán Kennedy
 
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSMae Pangan
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
The Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsThe Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsRommel Regala
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataBabyAnnMotar
 

Último (20)

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptx
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docx
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
 
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
The Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World PoliticsThe Contemporary World: The Globalization of World Politics
The Contemporary World: The Globalization of World Politics
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped data
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 

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,A productive, unified approach to UI, media and documents to delivermedia and documents to deliver unmatched user experienceunmatched user experience
  • 6. 2D Graphics, 3D Graphics, Imaging 3D Graphics3D Graphics
  • 7. Key Scenarios Next-Gen Windows Smart Client applications:Next-Gen Windows Smart Client applications: • Installed desktop applications • Browser applications (XAML Browser Application) • Flexible deployment
  • 8. <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
  • 9. ClearType & Antialiasing Sub-pixel positioning & natural widthsSub-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 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 Layout WindowsPresentationFoundation XPSViewer
  • 13. Designer-Developer Productivity • Microsoft Tools for Designers &Microsoft Tools for Designers & DevelopersDevelopers • Declarative Programming throughDeclarative Programming through XAMLXAML • Third Party Tools (e.g. Aurora byThird 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 streamlinedevelopers can streamline their collaborationtheir collaboration Developers add business logicDevelopers add business logic
  • 14. 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 Button b1.Content = "OK" 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"> <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
  • 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 Packaging Services XpsDocument curDoc = new XpsDocument(Package.Open("foo.xps")); curDoc.SignDigitally(cert …); curDoc.Close(); oo mm VV ii ee ww ee rr tt ee // UU ss ee PP aa cc kk aa gg ee SS ee riri aa lili zz ee WW PP FF CC oo nn tt ee nn tt TT oo XX PP rr ee aa tt ee // UU ss ee XX PP SS DD oo cc uu mm ee nn tt ss cc uu mm ee nn tt ss ww // RR ee ss trtr ii cc tt ee dd PP ee rr mm ii ss ss
  • 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="myListBox" Background="HoneyDew" ItemsSource="{Binding {StaticResource myDataSource}}" </ListBox> </StackPanel> Binding Target Binding Source Dependency ObjectDependency Object ObjectObject Dependency Property PropertyTwoWay 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="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>
  • 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 ActionStar
  • 32. 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>
  • 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="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>
  • 34. Interoperability Incrementally embrace WPF, whileIncrementally embrace WPF, while leveraging existing investments.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 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
  • 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

Notas do Editor

  1. .
  2. 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.”
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 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 &quot;Sparkle&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.
  10. 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.
  11. 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 &quot;Extensible Application Markup Language&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 &quot;where can I go to get the XSD for XAML?&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.
  12. 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, &quot;Start&quot; refers to an ellipse, MouseDown describes an event, and &quot;Resume&quot; describes the action that will be taken on the timeline &quot;OnLoaded&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
  13. 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
  14. 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 &quot;Avalon&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.
  15. 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
  16. 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.