50151 - Windows Presentation Foundation (WPF)

This six-day instructor-led course provides students with the knowledge and skills to develop Graphical User Interface (GUI) applications on Windows using the Windows Presentation Foundation managed framework.
Window Presentation Foundation (WPF) is the Microsoft next generation managed framework for designing and creating user interfaces and presentation layer. It is a part of the Windows Vista Operating System, and is also available for installation and development on Windows XP SP2, Windows Server 2003 and Windows Server 2008, as part of the .NET Framework 3.0/3.5 Runtime Components.
WPF provides a consistent programming model for building applications for a full smart-client installation or loading into a web browser.WPF enables richer control, design, and development of the visual aspects of Windows programs by unifying a host of application services: user interface, 2D and 3D drawing, fixed and adaptive documents, vector graphics, raster graphics, animation, data binding, audio and video.
The course is packed with code samples, demos, exercises and labs, to facilitate understanding WPF-based UI applications design concepts, development and best practices.

After completing this course, students will be able to:

    * Understand the Windows Presentation Foundation framework architecture and design concepts.
    * Use WPF built-in controls from both Visual Studio and Expression Blend.
    * Read and write XAML declarative language.
    * Arrange controls using the WPF layout system.
    * Work with data in WPF based applications using Data Binding.
    * Create a rich user interface with 2D vector graphics, media, and animation.
    * Provide themes and styles to applications by restyling controls.
    * Work with WPF in a multithreaded environment.
    * Implement WPF interoperability with Win32 and Windows Forms controls.

Module 1: IntroductionThis module explains how to obtain the Windows Presentation Foundation framework as part .NET Framework 3.0 and later and what other technologies are bundled with WPF.Lessons

    * The .NET Framework 3.0
    * Introducing WPF

After completing this module, students will be able to:

    * Use the technologies bundled in the .NET Framework 3.0 release.
    * Understand the fundamentals of Windows Presentation Foundation and its design concepts.
    * Choose which applications can be developed with WPF.

Module 2: Application LevelThis module explains how to create a WPF application from Visual Studio and how to create windows and dialogs.Lessons

    * First Steps
    * The Application Class
    * Types of Window
    * Dialog Boxes

Lab : Building WPF Application

    * In this practice, you will create a WPF application. You will exercise Application events such as Startup, Activated, Shutdown, and so on.

Lab : Splash Screen

    * In this lab, you will create a simple WPF application which will display a Splash Screen at startup.

After completing this module, students will be able to:

    * Create a WPF application using Visual Studio.
    * Work with the WPF Application class.
    * Create and display WPF Windows.
    * Create and display common dialogs.

Module 3: Controls Part IThis module explains how to use the WPF built-in controls and their content model from the Visual Studio WPF Designer and Microsoft Expression Blend.Lessons

    * Built-in Controls
    * Microsoft Expression Blend
    * Content Model
    * Decorations

Lab : Image Browser

    * In this practice, you will create an Image Browser. You will create WPF controls from CSharp code including Menu, TreeView, Border, ToolTip and Expander controls.

After completing this module, students will be able to:

    * Create built-in controls using Visual Studio and Expression Blend.
    * Use the WPF content model to compose complex controls.
    * Decorate controls with Decorators and Adorners.

Module 4: XAMLThis module explains how to declaratively design applications with the eXtensible Application Markup Language (XAML), how designers and developers collaborate using XAML, and how XAML relates to WPF. This module also reviews the XAML implementation and the design of logical trees which may contain type converters, non-declarative parts, and custom types.Lessons

    * Introducing XAML
    * XAML Fundamentals
    * Code Behind
    * XAML Properties
    * Custom Types
    * Markup Extensions
    * XAML Serialization

Lab : XAML Walkthrough

    * In this practice, you will create a WPF application based on Visual Studio WPF templates installed with “Orcas”. You will also change Window properties using XAML.

Lab : Code Behind XAML

    * In this practice, you will use markup code to create a simple WPF window that has a single button as its content.  You will then add CSharp code behind and connect it to the markup code. In addition, you will write CSharp code inside XAML.

Lab : Markup My Types

    *
      In this lab, you will map custom and CLR types into markup. You will create type converters and use the property element syntax. You will also create Type Converters and Markup Extensions for best integration of custom types and XAML.

After completing this module, students will be able to:

    * Use XAML for developer-designer collaboration.
    * Understand the XAML inner-workings.
    * Define declarative logical trees using XAML.
    * Create custom type converters and markup extensions.
    * Serialize and deserialize logical trees using XAML.

Module 5: LayoutThis module explains how to use the WPF layout mechanism, WPF panels, sizing, and measurement passes and how to implement custom layout.Lessons

    * The Layout System
    * Layout Panels
    * Sizing and Positioning
    * Blend Layout Support
    * Custom Layout

Lab : Mastering Layout

    * In this practice, you will create a Calculator UI to master the WPF Layout System, using DockPanel, WrapPanel, Grid, and Border.

Lab : Custom Radial Panel

    * In this lab, you will create a custom radial panel. This Panel lays its children out in a circle, keeping the angular distance from each child equal. You will use the Panel, MeasureOverride and ArrangeOverride methods. In addition you will use the UIElementMeasure and Arrange methods.

After completing this module, students will be able to:

    * Use panels to arrange controls in a window and other containers.
    * Create complex layout by composing layout panels.
    * Understand the WPF device-independent concept.
    * Use Expression Blend to arrange controls inside panels.
    * Implement custom layout mechanisms.

Module 6: Controls Part IIThis module explains how to use the WPF composition engines in custom and user controls, as well as how they are implemented in the WPF native UI elements and controls.  This module also reviews the essentiality of these engines for styling, animation, data binding, and other features.Lessons

    * The Visual Layer
    * Dependency Properties
    * Routed Events
    * Input Handling
    * Commands

Lab : Color Picker User Control

    * In this lab, you will create a Color Picker user control with dependency properties and routed events. You will then write a simple window to test this control.

After completing this module, students will be able to:

    * Analyze the WPF composition tree model.
    * Implement custom Dependency Properties.
    * Implement custom Routed Events.

Module 7: DataThis module explains how to work with resources and data in WPF through Data Binding and Data Templates.Lessons

    * Resources
    * Data Binding
    * Implementing Data Binding
    * Binding to Collections
    * Data Templates
    * Data Validation

Lab : Consuming Resources

    * In this practice, you will create Application level and Window level resources and change them in runtime. You will also learn how to create a special Resource Dictionary XAML file, and then merge it with other resources.

Lab : Binding to Business

    *
      In this practice, you will create a simple application for displaying system information. You will create a simple model objects with dependency properties, and bind them to the UI, using WPF’s Data Binding mechanism.

Lab : Photo Album

    * In this lab, you will redesign the Photo Album application to exploit WPF Data Binding. You will bind UI to single and collection sources, and you will practice collection views.

After completing this module, students will be able to:

    * Consume and share resources and resource dictionaries.
    * Design models to support the Data Binding mechanism.
    * Bind UI elements to data and data collection using Data Binding.
    * Convert data two-way, from the model to the view and back.
    * Visualize data and data collections using Data Templates.
    * Validate user inputs via Data Binding.
    * Leverage Expression Blend to bind data.

Module 8: Graphics Media and AnimationThis module explains how to implement a very rich application user interface with 2D vector graphics with emphasis on performance, brushes, imaging, video, and animation.Lessons

    * Graphics
    * Media
    * Animation

Lab : Graphics Media and Animation

    * The objective of this lab is to demonstrate the integration of the Windows Presentation Foundation’s rendering system, as well as to show the power of XAML.  You will create 2-D content, animate it, add video, and finally map it onto a rotating 3-D surface – and you will do all of this without writing a single line of code.

After completing this module, students will be able to:

    * Create 2D shapes, drawings and geometries with emphasis on performance.
    *  Create application user interfaces with media and animation.
    *  Leverage Expression Blend to draw and add animations.

Module 9: Control Styles and TemplatesThis module explains how to use Control Styles and Templates to restyle the user interface and provide a completely new look to an application without resorting to custom controls.Lessons

    * Control Styles
    * Control Templates
    * Triggers

Lab : Tic-Tac-Toe

    * In this lab, you will create the famous Tic-Tac-Toe game. You will base your solution on WPF Control Styles, Templates and Data Templates. You will also practice triggering and data binding.

After completing this module, students will be able to:

    * Appreciate the differences between Styles, Control Templates, and Data Templates.
    * Use styles and triggers to change properties of elements.
    * Use control templates to replace the default view of controls.
    * Leverage Expression Blend to create styles and templates.

Module 10: Asynchronous and Multithreading
This module explains how to work with WPF elements in a multithreaded environment and within asynchronous calls, considering the WPF single-threaded affinity model.
Lessons

    * WPF Threading Model
    * The Dispatcher Class
    * Background Worker

After completing this module, students will be able to:

    * Appreciate the limitations and advantages of the single-threaded affinity model.
    * Invoke WPF elements from multiple threads and asynchronous callbacks.
    * Create background tasks to update the user interface.

Module 11: InteroperabilityThis module explains how to implement interoperability between WPF and Win32/WinForms controls and discusses the limitations and pitfalls in the interaction of these technologies.Lessons

    * WPF and Win32
    * WPF and Windows Forms

After completing this module, students will be able to:

    * Host a WPF visual tree inside a Win32 window.
    * Host a Win32 window inside a WPF visual tree.
    * Host a WPF visual tree inside a Windows Forms control.
    * Host a Windows Forms control inside a WPF visual tree.
    * Beware the limitations and pitfalls of WPF interoperability.

This course is intended for C# developers with at least 6 months of experience with the .NET framework and familiarity with UI development.

Before attending this course, students must have:

    * Working knowledge of C# 2.0 or above
    * Basic knowledge of UI development
    * Familiarity with XML