WPF (Windows Presentation Foundation Unit 01)

Editor's Notes

• #5: 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.
• #6: 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.
• #7: 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.
• #8: 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.
• #9: 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.
• #11: 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 <Window> element and the browser application contains a <Page> 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.
• #12: 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.
• #13: 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 <Window> and <Page> 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.
• #14: Describe the <TextBox> and <Button> 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 <Button> and <TextBox> elements to the XAML.
• #15: 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.
• #17: 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.
• #18: 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.
• #19: Explain that WPF supports event routing, and describe the terms "event bubbling" and "event tunneling." 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.
• #20: 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 <Button> element, and specify the same event handler method in each case. Ask students why the routed events approach is better.
• #21: 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.
• #22: 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.
• #24: Tell students that WPF provides several ways to navigate between pages in a WPF application. Describe each of the scenarios on the slide.
• #25: 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 <Hyperlink> 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.
• #26: In the Add New Item dialog box, click Add. In the XAML editor, in the <Grid> element, add a <Frame> 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.
• #27: 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.
• #28: 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.
• #29: 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.
• #30: 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 <Button>, 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: <Button x:Name="next" Command="NextPage" Content="Next" HorizontalAlignment="Right" Margin="0,10,0,0" Width="60" /> 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.
• #31: 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.