Your SlideShare is downloading. ×
2 Day - WPF Training by Adil Mughal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2 Day - WPF Training by Adil Mughal

3,506

Published on

Slides for 2 day training session on Windows Presentation Foundation

Slides for 2 day training session on Windows Presentation Foundation

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • Could you please allow me to download these slides ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,506
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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 "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. 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.
  • Transcript

    • 1. Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal
    • 2. About Me
      • Adil Ahmed Mughal
      • Development Team Lead at Telenor Pakistan
      • Awarded Microsoft Most Valuable Professional
      • Microsoft Certified Technology Specialist (MCTS) - .NET Framework 4
      • INETA, User Group Leader
      • I blog at http://www.AdilMughal.com
      • Actively participates in community events
    • 3. Introduction
      • Name
      • Company affiliation
      • Title/function
      • Job responsibility
      • Networking experience
      • Windows Media Services experience
      • Your expectations for the course
    • 4. About This Course
      • Audience
      • Course Prerequisites
      • Course Objectives
      • Course Structure = Modules -> Lessons
    • 5. Course Outline
      • Module 1: Creating an Application by Using WPF
      • Module 2: Building User Interfaces
      • Module 3: Customizing Appearance
      • Module 4: Data Binding
      • Module 5: Data Binding for Collections
      • Module 6: Lab Project
    • 6. Module 1
    • 7. Module 1: Creating an Application by Using Windows Presentation Foundation (WPF)
      • Overview of WPF
      • Creating a Simple WPF Application
      • Handling Events and Commands
    • 8. Lesson: Overview of WPF
      • Background
      • What Is WPF?
      • WPF Architecture
      • Defining User Interfaces in WPF
      • WPF Capabilities and Features
      • WPF Application Types
    • 9. Background
      • A perspective on User Experience
      • A look at the Past
        • User
        • User32/GDI
        • MFC
        • Windows Forms/GDI+
        • OpenGL
        • DirectX
    • 10. Background
      • A perspective on User Experience
      • A look at the Past
        • WPF – why WPF?
        • Single Integration Solution
    • 11. What Is WPF?
      • It is a new foundation for building Windows-based applications by using:
        • Media
        • Documents
        • Application UI
      .NET Framework 2.0 Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows CardSpace (WCS)
    • 12. WPF Architecture WPF Core Components PresentationFramework Common Language Runtime PresentationCore milcore DirectX User32 Kernel Managed Code Unmanaged Code
    • 13. Defining User Interfaces in WPF <Window ... > ... <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox ... /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </Window>
    • 14. 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
    • 15. WPF Application Types Stand-Alone Applications XAML Browser Applications (XBAPs)
    • 16. Lesson: Creating a Simple WPF Application
      • Demonstration: Creating WPF Applications by Using Visual Studio 2008
      • Defining the Application
      • Defining Windows or Pages
      • Adding Controls
      • Building and Running a WPF Application
    • 17. Demonstration: Creating WPF Applications by Using Visual Studio 2008
      • In this demonstration, you will see how to:
      • Create a stand-alone WPF application
      • Add controls to your application
    • 18. Defining the Application <Application xmlns:x=… xmlns=… x:Class=&quot;MyApp.App&quot; StartupUri=&quot;Window1.xaml&quot;> <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
    • 19. 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=&quot;MyApp.Window1&quot; Title=&quot;My Window&quot;> <Grid> … </Grid> </Window> <Page xmlns:x=… xmlns=… x:Class=&quot;MyApp.Page1&quot; WindowTitle=&quot;My Page&quot;> <Grid> … </Grid> </Page>
    • 20. Adding Controls Windows and pages contain controls
      • The controls are represented by XAML elements
      • <Button> and <TextBox> are examples of these
      ... <Grid> <TextBox Name=&quot;TextBox1&quot; /> <Button Name=&quot;Button1&quot;>Click here</Button> </Grid> ...
    • 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. 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
    • 23. The WPF Event Model WPF controls generate events such as:
      • Clicking buttons
      • Entering text
      • Selecting lists
      • Gaining focus
    • 24. Handling WPF Control Events Implement event handler method in the code-behind file Specify an event handler in the XAML file <Button Name=&quot;Button1&quot; Click=&quot;Button1_Click&quot;> Click here </Button> public void Button1_Click( object sender, RoutedEventArgs e) { MessageBox.Show(&quot;Hello WPF&quot;); }
    • 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
    • 26. Defining Routed Events Example of event bubbling
      • Define leaf elements inside a container element
      • Handle leaf events at the container level
      <StackPanel Button.Click=&quot; CommonClickHandler &quot;> <Button Name=&quot;YesButton&quot;>Yes</Button> <Button Name=&quot;NoButton&quot;>No</Button> </StackPanel> private void CommonClickHandler (object sender, RoutedEventArgs e) { Button b = e.Source as Button; ... }
    • 27. 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
    • 28. 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
    • 29. Module Review and Takeaways
      • Time to hands on WPF
      • Create a New Project in Visual Studio
      • Gets hands on XAML
      • Drag and Drop few controls
      • It will be as simple as Windows Forms
    • 30. Module 2
    • 31. Module 2: Building User Interfaces
      • Defining Layout
      • Building User Interfaces by Using Content Controls
      • Building User Interfaces by Using Items Controls
    • 32. Lesson: Defining Layout
      • WPF Layout Model
      • WPF Layout Classes
      • Demonstration: Defining Layout by Using Panels
      • Demonstration: Defining Layout by Using Grids
    • 33. WPF Page Layout Model
      • Abstract rectangular bounding box
      • Retrieve by calling GetLayout on a FrameworkElement
      Measurement Pass 1 Hello World! Evaluate each member of the Children collection to determine Its DesiredSize Arrangement Pass 2 Window or Page element Determine the final size of each child object and place within Its layout slot Layout class Child objects
    • 34. WPF Layout Classes Canvas VirtualizingStackPanel DockPanel Grid StackPanel WrapPanel Panel Background Children ZIndex
    • 35. Demonstration: Defining Layout by Using Panels
      • In this demonstration, you will see how to:
      • Use the Canvas class
      • Use the StackPanel class
      • Use the WrapPanel class
      • Use the DockPanel class
    • 36. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
    • 37. Demonstration: Defining Layout by Using Grids In this demonstration, you will see how to use the Grid class
    • 38. Lesson: Building User Interfaces by Using Content Controls
      • What Is a Content Control?
      • Demonstration: Creating a User Interface by Using Content Controls
      • What Is a Headered Content Control?
      • Demonstration: Creating a User Interface by Using Headered Content Controls
    • 39. What Is a Content Control?
      • Common content controls:
      • Button
      • CheckBox
      • GroupItem
      • Label
      • RadioButton
      • RepeatButton
      • ToggleButton
      • ToolTip
      • Contains a single item
      • Has a Content property
      Examples Text DateTime UIElement Multiple objects Button This is text content of a Button 04/03/2007 13:06
    • 40. Demonstration: Creating a User Interface by Using Content Controls
      • In this demonstration, you will see how to:
      • Use the ContentControl class
      • Use the Border Decorator class
    • 41. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
    • 42. What Is a Headered Content Control?
      • Headered content controls:
      • Expander
      • GroupBox
      • TabItem
      • Specialized ContentControl
      • Has a Content property
      • Has a Header property
      Example TabItem header GroupBox Expander
    • 43. Demonstration: Creating a User Interface by Using Headered Content Controls
      • In this demonstration, you will see how to:
      • Use the TabItem class
      • Use the GroupBox class
      • Use the Expander class
    • 44. Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.
    • 45. Lesson: Building User Interfaces by Using Items Controls
      • What Is an Items Control?
      • Handling Item Selection
      • Demonstration: Creating a User Interface by Using Items Controls
    • 46. What Is an Items Control?
      • Contains multiple objects
      • Has an Items property
      • Has an ItemsSource property
      • Common items controls:
      • ComboBox
      • ListBox
      • Menu
      • StatusBar
      • TabControl
      • ToolBar
      • TreeView
      Can be different types ItemsSource Items
    • 47. Handling Item Selection Attach event handler <ListBox SelectionChanged=&quot;ListBox1_SelectionChanged&quot;> ... </ListBox> Define event handler public void ListBox1_SelectionChanged( object sender, SelectionChangedEventArgs e) { ... }
    • 48. Demonstration: Creating a User Interface by Using Items Controls In this demonstration, you will see how to use the ListBox class
    • 49. Module Review and Takeaways
      • Review Questions
      • When would you use the DockPanel , Border , StackPanel , and Grid layout classes?
      • How do you define the content for a Button element?
      • How do you define the child items for a ListView element?
      • Which assemblies must you reference to integrate Windows Forms controls in your WPF applications?
      • Which WPF element do you use to host Windows Forms controls in your WPF applications?
    • 50. Module 3
    • 51. Module 3: Customizing Appearance
      • Sharing Logical Resources in an Application
      • Creating Consistent User Interfaces by Using Styles
      • Changing the Appearance of Controls by Using Control Templates
      • Enhancing User Interfaces by Using Triggers and Animations
    • 52. Lesson: Sharing Logical Resources in an Application
      • What Are Resources?
      • Defining Resources
      • Referencing Resources in XAML
      • Referencing Resources Programmatically
      • Reusing Resources Across Applications
      • Demonstration: Sharing Resources in a WPF Application
      • Defining Localized Resources
    • 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. Defining Resources You can define resources at various levels:
      • Application scope
      • Window or Page scope
      • Element-level scope
      XAML <Window.Resources> <SolidColorBrush x:Key=&quot;blueBrush&quot; Color=&quot;Blue&quot;/> <SolidColorBrush x:Key=&quot;whiteBrush&quot; Color=&quot;White&quot;/> <sys:Double x:Key=&quot;myValue&quot;>100</sys:Double> </Window.Resources>
    • 55. Referencing Resources in XAML To reference a resource statically: PropertyName=&quot; {StaticResource ResourceKey } &quot; <Button Background=&quot;{StaticResource blueBrush}&quot; Foreground=&quot;{StaticResource whiteBrush}&quot;> Text </Button> To reference a resource dynamically: PropertyName=&quot; {DynamicResource ResourceKey } &quot; <Button Background=&quot;{DynamicResource blueBrush}&quot; Foreground=&quot;{DynamicResource whiteBrush}&quot;> Text </Button>
    • 56. Referencing Resources Programmatically FindResource method: SolidColorBrush brush = (SolidColorBrush) this.FindResource(&quot;whiteBrush&quot;); SetResourceReference method: this.myButton.SetResourceReference( Button.BackgroundProperty, &quot;whiteBrush&quot;); Resources property: SolidColorBrush brush = (SolidColorBrush) this.Resources[ &quot;whiteBrush&quot;]; Or TryFindResource
    • 57. Reusing Resources Across Applications Merged resource dictionaries: <Page.Resources> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source=&quot;ResourcesMyResources1.xaml&quot; /> <ResourceDictionary Source=&quot;ResourcesMyResources2.xaml&quot; /> </ResourceDictionary.MergedDictionaries> </Page.Resources> Merged Resource Dictionary MyResources2.xaml MyResources1.xaml
    • 58. Demonstration: Sharing Resources in a WPF Application
      • In this demonstration, you will see how to:
      • Define and reference resources by using XAML/ Programmatically
    • 59. Defining Localized Resources WPF provides several localization features:
      • Automatic layout
      • Localization attributes and comments
      • Bidirectional content support
        • FlowDirection property
        • Number substitution
      • Localized content in satellite assemblies
    • 60. Lesson: Creating Consistent User Interfaces by Using Styles
      • What Are Styles?
      • Defining Styles
      • Setting Styles Programmatically
    • 61. What Are Styles? You use styles to apply property values to elements: You typically define styles in Resources sections in XAML: Enables you to represent user interface properties such as font and background color as styles
      • Enables you to apply styles to multiple controls
      • Promotes consistent appearance of controls
      Style Control <Resources />
    • 62. Defining Styles <Page.Resources> <Style x:Key=&quot;myStyle&quot; TargetType=&quot;{x:Type Label}&quot;> <Setter Property=&quot;Background&quot; Value=&quot;Blue&quot; /> <Setter Property=&quot;Foreground&quot; Value=&quot;White&quot; /> </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[&quot;TitleText&quot;]); 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. Lesson: Changing the Appearance of Controls by Using Control Templates
      • What Are Control Templates?
      • Defining a Control Template for a Content Control
      • Providing User Customization by Using Template Bindings
      • Demonstration: Changing the Appearance of Controls by Using Control Templates
    • 65. What Are Control Templates? Behavior class ControlTemplate Controls have built-in appearance and behavior: To customize the appearance and structure of a control:
      • The behavior is defined by a predefined control class
      • The appearance is defined by a default ControlTemplate
      • Define a new ControlTemplate for the control
      Control
    • 66. Defining a Control Template for a Content Control To define a control template for a content control:
      • Define a < Style> for a type of control
      • Set the Template property to a ControlTemplate
      • Define a ContentPresenter for the control content
      <Style TargetType=&quot;Button&quot;> <Setter Property=&quot;Template&quot;> <Setter.Value> <ControlTemplate TargetType=&quot;Button&quot;> <Grid> <Ellipse Fill=&quot;Blue&quot;/> <ContentPresenter VerticalAlignment=&quot;Center&quot; HorizontalAlignment=&quot;Top&quot;/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
    • 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=&quot;ListBox&quot;> <Setter Property=&quot;Template&quot;> <Setter.Value> <ControlTemplate TargetType=&quot;ListBox&quot;> <Border Background=&quot;{TemplateBinding ListBox.Background}&quot; CornerRadius=&quot;5&quot;> ... </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
    • 68. Demonstration: Changing the Appearance of Controls by Using Control Templates
      • In this demonstration, you will see how to:
      • Modify the appearance of content controls by using control templates
    • 69. Lesson: Enhancing User Interfaces by Using Triggers and Animations
      • What Are Triggers?
      • Defining Property Triggers
      • What Are Animations?
      • Defining Animations
      • Demonstration: Enhancing Controls by Using Triggers and Animations
    • 70. What Are Triggers?
      • MultiTrigger
      • DataTrigger and MultiDataTrigger
      A trigger sets properties or starts actions: Triggered by property value changes or events Trigger types:
      • EventTrigger
      • PropertyTrigger
      Trigger actions enable triggers to perform actions:
      • EnterActions and ExitActions properties
      • Actions property for event triggers
    • 71. Defining Property Triggers To define a property trigger: Style TargetType=&quot;{x:Type ListBoxItem}&quot;> <Setter Property=&quot;Opacity&quot; Value=&quot;0.5&quot; /> <Style.Triggers> <Trigger Property=&quot;IsSelected&quot; Value=&quot;True&quot;> <Setter Property=&quot;Opacity&quot; Value=&quot;1.0&quot; /> </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. What Are Animations? Animations enable you to animate controls and graphical objects:
      • Animate properties such as Width , Height , and Opacity
      • Grouped together by using Storyboard objects
      Types of animation:
      • ColorAnimation
      • DoubleAnimation
      • PointAnimation
      • Custom
    • 73. Defining Animations You add animation elements to a Storyboard element to define animations <Rectangle Name=&quot;MyRectangle&quot; ...> <Rectangle.Triggers> <EventTrigger RoutedEvent=&quot;Mouse.MouseEnter&quot;> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration=&quot;0:0:1&quot; Storyboard.TargetProperty=&quot;Opacity&quot; To=&quot;0.0&quot; /> </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
    • 75. Lab Review
      • How do you use multiple XAML resource files in a merged dictionary?
      • How do you create a Style that applies to all elements of a particular type?
      • How do you modify the structure and appearance of a control?
      • How do you create a property trigger?
      • How do you create a Style that applies to selected elements?
    • 76. Module Review and Takeaways
    • 77. Windows Presentation Foundation Using Visual Studio 2010 & Expression Blend 4 Adil Ahmed Mughal
    • 78. Module 4
    • 79. Module 4: Data Binding
      • Overview of Data Binding
      • Creating a Data Binding
      • Implementing Property Change Notification
    • 80. Lesson: Overview of Data Binding
      • The WPF Data-Binding Model
      • Binding Sources and Binding Targets
      • Data-Binding Modes
    • 81. The WPF Data-Binding Model UI Element Managed Object ADO.NET Data Source XML Data
    • 82. Binding Sources and Binding Targets Data-binding components:
      • Binding target object
      • Binding target dependency property
      • Binding source
      • Path to the binding source property
      Dependency Property Property Binding Target Object Binding Source Object
    • 83. Data-Binding Modes Binding Target Binding Source Binding Object OneWay TwoWay OneWayToSource OneTime WPF supports four data-binding modes:
      • OneWay
      • TwoWay
      • OneWayToSource
      • OneTime
    • 84. Lesson: Creating a Data Binding
      • Binding to a Class Property
      • Binding Multiple Controls to a Class
      • Binding to a Full Object
      • Binding to XML Data
      • Binding to Another User Interface Element
      • Demonstration: Binding to Different Data Sources
    • 85. Demonstration: Binding to Different Data Sources
      • In this demonstration, you will see how to:
      • Binding
    • 86. Lesson: Implementing Property Change Notification
      • What Are Property Change Notifications?
      • Propagating Property Change Notifications to a Binding Target
      • Propagating Value Changes to a Binding Source
      • Demonstration: Triggering Source Updates
    • 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
    • 88. Propagating Property Change Notifications to a Binding Target public class Person : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; // Raise the PropertyChanged event // when property values in the class change. } To implement the INotifyPropertyChanged interface:
      • Declare the PropertyChanged event
      • Create the OnPropertyChanged method
      • Call the OnPropertyChanged method
      Use dependency properties for visual elements
    • 89. Propagating Value Changes to a Binding Source <TextBox Width=&quot;100&quot;> <TextBox.Text> <Binding Source=&quot;{StaticResource myData}&quot; Path=&quot;ColorName&quot; UpdateSourceTrigger=&quot;PropertyChanged&quot; /> </TextBox.Text> </TextBox> Specify the timing of binding source updates by using the UpdateSourceTrigger property
      • Default
      • Explicit
      • LostFocus
      • PropertyChanged
    • 90. Demonstration: Triggering Source Updates
      • In this demonstration, you will see how to:
      • Propagate changes to the binding target
      • Propagate value changes to a binding source
    • 91. Lab Review
      • How do you create a data binding?
      • Which interface do you use to implement property change notification?
      • Which interface do you use to implement a custom value converter?
      • How do you define validation rules for a Binding ?
    • 92. Module Review and Takeaways
      • Review Questions
      • Best Practices
    • 93. Module 5
    • 94. Module 5: Data Bindings to Collections
      • Binding to Collections of Objects
      • Presenting Data by Using Collection Views
      • Presenting Data by Using Data Templates
    • 95. Lesson: Binding to Collections of Objects
      • Overview of Binding to Collections
      • What Is an Observable Collection?
      • Defining an Observable Collection Class
      • Introduction to LINQ
      • Binding to ADO.NET Data Objects
    • 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. Defining an Observable Collection Class To define and use an observable collection class: public class NameList : ObservableCollection<Person> { ... public class PersonName { ... } } <Window ... xmlns:c=&quot;clr-namespace:MySample&quot; > <Window.Resources> <c:NameList x:Key=&quot;list&quot;/> </Window.Resources> <ListBox ItemsSource = &quot;{Binding Source={StaticResource list}}&quot; /> </Window>
      • Define a class that extends ObservableCollection(T)
      • Create a XAML resource to represent the class, and bind to it
    • 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. Binding to ADO.NET Data Objects WPF enables you to bind to ADO.NET classes such as:
      • DataSet
      • DataTable
      • DataView
      To bind to an ADO.NET object:
      • Populate an ADO.NET object such as DataSet
      • Set the DataContext property of a control such as ListBox
      • Create bindings to the required data objects by using properties such as ItemsSource
    • 101. Lesson: Presenting Data by Using Data Templates
      • What Is a Data Template?
      • Defining and Using a Data Template
      • Defining a Data Template as a Resource
      • Using Data Triggers in a Data Template
    • 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. Defining and Using a Data Template <ListBox ItemsSource=&quot;{Binding Source={StaticResource list}}&quot;> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text=&quot;{Binding Path=FirstName}&quot; /> <TextBlock Text=&quot;{Binding Path=LastName}&quot;/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> To define and use a data template:
      • Define a DataTemplate element
      • Add it to the ItemTemplate or ContentTemplate property
    • 104. Defining a Data Template as a Resource <Window.Resources> <DataTemplate x:Key=&quot;myDataTemplate&quot;> <StackPanel> <TextBlock Text=&quot;{Binding Path=FirstName}&quot; /> <TextBlock Text=&quot;{Binding Path=LastName}&quot;/> </StackPanel> </DataTemplate> </Window.Resources> <ListBox ItemsSource=&quot;{Binding Source={StaticResource list}}&quot; ItemTemplate=&quot;{StaticResource myDataTemplate}&quot; /> You define reusable data templates as resources by setting the x:Key or DataType property on the DataTemplate
    • 105. Using Data Triggers in a Data Template <DataTemplate x:Key=&quot;myDataTemplate&quot;> <DataTemplate.Triggers> <DataTrigger Binding=&quot;{Binding Path=Gender}&quot; Value=&quot;Male&quot;> <Setter TargetName=&quot;border&quot; Property=&quot;Foreground&quot; Value=&quot;Blue&quot;/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> To define a data trigger:
      • Define a DataTrigger element
      • Set the Binding and Value properties on the DataTrigger
      • Add Setter child elements to set control properties
    • 106. Module Review and Takeaways
      • Review
    • 107. Contact Information
      • Blog:
        • http://www.AdilMughal.com
      • Email:
        • [email_address]
        • a [email_address]
      • User Group:
        • DevNext ( http://www.devnextug.org )
        • Emerging .NET Devs ( http://eDotNetDevs.org )

    ×