Module 1: Creating an Application by Using Windows Presentation Foundation

1. 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

2. What Is WPF? • It is a new foundation for building Windows-based applications by using: • Media • Documents • Application UI Windows Workflow Foundation (WF) Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows CardSpace (WCS) .NET Framework 4.0

3. Defining User Interfaces in WPF <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>

4. 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

5. WPF Application Types Stand-Alone Applications XAML Browser Applications (XBAPs)

6. Defining the 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 <Application xmlns:x=… xmlns=… x:Class="MyApp.App" StartupUri="Window1.xaml"> <Application.Resources> … </Application.Resources> </Application>

7. Defining Windows A stand-alone application contains windows or pages • They are represented by <Window> 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>

8. 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> ...

9. The WPF Event Model WPF controls generate events such as: • Clicking buttons • Entering text • Selecting lists • Gaining focus

10. Handling WPF Control Events Specify an event handler in the XAML file <Button Name="Button1" Click="Button1_Click"> Click here </Button> Implement event handler method in the code-behind file public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }

11. What Are Routed Events? WPF can route events up or down the element tree Event tunneling: Event routed down element tree Root element Event bubbling: Event routed up element tree Tunnel Bubble Child element#2 Child element #1 Bubble Tunnel Leaf element #1 Leaf element #2 Item clicked

12. 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> private void CommonClickHandler(object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }

13. 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 Examples of predefined commands: • Copy, Cut, and Paste Key concepts in WPF commanding: • Commands • Command sources • Command bindings • Command manager

14. The WPF Navigation Model Navigate from one page to another page Navigate to a fragment in a page Navigate subcontent frames in a page

15. Handling Page Navigation Events Page Navigation Request Navigating NavigationProgress Navigated LoadCompleted FragmentNavigation NavigationStopped NavigationFailed

16. Maintaining State by Using Navigation Services Next Page1.xaml Page2.xaml Page1.xaml Back • KeepAlive property • FrameworkPropertyMetadata.Journal • IProvideCustomContentState

17. Why Design Patterns? • Application development is a murky business • Design patterns support move from chaos to order • A good pattern aids • Design • Implementation • Testing • Maintenance • Extension • Collaboration • Separation of Concerns

18. MVVM Design Pattern • Design Pattern for Application UIs • Evolved from MVP and MVC • Well suited to developing with WPF • Suits WPF core features • Data binding • Data templates • Commands • Resources subsystem

19. MVVM Tiers View UI Elements with Data Templates Bind and Convert data View-Model Abstraction of View with Commands Model Object Model or Data Access Tier

20. Lab: Creating a WPF Application Exercise 1: Creating a Stand-Alone WPF Application Exercise 2: Handling Events and Commands Exercise 3: Navigating Between Pages Estimated time: 60 minutes

21. 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?