21. 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
22.
23.
24. Handling WPF Control Events Implement event handler method in the code-behind file Specify an event handler in the XAML file <Button Name="Button1" Click="Button1_Click"> Click here </Button> public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show("Hello WPF"); }
25. What Are Routed Events? Root element Child element #1 Child element #2 Leaf element #1 Leaf element #2 WPF can route events up or down the element tree Event bubbling: Event routed up element tree Event tunneling: Event routed down element tree Tunnel Tunnel Bubble Bubble Item clicked
53. What Are Resources? Resources provide a simple way to reuse commonly defined objects and values For example: brushes, styles, and control templates XAML Code
54.
55. Referencing Resources in XAML To reference a resource statically: PropertyName=" {StaticResource ResourceKey } " <Button Background="{StaticResource blueBrush}" Foreground="{StaticResource whiteBrush}"> Text </Button> To reference a resource dynamically: PropertyName=" {DynamicResource ResourceKey } " <Button Background="{DynamicResource blueBrush}" Foreground="{DynamicResource whiteBrush}"> Text </Button>
62. Defining Styles <Page.Resources> <Style x:Key="myStyle" TargetType="{x:Type Label}"> <Setter Property="Background" Value="Blue" /> <Setter Property="Foreground" Value="White" /> </Style> </Page.Resources> Style for all Label elements To define a style that sets properties for all elements of a specified type: Define a < Style> element 1 Set the TargetType property to an element type 2 Define < Setter> child elements to set property values 3
63. Setting Styles Programmatically textblock1.Style = (Style)(Resources["TitleText"]); To apply a style programmatically: You can also modify styles programmatically to add, remove, or modify styles in the Resources collection Index into the Resources collection 1 Cast the resource object into a Style instance 2 Set the Style property on the control 3
64.
65.
66.
67. Providing User Customization by Using Template Bindings You use a template binding to define properties in the control template: Enables the control template to use ambient property values <Style TargetType="ListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBox"> <Border Background="{TemplateBinding ListBox.Background}" CornerRadius="5"> ... </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
68.
69.
70.
71. Defining Property Triggers To define a property trigger: Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Opacity" Value="0.5" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Opacity" Value="1.0" /> </Trigger> </Style.Triggers> </Style> Define a Trigger element 1 Specify the property that initiates the trigger 2 Define the behavior of the trigger 3
72.
73. Defining Animations You add animation elements to a Storyboard element to define animations <Rectangle Name="MyRectangle" ...> <Rectangle.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Opacity" To="0.0" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> EventTrigger Trigger action Storyboard Animation
74. Demonstration: Enhancing Controls by Using Triggers and Animations In this demonstration, you will see how to enhance the visual impact of controls by using triggers and animations
81. The WPF Data-Binding Model UI Element Managed Object ADO.NET Data Source XML Data
82.
83.
84.
85.
86.
87. What Are Property Change Notifications? Binding Target Binding Source Binding Object OneWay TwoWay OneWayToSource Bindings listen for changes in the target property and propagate them back to the source The time when the update happens is defined by the UpdateSourceTrigger property UpdateSourceTrigger
96. Overview of Binding to Collections You can bind item controls to a collection of objects For example: bind a ListBox control to a database result set ItemsSource Property Value Binding Target Binding Source ItemsControl Object Collection Object OneWay Binding Object
97. What Is an Observable Collection? Venus Earth Mars Ceres Jupiter Saturn Uranus Neptune Pluto Eris Implements INotifyCollectionChanged ItemsSource property Venus Earth Mars Jupiter Saturn Uranus Neptune Mercury Observable Collection New data items CollectionChanged
98.
99. Introduction to LINQ . NET Language Integrated Query C# Visual Basic Others Standard Query Operators DLinq (ADO.NET) XLinq ( System.Xml ) CLR Objects Relational Data XML
100.
101.
102. What Is a Data Template? Andy Jacobs 43 Robert Brown 34 Kelly Krout 63 Lola Jacobsen 23 MySample.Person MySample.Person MySample.Person MySample.Person Data Template
103.
104. Defining a Data Template as a Resource <Window.Resources> <DataTemplate x:Key="myDataTemplate"> <StackPanel> <TextBlock Text="{Binding Path=FirstName}" /> <TextBlock Text="{Binding Path=LastName}"/> </StackPanel> </DataTemplate> </Window.Resources> <ListBox ItemsSource="{Binding Source={StaticResource list}}" ItemTemplate="{StaticResource myDataTemplate}" /> You define reusable data templates as resources by setting the x:Key or DataType property on the DataTemplate
105.
106.
107.
Notes de l'éditeur
Module 0: Introduction Course 6460A Welcome students to the course and introduce yourself. Provide a brief overview of your background to establish credibility. Ask students to introduce themselves and provide their backgrounds, product experience, and expectations of the course. Record student expectations on a whiteboard or flip chart that you can reference during class.
Module 0: Introduction Course 6460A Describe the audience and the prerequisites for this course. This is an opportunity for you to identify students who may not have the appropriate background or experience to attend this course. Describe the course objectives.
Module 0: Introduction Course 6460A Briefly describe each module and what students will learn. Be careful not to go into too much detail because the course is introduced in detail in Module 1. Explain how this course will meet students’ expectations by relating the information that is covered in individual modules to their expectations.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Design were created a quarter of century ago Hardware Shift – Power, Resolution, GPU Give power back to ordinary user Computers are so much cooler in Movies Module 1: Creating an Application by Using Windows Presentation Foundation Course 6461A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A Explain to the students that WPF is part of the Microsoft .NET Framework 3.0 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.
Explain to the students that WPF contains three components that have been delivered on top of the existing Microsoft .NET Framework 2.0. 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. MIL (media integration core) Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
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. Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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® 2008 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A In this demonstration, you will show how to create the two project types in WPF by using Visual Studio 2008. High-level demonstration steps: Open Visual Studio 2008. 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 2008 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 2008 open because you may want to refer to what Visual Studio has created for you during the remainder of the lesson.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A Remind students that Visual Studio 2008 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 2008 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A Tell students that they can build and run a WPF application in Visual Studio 2008. 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A Ask students if they are familiar with event handling in ASP.NET 2.0 Web applications. If they are, it will be useful because there are some similarities between the event-handling notation in ASP.NET 2.0 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Explain that WPF supports event routing, and describe the terms &quot;event bubbling&quot; and &quot;event tunneling.&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. Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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. Commands represent actions independent from their user interface exposure
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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 .
Module 1: Creating an Application by Using Windows Presentation Foundation Course 6460A 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.
Module 2: Building User Interfaces Course 6460A
Module 2: Building User Interfaces Course 6460A
Module 2: Building User Interfaces Course 6460A This is an animated slide. [Click 1] Describe the measurement pass of the layout process. [Click 2] Explain that an abstract rectangular bounding box surrounds each control, which you can get by calling GetLayout on a FrameworkElement . [Click 3] Describe the arrangement pass of the layout process. Ensure that students understand the iterative nature of the layout process and the effect of the parent and other child objects on the final size of each child object. Discuss the impact on performance of the recursive nature of the layout process.
Module 2: Building User Interfaces Course 6460A Briefly describe the purpose and typical usage scenarios of each of the layout classes. Do not go into too much detail because they are illustrated in the following demonstrations. Mention that Panel -derived elements support the FlowDirection property to help with localization and globalization. Explain why DockPanel , Grid , and StackPanel are good choices for localizable user interfaces (UIs), but Grid is not. Question: When do you think you would use a custom layout class that derives from Panel ? Answer: A radial layout that arranges content in a circular fashion radiating from the center of the panel is an example of a custom layout. See “Custom Radial Panel Sample” on the MSDN Web site. <http://msdn2.microsoft.com/en-us/library/ms771363.aspx>
Module 2: Building User Interfaces Course 6460A In this demonstration, you will show how to define layout by using panels. The code for this demonstration can be found at E:\\Democode\\Starter\\Xaml\\Demo1\\ Using the Canvas class: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo1\\ folder. Right-click Canvas.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Canvas> element in the text editor pane, and then show the rendered output. In the text editor pane, change the values of the Canvas.Top and Canvas.Left attached properties for the two TextBlock elements to show the effect on the layout. Close XamlPad. Using the StackPanel class: In Windows Explorer, right-click StackPanel.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <StackPanel> element in the text editor pane, and then show the rendered output. In the text editor pane, change the values of the HorizontalAlignment and VerticalAlignment properties to show the effect on the layout of the child Button objects. Close XamlPad. Using the WrapPanel class: In Windows Explorer, right-click WrapPanel.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <WrapPanel> element in the text editor pane, and then show the rendered output. In the text editor pane, add an additional <Button> element to the <WrapPanel> to show the effect on the layout of the child button objects. Close XamlPad.
Using the DockPanel class: In Windows Explorer, right-click DockPanel.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <DockPanel> element and its child <Button> elements in the text editor pane, and then show the rendered output. Explain that the order in which the child objects are declared affects their layout characteristics. Show that the first <Button> element is docked to the right, so its height fills the entire height of the DockPanel , but the last <Button> element is docked to the left, so its height is restricted by the top and bottom elements that are declared before it. Explain that setting the LastChildFill property on the DockPanel element ensures that the final <Button> element fills the remaining space. Close XamlPad. Question: When do you think it would be appropriate to use each of the different layout classes? Answer: Canvas: Use this class to position child objects at precise locations. Canvas is the only layout class that allows child objects to be drawn outside its bounds. StackPanel: Use this class to arrange child objects into a single line such as for a toolbar-style arrangement of buttons. WrapPanel: Use this class to position child objects in horizontal or vertical rows such as the list view in Windows Explorer. DockPanel: Use this class to dock child objects to the edges of the container such as a “paned” UI, similar to that found in Microsoft Office Outlook®. Question: What layout scenarios are not appropriate for these layout classes? Answer: These layout classes are not appropriate for grid-based or custom layouts. Module 2: Building User Interfaces Course 6460A 7
Module 2: Building User Interfaces Course 6460A In this demonstration, you will show how to define layout by using grids. The code for this demonstration can be found at E:\\Democode\\Starter\\Xaml\\Demo2\\ High-level demonstration steps: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo2\\ folder. Right-click Grid.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Grid> element in the text editor pane, and then explain the <Grid.ColumnDefinitions> and <Grid.RowDefinitions> child elements. Show that the layout of the child elements is specified by using the Grid.Row , Grid.Column , and Grid.ColumnSpan attached properties. In the text editor pane, change the ShowGridLines property to True to show the columns and rows that are defined for the Grid . Explain that the Margin property on child objects enables more precise positioning within the specified layout slot. Note: The margin values are specified in the order left, top, right, bottom. Close XamlPad. Question: When do you think it would be appropriate to use the Grid class to define layout? Answer: Use the Grid class to arrange child objects in rows and columns. The Grid class also enables you to layer child objects, span multiple rows or columns, and position child objects relative to the area of their cell boundaries.
Module 2: Building User Interfaces Course 6460A
Module 2: Building User Interfaces Course 6460A Briefly describe the Decorator content model, which decorates the single child object that is specified by the Child property. Explain that the Border class is a common Decorator .
Module 2: Building User Interfaces Course 6460A In this demonstration, you will show how to create a user interface by using content controls. The code for this demonstration can be found at E:\\Democode\\Starter\\Xaml\\Demo3\\ Using the ContentControl class: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo3\\ folder. Right-click TextButton.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Button> element in the text editor pane, and then show that the text content is assigned to the Content property. Close XamlPad. In Windows Explorer, right-click DateButton.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Button> element in the text editor pane, and then show that the content of the button is a DateTime object. Close XamlPad. In Windows Explorer, right-click RectangleButton.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Button> element in the text editor pane, and then show that the content of the button is a Rectangle element. Close XamlPad. In Windows Explorer, right-click ImageTextButton.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Button> element in the text editor pane, and then show that the content of the button is a StackPanel element, which contains an Ellipse element and a TextBlock element. Close XamlPad.
Using the Border Decorator class: In Windows Explorer, right-click DecoratorButton.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the <Button> element in the text editor pane, and then show that the content of the button is a Border element. Show that the Border element defines the thickness of the border and the brush that WPF uses to paint the border. Show that the content of the Border element is a Rectangle element. Close XamlPad. Course 6460A Module 2: Building User Interfaces 12
Module 2: Building User Interfaces Course 6460A Question: What is the difference between the ContentControl and HeaderedContentControl classes? Answer: Both classes can contain a single child item in the Content property, but the HeaderedContentControl class derives from the ContentControl class and additionally exposes the Header property. The Header content is typically used to label or identify the primary content. Examples of classes that derive from the HeaderedContentControl class include Expander , GroupBox , and TabItem .
Module 2: Building User Interfaces Course 6460A In this demonstration, you will show how to create a user interface by using headered content controls. The code for this demonstration can be found at E:\\Democode\\Starter\\Xaml\\Demo4\\ Using the TabItem class: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo4\\ folder. Right-click HeaderedContent.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . In XamlPad, show the first <TabItem> element in the text editor pane. Show that the Header property is assigned a simple text value (“Page 1”), and then show that the content is also simple text. In the text editor pane, show the second <TabItem> element. Show that the Header property contains a WrapPanel , which itself contains an Ellipse and a Rectangle . In the rendered content pane, click Page 2 . Using the GroupBox class: In the text editor pane, show that the second <TabItem> content contains a <GroupBox> element. Show that the value of the Header property of the <GroupBox> element is assigned a simple text value. Show that the content of the <GroupBox> element is an <Expander> element. Using the Expander class: In the text editor pane, show the <Expander> element. Show that the value of the Header property is assigned a simple text value. Show that the <Expander> element also exposes the IsExpanded property, which determines whether the element is initially expanded. Show that the value of the Background property for the <Expander> element is a LinearGradientBrush .
Show that the content of the <Expander> element is a <TextBlock> element. Close XamlPad. Module 2: Building User Interfaces Course 6460A
Module 2: Building User Interfaces Course 6460A
Module 2: Building User Interfaces Course 6460A Ensure that students understand the difference between the single item content model of the ContentControl and the multiple item content model of the ItemsControl . Question: What is the difference between the content model exposed by the ItemsControl class and the content model exposed by the ContentControl class? Answer: The ContentControl class exposes a single item content model, but the ItemsControl class exposes a content model that enables an element to contain multiple items.
Module 2: Building User Interfaces Course 6460A Remind students that the code on this slide is specific to the ListBox class, but the principle is the same for other items controls.
Module 2: Building User Interfaces Course 6460A In this demonstration, you will show how to create a user interface by using items controls. The code for this demonstration can be found at the following locations: If you are using Microsoft Visual Basic® development system: E:\\Democode\\Starter\\VB\\Demo5\\ If you are using Microsoft Visual C#® development tool: E:\\Democode\\Solution\\CS\\Demo5\\ High-level demonstration steps: In Microsoft Visual Studio® 2008 development system, open the Demo5.sln solution file. In Solution Explorer, double-click Window1.xaml . Show the all the different items that are contained within the <ListBox> collection of items. In the <ListBox> element, show the SelectionChanged event definition. In Solution Explorer, click View Code . In the code-behind file, show the SelectionChanged event handler. On the toolbar, click Start Debugging , and then click different items in the ListBox to show the message at the bottom of the window, which shows the type of the current selection. Close the demonstration application window, and then close Visual Studio 2008.
Module 2: Building User Interfaces Course 6460A Review Questions Point the students to the appropriate section in the course so that they are able to answer the questions in this section. 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.
Module 3: Customizing Appearance Course 6460A
Module 3: Customizing Appearance Course 6460A
Module 3: Customizing Appearance Course 6460A Describe what styles and control templates are, and advise students that styles and control templates are covered later in this module.
Module 3: Customizing Appearance Course 6460A Explain why you would define resources at each of the scopes listed on the slide, and then describe the syntax for defining resources. Explain the Extensible Application Markup Language (XAML) example on the slide, and remind students that the <Window.Resources> element must be defined in a <Window> element.
Module 3: Customizing Appearance Course 6460A Explain the difference between static resource lookup and dynamic resource lookup. Explain the syntax for referencing resources statically and dynamically, and then discuss the examples.
Module 3: Customizing Appearance Course 6460A Describe why you might want to access resources programmatically, and then discuss the examples on the slide. Also, you may like to show an example of how to add or remove resources in the Resources collection.
Module 3: Customizing Appearance Course 6460A Emphasize how useful it is to that you can define resources to reuse across multiple applications. Make sure that you spend enough time explaining what a merged dictionary is.
Module 3: Customizing Appearance Course 6460A In this demonstration, you will show how to share resources in a Windows® Presentation Foundation (WPF) application. The solution code for this demonstration can be found at the following locations: If you are using Microsoft Visual Basic® development system: E:\\Democode\\Solution\\VB\\Demo1\\ If you are using Microsoft Visual C#® development tool: E:\\Democode\\Solution\\CS\\Demo1\\ High-level demonstration steps: Run Microsoft Visual Studio® 2008 development system. Open the Demo1 solution from the following locations: If you are using Visual Basic: E:\\Democode\\Starter\\VB\\Demo1\\ If you are using Visual C#: E:\\Democode\\Starter\\CS\\Demo1\\ In Solution Explorer, double-click Window1.xaml . In Window1.xaml, in the XAML pane, show the Window.Resources section, which contains two SolidColorBrush elements, a LinearGradientBrush element, and a Double value. Show the TextBlock element, which uses the two SolidColorBrush resources for the Background and Foreground properties. Show the Ellipse element, which uses one of the SolidColorBrush resources for the Fill property and uses the Double value to specify both the Width and Height properties. In Solution Explorer, click Window1.xaml , and then click View Code . Position the insertion point inside the changeResources_Click event handler, type ellipseFill and then press the TAB key twice. Explain that this code retrieves the LinearGradientBrush resource from the Resources collection and then assigns it to the Background property of the TextBlock element and the Fill property of the Ellipse element. Insert a new line after the code that you inserted in the previous step, type findResource and then press the TAB key twice. Explain that this code uses the TryFindResource method to locate the Double resource named dimension . Explain that this code also updates the value for the resource and updates the Resources collection. Explain that because the Ellipse element uses the DynamicResource markup extension, the Width and Height properties are updated when the resource is updated. Press F5 to run the application, click Change to show the effect of the code that you inserted and then close the application. Close Visual Studio 2008.
Module 3: Customizing Appearance Course 6460A Emphasize that this topic only covers the WPF localization features at a high level. The topic of globalization and localization is too broad to be covered in depth in this course.
Module 3: Customizing Appearance Course 6460A
Module 3: Customizing Appearance Course 6460A Compare styles to Cascading Style Sheets; the concepts are similar, although the implementation details are quite different. Remind students about resources, as discussed in the previous lesson. Point out to students that many WPF controls contain other WPF controls, so creating a style that applies to all controls of a type can have broad impact.
Module 3: Customizing Appearance Course 6460A Describe the syntax for defining styles. Explain the TargetType property, and describe the syntax for setting property values by using the Setter element.
Module 3: Customizing Appearance Course 6460A Ask students why they might want to apply styles programmatically. Also explain that you can add new styles by using the Resources collection.
Module 3: Customizing Appearance Course 6460A
Module 3: Customizing Appearance Course 6460A Describe the Button element as an example of how a control provides behavior and appearance. Then explain that the default appearance is defined by a predefined ControlTemplate for each type of control, and tell students that they can completely redefine the appearance and structure of a control by defining a new ControlTemplate . Emphasize that this flexibility dramatically reduces the necessity to define custom control classes in WPF.
Module 3: Customizing Appearance Course 6460A Explain the syntax for defining a ControlTemplate for a content control, and then describe the example on the slide in detail. Mention that the default ControlTemplate definition includes the appearance for states such as pressed, and focused, which are defined in triggers. Don’t go into too much detail because triggers and animations are covered later in this module in the topic Enhancing User Interfaces by Using Triggers and Animations.
Module 3: Customizing Appearance Course 6460A Point out the syntactic similarity between defining TemplateBinding , StaticResource , and DynamicResource , and then describe the example on the slide in detail.
Module 3: Customizing Appearance Course 6460A In this demonstration, you will show how to change the appearance of controls by using control templates. The code for this demonstration can be found at E:\\Democode\\Starter\\Xaml\\Demo2\\ Modifying the appearance of content controls by using control templates: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo2\\ folder. Right-click controlTemplates.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . Ensure that the rendered view and the XAML view are both visible. In XamlPad, show the Style element for the Button type. Show that it defines the appearance and structure of a Button by using a Rectangle and a ContentPresenter . Show that the ContentPresenter uses template binding to synchronize the HorizontalAlignment and VerticalAlignment properties with the Button declaration. Show the first row of buttons in the rendered view and show the corresponding XAML declarations. Highlight that the Button elements do not require any explicit bindings for their appearance to change. The Style definition applies to all Button elements. Show the second row of buttons in the rendered view and show the corresponding XAML declarations. Highlight that the Button elements all have a binding for the Template property. In the Page.Resources section, show the ControlTemplate resource named customButtonTemplate . Explain that this control template defines a different appearance. Highlight that the second row of buttons only bind their Template property to this different ControlTemplate ; the Foreground property defined in the custom Style still applies to the second row of buttons. Modifying the appearance of items controls by using control templates: In XamlPad, show the Style element for the ListBox type. Show that it defines the appearance and structure of a ListBox by using a horizontally aligned StackPanel in a ScrollViewer with a Border element to present rounded corners. Show that the StackPanel element uses the IsItemsHost property. Show that the Border element uses template binding to synchronize the Background and Margin properties with the ListBox declaration. Show the ListBox in the rendered view and show the corresponding XAML declaration. Highlight that the ListBox element is not explicitly bound to the Style . The Style applies to all ListBox elements. In the Page.Resources section, comment out the Style element for the ListBox to show the difference between the standard ListBox appearance and the custom Style . Close XamlPad.
Module 3: Customizing Appearance Course 6460A
Module 3: Customizing Appearance Course 6460A Describe what triggers are, and emphasize that they are extremely flexible and powerful. Describe what entry actions and exit actions are, and give some examples. Do not go into too much detail about animations and storyboards; they are covered in more detail later in this lesson.
Module 3: Customizing Appearance Course 6460A Recap what a property trigger is, and then describe the example in detail.
Module 3: Customizing Appearance Course 6460A Explain what animations are, and then describe the type of effect that you can achieve by using triggers.
Module 3: Customizing Appearance Course 6460A Explain the syntax for defining an animation, remind students what an event trigger is, and then describe the example on the slide in detail.
Module 3: Customizing Appearance Course 6460A In this demonstration, you will show how to enhance controls by using triggers and animations. The code for this demonstration can be found at: E:\\Democode\\Starter\\Xaml\\Demo3\\ High-level demonstration steps: Open Windows Explorer and go to the E:\\Democode\\Starter\\Xaml\\Demo3\\ folder. Right-click triggersAndAnimations.xaml , point to Open With , and then click Windows Presentation Foundation XamlPad Tool . Ensure that the rendered view and the XAML view are both visible. In the XAML pane, show that the Page.Resources section contains a Style definition for all Button controls. Show that the ControlTemplate.Resources section contains a number of Storyboard elements that define animations that animate the Opacity of different elements. Show that the ControlTemplate.Triggers section contains property triggers for the IsMouseOver and IsPressed properties. Show that each trigger contains a trigger action for each of the Trigger.EnterActions and Trigger.ExitActions properties that bind to the Storyboard elements defined in the ControlTemplate.Resources section. Show the XAML declaration for the Button elements. Show the rendered output and show the effect when you rest the mouse on a button, move it off, and click a button. Close XamlPad. Question: How could the same animation effects have been created without using property triggers? Answer: The same animation effects could have been creating by using event triggers for the MouseEnter , MouseLeave , and Click events.
Module 3: Customizing Appearance Course 6460A Use the questions on the slide to guide the debriefing after students have completed the lab exercises. Question: How do you use multiple XAML resource files in a merged dictionary? Answer: You use multiple XAML resource files in a merged dictionary by adding each file as a ResourceDictionary element to the ResourceDictionary.MergedDictionaries element of an appropriate Resources property. Question: How do you create a Style that applies to all elements of a particular type? Answer: You create a Style that applies to all elements of a particular type by specifying the x:Type attribute for the Style element. Question: How do you modify the structure and appearance of a control? Answer: You modify the structure and appearance of a control by defining a new ControlTemplate . Question: How do you create a property trigger? Answer: You create a property trigger by adding a Trigger element to the Triggers property of a Style element. The Property and Value attributes define the triggering property and value. You add one or more Setter elements to the Trigger element to define the actions to take in response to the property trigger. Question: How do you create a Style that applies to selected elements? Answer: You create a Style that applies to selected elements by specifying an x:Key attribute for the Style element. You apply the style to selected elements by specifying the Style attribute for those elements, for example <Button Style=“{DynamicResource myButtonStyle}” … />
Module 3: Customizing Appearance Course 6460A Review Questions Point the students to the appropriate section in the course so that they are able to answer the questions 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.
Module 4: Data Binding Course 6460A
Module 4: Data Binding Course 6460A
Module 4: Data Binding Course 6460A Question: How does the variety of data sources that is available by using the WPF data-binding model compare to the data binding that you have used in your own applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 4: Data Binding Course 6460A Explain how a property in a binding source can be bound to a dependency property in the binding target. Give an example of binding the Text dependency property in a TextBox to a particular property in a managed object.
Module 4: Data Binding Course 6460A Describe the Mode property on a Binding object. Explain how you set the Mode to support one-way data binding, two-way data binding, one-way-to-source data binding, or one-time data binding. Explain how each mode works, and describe the data flow in each case. Also give examples of why you would use each mode. Question: How do data-binding modes provided by WPF data binding compare to the data binding that you have used in your own applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 4: Data Binding Course 6460A
Module 4: Data Binding Course 6460A In this demonstration, you will show how to bind to different data sources. The code for this demonstration can be found at the following locations: If you are using Microsoft Visual Basic® development system: E:\\Democode\\Starter\\VB\\Demo1\\ If you are using Microsoft Visual C#® development tool: E:\\Democode\\Starter\\CS\\Demo1\\ High-level demonstration steps: Run Microsoft Visual Studio 2008® development system. Open the Demo1 solution from the following locations: If you are using Visual Basic: E:\\Democode\\Starter\\VB\\Demo1\\ If you are using Visual C#: E:\\Democode\\Starter\\CS\\Demo1\\ In Solution Explorer, double-click Window1.xaml . In Window1.xaml, in the XAML pane, show the resources and XAML for each TabItem to illustrate different data-binding scenarios. Note: Each tab in the demonstration application demonstrates each of the different data binding scenarios.
Module 4: Data Binding Course 6460A
Module 4: Data Binding Course 6460A Ensure that students understand that the UpdateSourceTrigger property applies to TwoWay and OneWayToSource bindings only. The UpdateSourceTrigger property determines when the source is updated after changes in the target.
Module 4: Data Binding Course 6460A Ask students whether they are familiar with the Microsoft .NET Framework event model, and briefly explain how it works if necessary. Then describe how binding source classes can raise a PropertyChanged event to indicate that a value has changed. Explain that the INotifyPropertyChanged interface specifies this event. Explain the difference between implementing the INotifyPropertyChanged interface and using dependency properties and when you would use each approach. Refer students to the Course Handbook, which includes a full sample implementation of a class that implements the INotifyPropertyChanged interface. Question: If you were implementing a custom UI control that exposes properties that you know you will need to animate in your application, which property change notification approach would you use? Answer: You would use a dependency properties to implement property change notification for the properties of custom UI control that you know you will need to animate in your application.
Module 4: Data Binding Course 6460A Explain the purpose of the UpdateSourceTrigger property. Describe the implications of changing the value of this property in relation to the Text property of a TextBox , and then describe the example on the slide in detail.
Module 4: Data Binding Course 6460A In this demonstration, you will show how to trigger source updates. The code for this demonstration can be found at the following locations: If you are using Visual Basic: E:\\Democode\\Starter\\VB\\Demo2\\ If you are using Visual C#: E:\\Democode\\Starter\\CS\\Demo2\\ Propagating changes to the binding target: Run Visual Studio 2008. Open the Demo2 solution from the following locations: If you are using Visual Basic: E:\\Democode\\Starter\\VB\\Demo2\\ If you are using Visual C#: E:\\Democode\\Starter\\CS\\Demo2\\ In Solution Explorer, double-click MyData source code file . In the code pane, show the code to implement the INotifyPropertyChanged interface and the other related methods and method calls. Propagating value changes to a binding source: In Solution Explorer, double-click Window1.xaml . In Window1.xaml, in the XAML pane, show the XAML to bind the TextBlock.Text properties to the MyData.ColorName property. Explain that the Text property of the second TextBlock and the Background of its parent WrapPanel are bound to the same property to show when the source object has been updated. Run the application to show the effect of setting the UpdateSourceTrigger property to Default , LostFocus , PropertyChanged , and Explicit . Note: The code behind file for Window1.xaml contains a Click event handler for the Submit button to the UpdateSource method explicitly when the UpdateSourceTrigger property is set to Explicit . Question: For which situations could you use the UpdateSourceTrigger property in your applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 4: Data Binding Course 6460A Use the questions on the slide to guide the debriefing after students have completed the lab exercises. Question: How do you create a data binding? Answer: You create a data binding by specifying the Binding attribute for the element, and then you specify properties such as Path , Source , and ElementName for the Binding . Question: Which interface do you use to implement property change notification? Answer: You use the INotifyPropertyChanged interface to implement property change notification for business objects. You use dependency properties to implement property change notification for visual elements. Question: Which interface do you use to implement a custom value converter? Answer: You use the IValueConverter interface to implement a custom value converter. Question: How do you define validation rules for a Binding ? Answer: You define validation rules for a Binding by adding validation rules to the Binding.ValidationRules collection.
Module 4: Data Binding Course 6460A Review Questions Point the students to the appropriate section in the course so that they are able to answer the questions 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.
Module 5: Data Binding to Collections Course 6460A
Module 5: Data Binding to Collections Course 6460A
Module 5: Data Binding to Collections Course 6460A Ask students if they are familiar with the concept of data binding to collections, and then describe the diagram on the slide. Question: How does the data collection binding model provided by WPF compare to other implementations that you have used? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 5: Data Binding to Collections Course 6460A This is an animated slide. Explain that an observable collection implements the INotifyCollectionChanged interface. [Click 1] Remind students that you typically bind an ItemsControl such as the ListBox shown on the slide to a data collection by using the ItemsSource property, which populates the list data. [Click 2] Explain that you can add new data items to an observable collection. [Click 3] When you add new data items to an observable collection, the collection raises the CollectionChanged event, and then the binding engine updates the ListBox list items. Question: Would the WPF observable collection model benefit any of your applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 5: Data Binding to Collections Course 6460A Describe the ObservableCollection class. Point out that it is a generic collection class, which means that you specify the types of object that are contained in an ObservableCollection instance. Refer students to the Course Handbook, which contains a full definition of the NameList class, and then explain how to bind a control to a custom collection class by setting the ItemsSource property to the custom collection class.
Briefly describe the background of Language Integrated Query (LINQ) and the reason for its development. Explain that LINQ enables you to query any object that implements the IEnumerable<T> interface. Briefly explain the purpose and function of the LINQ to Structured Query Language (SQL) facility (DLinq) and the LINQ to XML facility (XLinq). This topic provides a foundation for the following topic, which describes binding to ADO.NET data objects by using DLinq. Question: Would you be able to use LINQ to simplify the process of querying in-memory information in any of your applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer. Module 5: Data Binding to Collections Course 6460A 7
Module 5: Data Binding to Collections Course 6460A Explain that Windows® Presentation Foundation (WPF) enables you to create data bindings to any object that implements the IEnumerable interface, which includes ADO.NET objects. Describe the process for binding to ADO.NET objects. Refer the students to the full code example that is provided in the Course Handbook.
Module 5: Data Binding to Collections Course 6460A
Module 5: Data Binding to Collections Course 6460A This is an animated slide. Explain that, by default, a control calls the ToString method to display objects in a collection. Explain that overriding the ToString method is a possible solution, but it is limiting and inflexible. [Click 1] Explain that you use a data template to define the visual structure of your data objects. Question: How could you use the WPF data-templating model in your own applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 5: Data Binding to Collections Course 6460A Explain the syntax for defining a data template. Point out that the example in the slide assigns the data template to the ItemTemplate property on a ListBox . Also refer students to the Course Handbook, which describes how to define a data template and assign it to the ContentTemplate property of a content control.
Module 5: Data Binding to Collections Course 6460A Describe how to define a data template as a resource, and remind students that this enables multiple controls to use the data template. Explain that the x:Key property defines a specific name for the data template, and controls must explicitly set their ItemTemplate or ContentTemplate property to use this data template. Refer students to the example in the Course Handbook that shows how to set the DataType property for a data template. Explain the syntax for defining a data template that has a DataType property and explain what this means.
Module 5: Data Binding to Collections Course 6460A The example in the slide defines a data trigger that detects objects in the underlying collection that have a Gender property with the value Male . For such objects, the data trigger sets the UI control to have a blue border. Question: How could you use data triggers in your own applications? Answer: This question is designed to stimulate discussion among the students, so there is no definitive answer.
Module 5: Data Binding to Collections Course 6460A Review Questions Point the students to the appropriate section in the course so that they are able to answer the questions 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.