Windows Presentation Foundation (WPF) and XAML (eXtensible Application Markup Language) powered by Microsoft. It's all about presentation (User Interface). For example, how various options of an app is presenting in front of a user. User eXperience (UX) designing is an art. This PowerPoint slide show was designed with the inspiration from Microsoft Design Language (Metro UI). This slide best works with Microsoft Office 2013 or Office 365.

1. Windows Presentation Foundation & <XAML>
Alex S R
12132265

2. Thank God

3. Thanks to teachers

4. Thanks to all my dear friends

5. Special Thanks to
Microsoft

6. Let’s Start

7. Windows Presentation Foundation (WPF)
 WPF is the new graphical subsystem in Windows Operating System
that built with .NET framework.
 Physically, it is a collection of class libraries that comes with all the
latest versions of .NET framework for creating and executing rich and
interactive User Interface (Presentation).
Windows is a registered trademark of Microsoft Corporation. And all other logos are trademarks of their respective owners.

8. Windows Presentation Foundation (WPF)
 Supported Languages: C# .NET, VB .NET
 Developers Tools: Visual Studio, Expression Studio

9. WPF
Windows Presentation Foundation
WPF is the latest graphical
subsystem in Windows Operating
System to build and execute Apps
with rich UI in a more easier and
standardized manner.
WPF can be used to build visually rich UI

10. WPF
Windows Presentation Foundation
WPF is the latest graphical
subsystem in Windows Operating
System to build and execute Apps
with rich UI in a more easier and
standardized manner.
WPF is Hardware Accelerated
 All WPF graphics are Direct3D applications
 Direct3D (part of DirectX) is used in graphical
applications where performance is important
 Uses the video card hardware for rendering

11. .NET Framework

12. Microsoft .NET Framework
.NET (dot Net) is a software framework that includes everything required
for developing software and services for Microsoft’s products.
Windows Windows Phone Windows RT Web Apps Xbox

13. DirectX

14. Microsoft DirectX
DirectX is a set of low level Application Programming Interface (API) that
provides Windows programs with high performance hardware
accelerated multimedia support. Generally all Graphics Processing Units
(GPU) supports DirectX. WPF libraries are built on top of DirectX.

15. XAML

16. XAML
 XAML stands for eXtensible Application Markup Language
 Declarative markup language for building UI
 Based on XML
 Used to simplify creation of UI for .NET apps
 Separates presentation from business logic.

17. XAML
eXtensible Application Markup Language
A declarative markup language for
representing structured data and
UI elements.
XAML is a declarative language
 XAML describes the behavior and integration of
components (in most cases UI components)
 Cannot describe business logic

18. XAML
eXtensible Application Markup Language
A declarative markup language for
representing structured data and
UI elements.
XAML in WPF
 WPF employs XAML, an XML-based language, to define
and link various interface elements
 Just acts like the concept of CSS
 Provides a clear separation between the UI (XAML) and
the business logic (C#,VB.NET)

19. <Window x:Class="MyFirstWpfApp.MainWindow" xmlns=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="Hello, WPF" Height="300" Width="300">
<Button x:Name="button"
Width="200"
Height="25">OK</Button>
</Window>
Sample XAML code

20. Features of WPF

21. Features
of WPF
 All WPF Applications are DirectX
based.
 Vector graphics
 Supports time-based animations.
 It can Incorporate multimedia
contents and documents more
easily.

22. Features
of WPF
 All WPF Applications are DirectX
based.
 Vector graphics
 Supports time-based animations.
 It can Incorporate multimedia
contents and documents more
easily.
Maximize Hardware Acceleration
 WPF uses DirectX for media rendering where old
Windows Forms Application uses GDI+(Graphics Device
Interface)
 So it offloads works to Graphics Processing Unit (GPU)
instead of CPU
 The result is high quality rich media UI

23. Features
of WPF
 All WPF Applications are DirectX
based.
 Vector graphics
 Supports time-based animations.
 It can Incorporate multimedia
contents and documents more
easily.
Vector graphics
 Vector graphics allows scale without loss in quality
 That’s what makes WPF a resolution-independent
architecture

24. Features
of WPF
 All WPF Applications are DirectX
based.
 Vector graphics
 Supports time-based animations.
 It can Incorporate multimedia
contents and documents more
easily.
Time-based Animation
 Presentation timers are initialized and managed by WPF
 Scene changes coordinated by using a storyboard

25. Features
of WPF
 All WPF Applications are DirectX
based.
 Vector graphics
 Supports time-based animations.
 It can Incorporate multimedia
contents and documents more
easily.
Easy to incorporate multimedia
 WPF can incorporate audio and video into a user interface
 WPF create multimedia applications with real-time graphics
Videos Music Images Documents

26. How XAML is generated and works ?

27. XAML Generators
 There is a number of tools available today to creatively design the GUI
using XAML
 These tools can automatically generate the XAML output file
 So that designers as well as developers can concentrate on expressing
their creativity rather than coding
Visual Studio Expression Studio ZAM 3D

28. XAML File
XAML
Processor
Code
.NET
Compiler
Source
Code
.DLL/.EXE
Assembly
This is how XAML Works

29. XAML File
XAML
Processor
Code
.NET
Compiler
Source
Code
.DLL/.EXE
Assembly
When a WPF application has compiled in Visual Studio or Expression
Studio all the XAML files are converted into BAML (Binary Application
Markup Language)

30. XAML File
XAML
Processor
Code
.NET
Compiler
Source
Code
.DLL/.EXE
Assembly
BAML will be embedded as a resource into the final Dynamic Link Library
(.dll) or Executable (.exe) assembly.

31. XAML File
XAML
Processor
Code
.NET
Compiler
Source
Code
.DLL/.EXE
Assembly
At run-time, the framework engine extracts this .BAML file from assembly
resource, parses it and creates a corresponding WPF visual tree or
workflow.

32. Applications of XAML

33. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.

34. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
As already explained
 WPF employs XAML, an XML-based language, to define
and link various interface elements
 Just acts like CSS for HTML
 Provides a clear separation between the UI (XAML) and
the business logic (C#,VB.NET)

35. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Microsoft Silverlight
 Silverlight is a cross-platform, cross-browser plugin,
which contains WPF-based technology
 Rich Internet Application (RIA) platform
 Including XAML and subset of WPF
 Provides rich-media features such as video, vector
graphics, and animations

36. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Microsoft Silverlight
 Silverlight and WPF share the XAML presentation layer
 Both technologies are similar, but Silverlight is limited in
many aspects

37. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Windows Phone
12:38
Start
 Windows Phone (WP) is a
smartphone operating system
developed by Microsoft
 With WP, Microsoft created a new
user interface featuring a design
language called Metro or Modern
 Developers can develop WP apps
using C#.NET, Visual Basic .NET,
and HTML5/JavaScript

38. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Windows Phone
 Microsoft offers Expression Blend (a part of Expression
Studio) for designing WP UI, which itself uses XAML for UI
designing

39. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Windows Store Apps
 Windows Store Apps are designed to run on Windows on
ARM (WOA) also known as Windows RT. Eg: Windows RT
runs on Microsoft Surface Tablet
 WinRT is a new API for developing Windows Store Apps
 There is a layer in Windows 8 OS to run Windows Store
Apps
 It’s UI is also designed using XAML

40. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
Windows Workflow Foundation
 A workflow is the series of steps, decisions, and rules
needed to complete a specific task.
 Windows Workflow Foundation is a set of classes and
design tools that help developers to create and develop
workflows into their complex applications
 XAML brings a declarative programming model to
Windows Workflow

41. Applications
of XAML
 XAML is using for building WPF
User Interface
 Web based application using
Microsoft Silverlight
 To design UI of Windows Phone
Apps
 To design UI of Windows Store
Apps
 Used to design Windows
Workflow Foundation
 XAML Paper Specification (XPS)
documents.
XPS Documents
 XPS (XAML Paper Specification) is an electronic paper
document, an alternative to PDF.
 It consists of structured XML markups that defines layout
and visual appearance of each objects in the page

42. Microsoft Design Language

43. Content is the heart of Modern UI style apps, and
putting content before chrome is fundamental to the
design of Modern style apps.
- Microsoft

44. The innovation here is the fluidity of user experience and
focus on the data, without using traditional user
interface conventions of windows and frames. Data
become the visual elements and Controls.
-Isabel

45. 3:00PM
3/14/2011
Search programs and files
All Programs
Shut Down
Username
Documents
Pictures
Music
Games
Computer
Control Panel
Devices and Printers
Default Programs
Help and Support
Pinned Application
Pinned Application
Application
Application
Application
Application
Application
Application Traditional Start button and taskbar

46. Web page title
http://www.url.com
Traditional windows and frames

47. The key design principle is better focus on the content
of application, relying more on typography and less on
graphics.
“Content before chrome”

48. Start Alex Sooraj
A tile is the front door into an app

49. Search
Share
Start
Devices
Settings
Text Text Text Text
Search Apps
Apps
Settings
Files
App
App
App
App
Search
App
App
Button
Title
text!
CancelOK
New
Open…
Save
Save As…
Page Setup…
Print…
Exit
File
C:WindowsSystem32cmd.exe
Microsoft Windows [Version 7.1.7000]
Copyright (c) 2008 Microsoft Corporation. All rights reserved.
C:UsersUserName>
Traditional UI Modern UI

52. Microsoft Surface
Using Microsoft Design Language

53. Nokia Lumia 920

54. Xbox 360 System Software

55. Advantages of XAML

56. Advantages
of using XAML
 XAML code is short and clear to
read
 Separation of UI designer code
and business logic allows it to
clearly separate the role of UI
designer and developer

57. Advantages
of using XAML
 XAML code is short and clear to
read
 Separation of UI designer code
and business logic allows it to
clearly separate the role of UI
designer and developer
<Button Content="Click me!"/> Button button=new Button();
button.Content="Click me!";
Declarative Style
 XAML implements declarative markup style
 That’s why XAML is short and clear to read
Declarative Style Programmatical style

58. Advantages
of using XAML
 XAML code is short and clear to
read
 Separation of UI designer code
and business logic allows it to
clearly separate the role of UI
designer and developer
Separation of designer code and logic
 Separation between designer code (XAML) and business
logic (C#,VB code) clearly separates the role of designer
and developer.
Designer
Emotional Connection
Look, behavior, data visualization,
usability, brand impact
Developer
Functional Capabilities
Deployment, function, data connection and
integrity, IT process, security

59. Disadvantages of WPF & XAML

60. Disadvantages
of WPF & XAML
 WPF and XAML is not supported
on Windows 2000 or older
 WPF requires latest hardware
support, and it will not run on
old hardware

61. Disadvantages
of WPF & XAML
 WPF and XAML is not supported
on Windows 2000 or older
 WPF requires latest hardware
support, and it will not run on
old hardware
WPF and XAML is not supported on
PCs running Windows 2000 or older

62. Disadvantages
of WPF & XAML
 WPF and XAML is not supported
on Windows 2000 or older
 WPF requires latest hardware
support, and it will not run on
old hardware
WPF requires DirectX supported
hardware, and it will not run on old
hardware

63. It was a presentation about Presentation
Thanks for being here

64. References:
Microsoft Developers Network
msdn.microsoft.com

65. Time for your QuestionsNow,

66. End of slide show. Swipe to exit.