SlideShare une entreprise Scribd logo
1  sur  29
Visual Studio®
2012:
Windows®
Presentation
Foundation
Module 1: Creating an Application by Using
Windows Presentation Foundation
• Overview of WPF
• Creating a Simple WPF Application
• Handling Events and Commands
• Navigating Between Pages
Lesson: Overview of WPF
• What Is WPF?
• WPF Architecture
• Defining User Interfaces in WPF
• WPF Capabilities and Features
• WPF Application Types
What Is WPF?
It is a new foundation for building Windows-based
applications by using:
• Media
• Documents
• Application UI
.NET Framework 4.5.NET Framework 4.5
Windows
Presentation
Foundation
(WPF)
Windows
Presentation
Foundation
(WPF)
Windows
Communication
Foundation
(WCF)
Windows
Communication
Foundation
(WCF)
Windows
Workflow
Foundation
(WF)
Windows
Workflow
Foundation
(WF)
Windows
CardSpace
(WCS)
Windows
CardSpace
(WCS)
WPF Architecture
WPF Core Components
PresentationFrameworkPresentationFramework
Common Language
Runtime
Common Language
Runtime
PresentationCorePresentationCore
milcoremilcore
DirectXDirectXUser32User32
KernelKernel
Managed Code
Unmanaged Code
Defining User Interfaces in WPF
<Window ... >
...
<Label>Label</Label>
<TextBox>TextBox</TextBox>
<RichTextBox ... />
<RadioButton>RadioButton</RadioButton>
<CheckBox>CheckBox</CheckBox>
<Button>Button</Button>
</Window>
<Window ... >
...
<Label>Label</Label>
<TextBox>TextBox</TextBox>
<RichTextBox ... />
<RadioButton>RadioButton</RadioButton>
<CheckBox>CheckBox</CheckBox>
<Button>Button</Button>
</Window>
WPF Capabilities and Features
WPF provides the following capabilities and features:
• XAML-based user interfaces
• Page layout management
• Data binding
• 2-D and 3-D graphics
• Multimedia
• Animation
• Documents and printing
• Security
• Accessibility
• Localization
• Interoperability with Windows Forms controls
WPF Application Types
Stand-Alone Applications XAML Browser Applications (XBAPs)
Lesson: Creating a Simple WPF Application
• Demonstration: Creating WPF Applications by Using Visual
Studio 2012
• Defining the Application
• Defining Windows or Pages
• Adding Controls
• Building and Running a WPF Application
Demonstration: Creating WPF Applications by
Using Visual Studio 2012
In this demonstration, you will see how to:
• Create a stand-alone WPF application
• Create a browser application
• Add controls to your application
Defining the Application
<Application xmlns:x=… xmlns=…
x:Class="MyApp.App"
StartupUri="Window1.xaml">
<Application.Resources>
…
</Application.Resources>
</Application>
<Application xmlns:x=… xmlns=…
x:Class="MyApp.App"
StartupUri="Window1.xaml">
<Application.Resources>
…
</Application.Resources>
</Application>
Visual Studio generates a XAML application file that specifies:
• The code-behind class for the application
• The startup window or page
• Application-wide resources
Defining Windows or Pages
A stand-alone application contains windows or pages
• They are represented by <Window> or <Page> elements in the
XAML file
• The code-behind file contains event-handler code
<Window xmlns:x=… xmlns=…
x:Class="MyApp.Window1"
Title="My Window">
<Grid>
…
</Grid>
</Window>
<Window xmlns:x=… xmlns=…
x:Class="MyApp.Window1"
Title="My Window">
<Grid>
…
</Grid>
</Window>
<Page xmlns:x=… xmlns=…
x:Class="MyApp.Page1"
WindowTitle="My Page">
<Grid>
…
</Grid>
</Page>
<Page xmlns:x=… xmlns=…
x:Class="MyApp.Page1"
WindowTitle="My Page">
<Grid>
…
</Grid>
</Page>
Adding Controls
Windows and pages contain controls
• The controls are represented by XAML elements
•<Button> and <TextBox> are examples of these
...
<Grid>
<TextBox Name="TextBox1" />
<Button Name="Button1">Click here</Button>
</Grid>
...
...
<Grid>
<TextBox Name="TextBox1" />
<Button Name="Button1">Click here</Button>
</Grid>
...
Building and Running a WPF Application
You can build and run a WPF application in Visual Studio
Stand-alone or browser application
Stand-Alone Application Browser Application
Lesson: Handling Events and Commands
• The WPF Event Model
• Handling WPF Control Events
• What Are Routed Events?
• Defining Routed Events
• What Are Commands?
• Demonstration: Defining Commands
The WPF Event Model
WPF controls generate events such as:
• Clicking buttons
• Entering text
• Selecting lists
• Gaining focus
Implement event handler method in the code-behind file
Specify an event handler in the XAML file
Handling WPF Control Events
<Button Name="Button1" Click="Button1_Click">
Click here
</Button>
<Button Name="Button1" Click="Button1_Click">
Click here
</Button>
public void Button1_Click(
object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello WPF");
}
public void Button1_Click(
object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello WPF");
}
What Are Routed Events?
Root elementRoot element
Child element
#1
Child element
#1
Child element
#2
Child element
#2
Leaf element
#1
Leaf element
#1
Leaf
element #2
Leaf
element #2
WPF can route events up or down the element tree
Event bubbling:
Event routed up element tree
Event bubbling:
Event routed up element tree
Event tunneling:
Event routed down element tree
Event tunneling:
Event routed down element tree
TunnelTunnel
TunnelTunnel
BubbleBubble
BubbleBubble
Item clickedItem clicked
Defining Routed Events
Example of event bubbling
• Define leaf elements inside a container element
• Handle leaf events at the container level
<StackPanel Button.Click="CommonClickHandler">
<Button Name="YesButton">Yes</Button>
<Button Name="NoButton">No</Button>
</StackPanel>
<StackPanel Button.Click="CommonClickHandler">
<Button Name="YesButton">Yes</Button>
<Button Name="NoButton">No</Button>
</StackPanel>
private void CommonClickHandler(object sender,
RoutedEventArgs e)
{
Button b = e.Source as Button;
...
}
private void CommonClickHandler(object sender,
RoutedEventArgs e)
{
Button b = e.Source as Button;
...
}
What Are Commands?
Commands separate the semantics of an action from its logic
• Multiple sources can trigger the same command
• You can customize the command logic for different targets
Key concepts in WPF commanding:
• Commands
• Command sources
• Command bindings
• Command manager
Examples of predefined commands:
• Copy, Cut, and Paste
Demonstration: Defining Commands
In this demonstration, you will see how to:
• Define menu items that perform Copy and Paste
commands
• Use the native ability of the TextBox to process the Copy
and Paste commands
Lesson: Navigating Between Pages
• The WPF Navigation Model
• Demonstration: Navigating Pages by Using Hyperlinks
• Handling Page Navigation Events
• Maintaining State by Using Navigation Services
The WPF Navigation Model
Navigate from one page to
another page
Navigate from one page to
another page
Navigate to a fragment in a
page
Navigate to a fragment in a
page
Navigate subcontent frames
in a page
Navigate subcontent frames
in a page
Demonstration: Navigating Pages by Using
Hyperlinks
In this demonstration, you will see how to:
• Create hyperlinks to navigate to other pages
• Create hyperlinks to navigate between pages and page
fragments
• Create a Frame to contain pages in a Window
Handling Page Navigation Events
Page Navigation
Request
Page Navigation
Request
NavigatingNavigating
NavigationProgressNavigationProgress
NavigatedNavigated
LoadCompletedLoadCompleted
FragmentNavigationFragmentNavigation
NavigationStoppedNavigationStopped
NavigationFailedNavigationFailed
Maintaining State by Using Navigation Services
Page1.xaml Page2.xaml
Page1.xaml
Next
Back
• KeepAlive property
• FrameworkPropertyMetadata.Journal
• IProvideCustomContentState
Lab: Creating a WPF Application
• Exercise 1: Creating a Stand-Alone WPF Application
• Exercise 2: Handling Events and Commands
• Exercise 3: Navigating Between Pages
• Exercise 4: Creating an XBAP Application
Logon information
Virtual machine 6460A-LON-DEV-01
User name Student
Password Pa$$w0rd
Estimated time: 60 minutes
Lab Review
• Why would you want to inherit your window from the
NavigationWindow class?
• How do you add an event handler to the Click event of a
<Button> element in XAML?
• What is the name of the property that you use to
configure a button to use the NextPage command?
• What is the name of the event to which you connect a
handler if you want to manually determine if a command
is allowed to be executed?
• When your application is running in a browser (XBAP),
why are you not able to access the FileName property of
the OpenFileDialog class?
Module Review and Takeaways
• Review Questions
• Common Issues and Troubleshooting Tips
• Best Practices
• Tools

Contenu connexe

Tendances

Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitJavier Suárez Ruiz
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5JayjZens
 
WPF - the future of GUI is near
WPF - the future of GUI is nearWPF - the future of GUI is near
WPF - the future of GUI is nearBartlomiej Filipek
 
Forms With Ajax And Advanced Plugins
Forms With Ajax And Advanced PluginsForms With Ajax And Advanced Plugins
Forms With Ajax And Advanced PluginsManuel Lemos
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgetstoddkloots
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Doris Chen
 
Integrazione PHP e Silverlight 4
Integrazione PHP e Silverlight 4Integrazione PHP e Silverlight 4
Integrazione PHP e Silverlight 4pietrobr
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptfranksvalli
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
WPF L01-Layouts, Controls, Styles and Templates
WPF L01-Layouts, Controls, Styles and TemplatesWPF L01-Layouts, Controls, Styles and Templates
WPF L01-Layouts, Controls, Styles and TemplatesMohammad Shaker
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Javier Suárez Ruiz
 
WPF L02-Graphics, Binding and Animation
WPF L02-Graphics, Binding and AnimationWPF L02-Graphics, Binding and Animation
WPF L02-Graphics, Binding and AnimationMohammad Shaker
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labelsRuss Weakley
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work EverywhereDoris Chen
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementationdavejohnson
 

Tendances (20)

Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community Toolkit
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
WPF - the future of GUI is near
WPF - the future of GUI is nearWPF - the future of GUI is near
WPF - the future of GUI is near
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Forms With Ajax And Advanced Plugins
Forms With Ajax And Advanced PluginsForms With Ajax And Advanced Plugins
Forms With Ajax And Advanced Plugins
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgets
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
 
Integrazione PHP e Silverlight 4
Integrazione PHP e Silverlight 4Integrazione PHP e Silverlight 4
Integrazione PHP e Silverlight 4
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
WPF L01-Layouts, Controls, Styles and Templates
WPF L01-Layouts, Controls, Styles and TemplatesWPF L01-Layouts, Controls, Styles and Templates
WPF L01-Layouts, Controls, Styles and Templates
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
 
WPF L02-Graphics, Binding and Animation
WPF L02-Graphics, Binding and AnimationWPF L02-Graphics, Binding and Animation
WPF L02-Graphics, Binding and Animation
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 

Similaire à WPF (Windows Presentation Foundation Unit 01)

Windows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsWindows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsOliver Scheer
 
Aura Framework Overview
Aura Framework OverviewAura Framework Overview
Aura Framework Overviewrajdeep
 
javascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptjavascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptLalith86
 
Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1drudolph11
 
CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32Bilal Ahmed
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02Vivek chan
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02Mani Chaubey
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy stepsprince Loffar
 
Easy javascript
Easy javascriptEasy javascript
Easy javascriptBui Kiet
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKBrendan Lim
 
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
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Mahmoud Hamed Mahmoud
 
My Very First Zf App Part One
My Very First Zf App   Part OneMy Very First Zf App   Part One
My Very First Zf App Part Oneisaaczfoster
 
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)Nuzhat Memon
 
Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#Tamir Dresher
 
2006 - Basta!: Advanced server controls
2006 - Basta!: Advanced server controls2006 - Basta!: Advanced server controls
2006 - Basta!: Advanced server controlsDaniel Fisher
 

Similaire à WPF (Windows Presentation Foundation Unit 01) (20)

Event Programming JavaScript
Event Programming JavaScriptEvent Programming JavaScript
Event Programming JavaScript
 
Windows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 ApplicationsWindows Phone 8 - 3 Building WP8 Applications
Windows Phone 8 - 3 Building WP8 Applications
 
Aura Framework Overview
Aura Framework OverviewAura Framework Overview
Aura Framework Overview
 
javascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptjavascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.ppt
 
Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1
 
CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Easy javascript
Easy javascriptEasy javascript
Easy javascript
 
Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDK
 
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
 
Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development Windows Store app using XAML and C#: Enterprise Product Development
Windows Store app using XAML and C#: Enterprise Product Development
 
My Very First Zf App Part One
My Very First Zf App   Part OneMy Very First Zf App   Part One
My Very First Zf App Part One
 
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)
Std 12 Computer Chapter 2 Cascading Style Sheet and Javascript (Part-2)
 
Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#
 
Chpater1
Chpater1Chpater1
Chpater1
 
2006 - Basta!: Advanced server controls
2006 - Basta!: Advanced server controls2006 - Basta!: Advanced server controls
2006 - Basta!: Advanced server controls
 
Javascript projects Course
Javascript projects CourseJavascript projects Course
Javascript projects Course
 
Extjs
ExtjsExtjs
Extjs
 

Plus de Prashanth Shivakumar (11)

XML Unit 01
XML Unit 01XML Unit 01
XML Unit 01
 
WCF (Windows Communication Foundation_Unit_01)
WCF (Windows Communication Foundation_Unit_01)WCF (Windows Communication Foundation_Unit_01)
WCF (Windows Communication Foundation_Unit_01)
 
VB.Net GUI Unit_01
VB.Net GUI Unit_01VB.Net GUI Unit_01
VB.Net GUI Unit_01
 
UML Unit 01
UML Unit 01UML Unit 01
UML Unit 01
 
Web Component Development with Servlet and JSP Technologies Unit 01
Web Component Development with Servlet and JSP Technologies Unit 01Web Component Development with Servlet and JSP Technologies Unit 01
Web Component Development with Servlet and JSP Technologies Unit 01
 
RDBMS_Unit 01
RDBMS_Unit 01RDBMS_Unit 01
RDBMS_Unit 01
 
J2ME Unit_01
J2ME Unit_01J2ME Unit_01
J2ME Unit_01
 
Data Structures and Algorithms Unit 01
Data Structures and Algorithms Unit 01Data Structures and Algorithms Unit 01
Data Structures and Algorithms Unit 01
 
C++ Unit_01
C++ Unit_01C++ Unit_01
C++ Unit_01
 
Advanced excel unit 01
Advanced excel unit 01Advanced excel unit 01
Advanced excel unit 01
 
C programming unit 01
C programming unit 01C programming unit 01
C programming unit 01
 

Dernier

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 

Dernier (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 

WPF (Windows Presentation Foundation Unit 01)

  • 2. Module 1: Creating an Application by Using Windows Presentation Foundation • Overview of WPF • Creating a Simple WPF Application • Handling Events and Commands • Navigating Between Pages
  • 3. Lesson: Overview of WPF • What Is WPF? • WPF Architecture • Defining User Interfaces in WPF • WPF Capabilities and Features • WPF Application Types
  • 4. What Is WPF? It is a new foundation for building Windows-based applications by using: • Media • Documents • Application UI .NET Framework 4.5.NET Framework 4.5 Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows Workflow Foundation (WF) Windows CardSpace (WCS) Windows CardSpace (WCS)
  • 5. WPF Architecture WPF Core Components PresentationFrameworkPresentationFramework Common Language Runtime Common Language Runtime PresentationCorePresentationCore milcoremilcore DirectXDirectXUser32User32 KernelKernel Managed Code Unmanaged Code
  • 6. Defining User Interfaces in WPF <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window> <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>
  • 7. WPF Capabilities and Features WPF provides the following capabilities and features: • XAML-based user interfaces • Page layout management • Data binding • 2-D and 3-D graphics • Multimedia • Animation • Documents and printing • Security • Accessibility • Localization • Interoperability with Windows Forms controls
  • 8. WPF Application Types Stand-Alone Applications XAML Browser Applications (XBAPs)
  • 9. Lesson: Creating a Simple WPF Application • Demonstration: Creating WPF Applications by Using Visual Studio 2012 • Defining the Application • Defining Windows or Pages • Adding Controls • Building and Running a WPF Application
  • 10. Demonstration: Creating WPF Applications by Using Visual Studio 2012 In this demonstration, you will see how to: • Create a stand-alone WPF application • Create a browser application • Add controls to your application
  • 11. Defining the Application <Application xmlns:x=… xmlns=… x:Class="MyApp.App" StartupUri="Window1.xaml"> <Application.Resources> … </Application.Resources> </Application> <Application xmlns:x=… xmlns=… x:Class="MyApp.App" StartupUri="Window1.xaml"> <Application.Resources> … </Application.Resources> </Application> Visual Studio generates a XAML application file that specifies: • The code-behind class for the application • The startup window or page • Application-wide resources
  • 12. Defining Windows or Pages A stand-alone application contains windows or pages • They are represented by <Window> or <Page> elements in the XAML file • The code-behind file contains event-handler code <Window xmlns:x=… xmlns=… x:Class="MyApp.Window1" Title="My Window"> <Grid> … </Grid> </Window> <Window xmlns:x=… xmlns=… x:Class="MyApp.Window1" Title="My Window"> <Grid> … </Grid> </Window> <Page xmlns:x=… xmlns=… x:Class="MyApp.Page1" WindowTitle="My Page"> <Grid> … </Grid> </Page> <Page xmlns:x=… xmlns=… x:Class="MyApp.Page1" WindowTitle="My Page"> <Grid> … </Grid> </Page>
  • 13. Adding Controls Windows and pages contain controls • The controls are represented by XAML elements •<Button> and <TextBox> are examples of these ... <Grid> <TextBox Name="TextBox1" /> <Button Name="Button1">Click here</Button> </Grid> ... ... <Grid> <TextBox Name="TextBox1" /> <Button Name="Button1">Click here</Button> </Grid> ...
  • 14. Building and Running a WPF Application You can build and run a WPF application in Visual Studio Stand-alone or browser application Stand-Alone Application Browser Application
  • 15. Lesson: Handling Events and Commands • The WPF Event Model • Handling WPF Control Events • What Are Routed Events? • Defining Routed Events • What Are Commands? • Demonstration: Defining Commands
  • 16. The WPF Event Model WPF controls generate events such as: • Clicking buttons • Entering text • Selecting lists • Gaining focus
  • 17. Implement event handler method in the code-behind file Specify an event handler in the XAML file Handling WPF Control Events <Button Name="Button1" Click="Button1_Click"> Click here </Button> <Button Name="Button1" Click="Button1_Click"> Click here </Button> public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); } public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }
  • 18. What Are Routed Events? Root elementRoot element Child element #1 Child element #1 Child element #2 Child element #2 Leaf element #1 Leaf element #1 Leaf element #2 Leaf element #2 WPF can route events up or down the element tree Event bubbling: Event routed up element tree Event bubbling: Event routed up element tree Event tunneling: Event routed down element tree Event tunneling: Event routed down element tree TunnelTunnel TunnelTunnel BubbleBubble BubbleBubble Item clickedItem clicked
  • 19. Defining Routed Events Example of event bubbling • Define leaf elements inside a container element • Handle leaf events at the container level <StackPanel Button.Click="CommonClickHandler"> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button> </StackPanel> <StackPanel Button.Click="CommonClickHandler"> <Button Name="YesButton">Yes</Button> <Button Name="NoButton">No</Button> </StackPanel> private void CommonClickHandler(object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... } private void CommonClickHandler(object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }
  • 20. What Are Commands? Commands separate the semantics of an action from its logic • Multiple sources can trigger the same command • You can customize the command logic for different targets Key concepts in WPF commanding: • Commands • Command sources • Command bindings • Command manager Examples of predefined commands: • Copy, Cut, and Paste
  • 21. Demonstration: Defining Commands In this demonstration, you will see how to: • Define menu items that perform Copy and Paste commands • Use the native ability of the TextBox to process the Copy and Paste commands
  • 22. Lesson: Navigating Between Pages • The WPF Navigation Model • Demonstration: Navigating Pages by Using Hyperlinks • Handling Page Navigation Events • Maintaining State by Using Navigation Services
  • 23. The WPF Navigation Model Navigate from one page to another page Navigate from one page to another page Navigate to a fragment in a page Navigate to a fragment in a page Navigate subcontent frames in a page Navigate subcontent frames in a page
  • 24. Demonstration: Navigating Pages by Using Hyperlinks In this demonstration, you will see how to: • Create hyperlinks to navigate to other pages • Create hyperlinks to navigate between pages and page fragments • Create a Frame to contain pages in a Window
  • 25. Handling Page Navigation Events Page Navigation Request Page Navigation Request NavigatingNavigating NavigationProgressNavigationProgress NavigatedNavigated LoadCompletedLoadCompleted FragmentNavigationFragmentNavigation NavigationStoppedNavigationStopped NavigationFailedNavigationFailed
  • 26. Maintaining State by Using Navigation Services Page1.xaml Page2.xaml Page1.xaml Next Back • KeepAlive property • FrameworkPropertyMetadata.Journal • IProvideCustomContentState
  • 27. Lab: Creating a WPF Application • Exercise 1: Creating a Stand-Alone WPF Application • Exercise 2: Handling Events and Commands • Exercise 3: Navigating Between Pages • Exercise 4: Creating an XBAP Application Logon information Virtual machine 6460A-LON-DEV-01 User name Student Password Pa$$w0rd Estimated time: 60 minutes
  • 28. Lab Review • Why would you want to inherit your window from the NavigationWindow class? • How do you add an event handler to the Click event of a <Button> element in XAML? • What is the name of the property that you use to configure a button to use the NextPage command? • What is the name of the event to which you connect a handler if you want to manually determine if a command is allowed to be executed? • When your application is running in a browser (XBAP), why are you not able to access the FileName property of the OpenFileDialog class?
  • 29. Module Review and Takeaways • Review Questions • Common Issues and Troubleshooting Tips • Best Practices • Tools

Notes de l'éditeur

  1. Explain to the students that WPF is part of the Microsoft .NET Framework 4.5 family of technologies, which also includes Windows® Communication Foundation (WCF), Windows® Workflow Foundation (WF), and Windows CardSpace™ (WCS) identity selector. Explain that the architects of WPF designed it to be a declarative, programmable platform that incorporated the best features of the Web and the Windows® operating system by uniting user interfaces (UIs), documents, and media for developers and designers. Question: What other UI frameworks have you used? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  2. Explain to the students that WPF contains three components that have been delivered on top of the existing Microsoft .NET Framework 4.5. Two of these components are managed components, and these are the components with which the students will interact. The other component is a highly optimized piece of unmanaged code that interfaces directly with the Microsoft DirectX® application programming interface (API) component of the .NET Framework.
  3. Briefly explain that you can build UIs in WPF by using either declarative code in Extensible Application Markup Language (XAML) or by writing imperative code in Microsoft Visual C#® or Microsoft Visual Basic®. In almost all cases, the results are identical, but in practice, XAML is easier to write and maintain. In terms of UIs, there is nothing that cannot be done in both XAML and code. In Windows Forms, the serialization format for UIs was code, but in WPF, it is XAML. You could simply describe XAML as a serialization format for WPF classes. Question: Can you think of any other markup languages that behave in a similar way to XAML? Answer: The primary markup language that deals with UI in a similar way to WPF is HTML.
  4. Briefly summarize each feature on the slide, and explain that this course describes each of these features. Do not give technical details about how these features work at this stage.
  5. For stand-alone applications, summarize the UI elements that typically appear in a window. For example, explain that stand-alone applications are often menu-driven and contain controls that open new windows. Mention that stand-alone applications also contain standard plumbing such as an entry point and a message loop, but do not describe these characteristics in detail at this stage. For XML browser applications (XBAPs), emphasize that such applications are deployed onto a Web server and are invoked by using a Web browser. Mention that browser applications typically use hyperlinks to enable the user to navigate from one page to another. Tell students that Microsoft Visual Studio® 2012 development system provides automated support to help create both stand-alone and browser applications. This course describes how to create both types of application. Question: What applications have you created that would benefit from being written as XBAPs instead of stand-alone applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  6. In this demonstration, you will show how to create the two project types in WPF by using Visual Studio 2012. High-level demonstration steps: Open Visual Studio 2012. On the File menu, point to New, and then click Project. In the New Project dialog box, in Templates, click WPF Application. In the Name box, type StandaloneApplication In the Location box, type E:\Democode\Starter In the Solution Name box, type ApplicationTypes and then click OK. Briefly explain that Visual Studio 2012 has created a fully functional stand-alone WPF application. Then explain the major components of the WPF designer in Visual Studio. Add a new WPF Browser Application project called BrowserApplication to the solution. Explain that the two application types look very similar in the designer. The only obvious difference between them is that the stand-alone application contains a &amp;lt;Window&amp;gt; element and the browser application contains a &amp;lt;Page&amp;gt; element. In the stand-alone application, in the ToolBox, drag a TextBox onto the designer, and then position it roughly in the top left of the form. In the ToolBox, drag a Button onto the designer, and then position it to the right of the TextBox. In the browser application, repeat Steps 10 and 11. Point out that both the experience and the XAML that is generated in both forms are identical. Explain that adding controls to the WPF designer is a very similar experience to using the designers in Windows Forms or ASP.NET. Leave Visual Studio 2012 open because you may want to refer to what Visual Studio has created for you during the remainder of the lesson.
  7. Remind students that Visual Studio 2012 enables them to create two types of application: stand-alone applications and browser applications. Emphasize that both types of application have an application XAML file. Describe the syntax of the application XAML file. Ask students if they are confident with XML syntax. If necessary, explain the XML syntax on the slide. Tell students that the XML namespaces have been elided on the slide so that the code can fit. Remind students that Visual Studio 2012 automatically generates this XAML file. After you explain the concepts, go to Visual Studio and show the students the App.xaml file and the App.xaml.cs file.
  8. Reiterate the difference between WPF windows and pages. A WPF window is a top-level window, whereas a WPF page is a browser-hosted page. Emphasize that WPF stand-alone applications can contain windows or pages, but that WPF browser applications can only contain pages. Describe the XAML on the slide. Point out the &amp;lt;Window&amp;gt; and &amp;lt;Page&amp;gt; XAML tags, and mention the corresponding Window and Page classes in WPF. Then, explain that the code-behind files contain event-handler code. Show students the XAML file for the window in the stand-alone application that you created in the demonstration. Then, show students the XAML file for the page in the browser application that you created in the demonstration.
  9. Describe the &amp;lt;TextBox&amp;gt; and &amp;lt;Button&amp;gt; elements on the slide. Tell students that these elements correspond to classes. Also tell students that the same elements are used in stand-alone applications and browser applications. Switch to the Visual Studio instance and reiterate that, for both the stand-alone application and the browser application, Visual Studio adds the &amp;lt;Button&amp;gt; and &amp;lt;TextBox&amp;gt; elements to the XAML.
  10. Tell students that they can build and run a WPF application in Visual Studio 2012. Explain that the UI of the application depends on whether it is a stand-alone or browser application. Build and run the two applications that you created during the demonstration. Remember to change the startup project to show both applications.
  11. Ask students if they are familiar with event handling in ASP.NET 4.5 Web applications. If they are, it will be useful because there are some similarities between the event-handling notation in ASP.NET 4.5 and WPF. Describe the events that are listed on the slide, and ask students to suggest other events that they may want to handle in a WPF application. Question: Can you suggest other events that you may want to handle in a WPF application? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  12. Describe the XAML syntax for specifying an event handler for an event on a UI control. Emphasize the fact that the name of the event is predefined, but that the developer can specify the name of the event handler method. Describe the event handler methods. If time permits, switch to the stand-alone application that you created earlier and define an event handler method for the button that you click on the window.
  13. Explain that WPF supports event routing, and describe the terms &amp;quot;event bubbling&amp;quot; and &amp;quot;event tunneling.&amp;quot; Give some examples of where event bubbling and event tunneling are useful. Question: Can you think of some examples where event bubbling and event tunneling would be useful in your applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  14. Explain the XAML file first. Briefly mention that StackPanel is a type of container element, and tell students that it is described in more detail later in the course. Explain how the StackPanel element handles button-click events for all of the buttons that are defined inside it. Explain the C# code-behind file for the event handler method. If necessary, show students how to implement a similar event handler method in Visual Basic. Emphasize that this method will handle click events on any of the three buttons defined in the StackPanel element. Point out that the second parameter is a RoutedEventArgs object, not a simple EventArgs object. Ask students how they might implement similar behavior if WPF did not support routed events. The answer is to define a separate Click attribute on each &amp;lt;Button&amp;gt; element, and specify the same event handler method in each case. Ask students why the routed events approach is better.
  15. Explain what a command is, and then explain the benefits of defining and using commands. Do not attempt to describe the syntax for commands because the following slide explains it. Describe the Copy, Cut, and Paste commands. Describe the four key concepts of commands in detail. Make sure that students understand how commands work before you look at the syntactic detail on the following slide. Question: Can you think of any situations where a command would benefit your application more than a standard event binding? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  16. In this demonstration, you will show how to define commands by using XamlPad. The code for this demonstration can be found at E:\Democode\Starter\Xaml\Demo2\ High-level demonstration steps: Open Windows Explorer, and then go to the E:\Democode\Starter\Xaml\Demo2\ folder. Right-click SimpleTextEditor.xaml, point to Open With, and then click Windows Presentation Foundation XamlPad Tool. Briefly mention that Menu and MenuItem elements are described in more detail later in the course. Then, explain that the MenuItem element has a Command property that enables you to specify the logical meaning of the menu item. Describe the ApplicationCommands.Copy and ApplicationCommands.Paste commands. Emphasize that these are predefined commands. Tell students that it is also possible to define custom commands, but advise students to use predefined commands where they exist. In XamlPad, on the Edit menu, explain why the Copy menu (and possibly the Paste menu) item is disabled. Type some text in the text box, and then select a few characters. On the Edit menu, explain that the Copy menu item is now available because there is text available for copying. Click Copy, and then deselect the characters in the text box. On the Edit menu, click Paste. Explain that the copying and pasting of the text has been successful because the TextBox has already implemented these two commands. Close XamlPad. Question: When you click the Copy menu item, what makes it possible for the contents for the TextBox to be placed on the Clipboard? Answer: Commands are routed, in much the same way as RoutedEvents.
  17. Tell students that WPF provides several ways to navigate between pages in a WPF application. Describe each of the scenarios on the slide.
  18. In this demonstration, you will show the students how to create hyperlinks to different pages and to fragments in pages, and then show them how to use a Frame in a Window. High-level demonstration steps: Open Visual Studio 2012. On the File menu, point to Open, and then click Project/Solution. In the Open Project dialog box, go to the E:\Democode\Starter\NavigationDemo folder, click NavigationDemo.sln, and then click Open. In Solution Explorer, double-click Page1.xaml. In the XAML editor, uncomment the first Hyperlink, and then describe the &amp;lt;Hyperlink&amp;gt; element, explaining that its NavigateUri property specifies the name of the XAML file to which to link. Uncomment the second Hyperlink, and then explain that this link points to a page fragment. Describe the syntax for linking to a fragment, and point out that the fragment can be on the same page or on a different page. In Solution Explorer, double-click Page2.xaml. Show the students that the third TextBlock has been given the name frag, which matches the name specified in the uniform resource identifier (URI) for the second link on Page1.xaml. On the Debug menu, click Start Debugging. In Window1, click Goto Page 2, and then point out that Page2.xaml has loaded. Also point out that the scroll bar is positioned at the top of page, which indicates that no scrolling has occurred. Click the Back button to go back to Page1.xaml, and then click Goto Page 2 fragment. Point out that Page2.xaml has been loaded again, but this time note that the scroll bar is further down the page, which indicates that the link went to a specific point in the page. On the Debug menu, click Stop Debugging. In Solution Explorer, right-click NavigationDemo, point to Add, and then click Window.
  19. In the Add New Item dialog box, click Add. In the XAML editor, in the &amp;lt;Grid&amp;gt; element, add a &amp;lt;Frame&amp;gt; element with a Width and Height of 150 and a Source of Page1.xaml. In Solution Explorer, double-click App.xaml, and then change the StartupUri property to Window2.xaml. On the Debug menu, click Start Debugging. Point out to the students that the page has not occupied the whole screen this time, just the area defined by the Frame. Navigate around the application to show that the frame behaves just as the NavigationWindow did before. When you have finished, on the Debug menu, click Stop Debugging. Close Visual Studio 2012. Question: What is the name of the property that you use on the Hyperlink class to specify which page or page fragment to navigate to when clicked? Answer: The NavigateUri property. Question: What situations can you think of in your own applications where a Frame would be useful? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
  20. Emphasize that page navigation events are raised by the NavigationService class and the Application class. Briefly describe each event, and ask students to suggest why they might handle these events in their applications. This is an animated slide. [Click 1] A request is made and the Navigating event is raised. [Click 2] During the processing of the request, the NavigationProgress event is raised periodically. [Click 3] After the page has been located and downloaded, the Navigated event is raised. [Click 4] If everything is working correctly, after the page has been loaded and parsed, the LoadCompleted event is raised. If the request was for a fragment, the FragmentNavigation event will also be raised. [Click 5] Alternatively, if the navigation is canceled, the NavigationStopped event is raised. If there is an error during navigation, the NavigationFailed event is raised. [Click 6] The complete event diagram is displayed.
  21. Explain to the students that the default behavior of the journal is that, when they navigate the journal by using the back and forward buttons, the pages that they navigate away from are destroyed. Of course, when a page is destroyed, all of the controls that may have held data are also destroyed. Navigating back to a page that has already been visited causes it to be re-created, but without any of its previous content. This is an animated slide. [Click 1] Selecting a button such as next on the page, which provides forward navigation, causes Page1.xaml to be destroyed and Page2.xaml to be created. [Click 2] Selecting the back button on the page causes Page2.xaml to be destroyed and a new copy of Page1.xaml to be created. However, any data that was previously held in Page1.xaml will not be present. [Click 3] Explain the options available for maintaining state between pages when using the navigation services: KeepAlive is a property on the Page class that prevents the navigation services from destroying the page; instead, it keeps the page in the journal for later use. FrameworkPropertyMetadata.Journal is a piece of metadata that can be supplied when a dependency property is created. (If the students are not familiar with the idea of dependency properties, briefly explain that they are a new type of property that was introduced with WPF for sparse storage and various other aspects in WPF such as styling and animation. The students will learn more about dependency properties later in the course.) The dependency property gives a hint to the journal so that it knows how to treat this data when the page is destroyed. Many controls such as TextBox, ListBox, and RadioButton already support this feature; therefore, using these controls in a page will not cause any data loss. IProvideCustomContentState is an interface that can be implemented to provide a custom mechanism to manage the state of a page.
  22. In this lab, students will create a WPF application. Exercise 1 In this exercise, students will create a stand-alone WPF application by using Visual Studio. Exercise 2 In this exercise, students will handle events and commands. Exercise 3 In this exercise, students will navigate between pages. Exercise 4 In this exercise, students will convert the stand-alone application to an XBAP application.   Before the students begin the lab, read the scenario associated with each exercise to the class. This will reinforce the broad issue that the students are troubleshooting and will help to facilitate the lab discussion at the end of the module. Remind the students to complete the discussion questions after the last lab exercise. Note: The lab exercise answer keys are provided on the Course Companion CD. To access the answer key, click the link located at the bottom of the relevant lab exercise page.
  23. Use the questions on the slide to guide the debriefing after students have completed the lab exercises. Question: Why would you want to inherit your window from the NavigationWindow class? Answer: When you must control the container of your pages, for example, if you want to change the height and width of the window, you must inherit from this class. Question: How do you add an event handler to the Click event of a Button in XAML? Answer: Inside the &amp;lt;Button&amp;gt;, type Click= and then press the TAB key. Question: What is the name of the property that you use to configure a Button to use the NextPage command? Answer: Command. For example: &amp;lt;Button x:Name=&amp;quot;next&amp;quot; Command=&amp;quot;NextPage&amp;quot; Content=&amp;quot;Next&amp;quot; HorizontalAlignment=&amp;quot;Right&amp;quot; Margin=&amp;quot;0,10,0,0&amp;quot; Width=&amp;quot;60&amp;quot; /&amp;gt; Question: What is the name of the event to which you connect a handler if you want to manually determine if a command is allowed to be executed? Answer: The CanExecute event. Question: When your application is running in a browser (XBAP), why are you not able to access the FileName property of the OpenFileDialog class? Answer: Because your application is running in a Partial Trust environment.
  24. Review Questions Point the students to the appropriate section in the course so that they are able to answer the questions presented in this section.   Common Issues and Troubleshooting Tips Point the students to possible troubleshooting tips for the issues presented in this section.   Best Practices Help the students understand the best practices presented in this section. Ask students to consider these best practices in the context of their own business situations.   Tools Point out the location from which each key tool can be installed. Let students review the function and usage of each tool on their own. Remind students that they can use this as a master list to help them gather all the tools required to facilitate their application support work.