Fundamentals of XAML and Microsoft Expression Blend

days
Training code

Upcoming sessions

UI Design with XAML and Microsoft Expression Blend

Learning Goals

This 3-day course covers core and essential XAML skills. The learner will gain valuable experience developing XAML code in both Visual Studio 2010/2012 and Expression Blend. The course teaches the skills required to develop professional Silverlight and WPF applications (for the Web, Windows desktops, and Windows Phone devices). The course will include hands-on labs that comprise approximately 50% of the classroom time and enable the student to learn the essential XAML programming tasks that are the building blocks of real-world applications.

Target audience

The target audience for this training course is professional developers who have experience creating Windows Forms and ASP.NET Web application, and who are interested in learning the core and essential XAML programming tasks that are required for professional Silverlight and WPF programming in both Visual Studio and Expression Blend environments. This course is intended for developers who have programming experience using either Visual Basic .NET or C# and who understand the concepts of object-oriented programming. This course is designed for developers who need to become comfortable using Expression Blend and Visual Studio. This course is not designed for entry-level programmers.

At Course Completion

After completing this course, students will be able to:

  • Describe XAML-based applications and the tools they can use to build them.
  • Create vector graphics with both Expression Blend 4 and Expression Design 4.
  • Create a Silverlight application and a user interface by using various layout controls and other controls from the toolbox.
  • Work with key parts and logic of a Silverlight application, such as hosting controls, App events, and InitParams.
  • Create XAML objects programmatically.
  • Work with Resources, Styles, Control Templates, and Behaviors.
  • Implement Transforms, Animations, and Visual States in XAML-based applications.
  • Prototype applications by using SketchFlow.

Course Outline

Module 1: Binding in XAML

This module familiarizes the students with various binding techniques.

Lessons

  • Introduction to XAML-Based Applications
  • Tools for Designing and Developing XAML-Based Applications
  • Anatomy of a XAML-Based Application

Lab : Getting Started with XAML-Based Application Development

  • Exercise 1: Creating a 'Hello World' WPF Application
  • Exercise 2: Creating a 'Hello World' Silverlight Application
  • Exercise 3: Using the Expression Blend 4 and Visual Studio 2010 Development Environments
  • Exercise 4: Exploring the Expression Blend 4 Development Environment

After completing this module, students will be able to:

  • Describe the benefits of XAML-based applications.
  • Explain the tools that can be used to create XAML-based applications.
  • Describe the structure of a XAML-based application.

Module 2: Creating Vector Graphics with Expression Studio 4

This module describes how to create vector graphics by using both Expression Blend 4 and Expression Design 4

Lessons

  • Creating Vector Graphics with Expression Blend 4
  • Creating Vector Graphics with Expression Design 4
  • Importing Vector Graphics into Expression Blend 4

Lab : Creating Vector Graphics with Expression Studio 4

  • Exercise 1: Creating a Silverlight Application and Website by using Microsoft Expression Blend 4
  • Exercise 2: Creating an Expression Design 4 Background
  • Exercise 3: Distorting Text on a Path
  • Exercise 4: Using Expression Design 4 Files in Expression Blend 4

After completing this module, students will be able to:

  • Create Vector Graphics with Expression Blend 4.
  • Create Vector Graphics with Expression Design 4.
  • Import Vector Graphics into Expression Blend 4.

Module 3: Laying out a XAML-Based Application

This module describes how to create a simple XAML-based application and how to create a user interface by using various layout controls and other controls from the toolbox.

Lessons

  • Organizing Controls in the User Interface
  • Adding and Manipulating Controls

Lab : Laying out a XAML-Based Application

  • Exercise 1: Adding TextBlocks and Buttons to MainPage.xaml
  • Exercise 2: Using the Grid
  • Exercise 3: Adding a Hyperlink to the Grid
  • Exercise 4: Adding a Button to the Grid
  • Exercise 5: Testing the Application
  • Exercise 6: Adding Backgrounds to MainPage.xaml and DesignMode.xaml (as time permits)

After completing this module, students will be able to:

  • Organize the controls used in the user interface of a XAML-based application.
  • Add and manipulate the controls used in XAML-based applications.

Module 4: Developing and Debugging XAML-Based Applications

This module describes how to work with key parts and logic of XAML-based applications, such as startup parameters, hosting controls, App events, and InitParams.

Lessons

  • Developing WPF Applications
  • Developing Silverlight Applications
  • Hosting Silverlight Applications
  • Debugging XAML-Based Applications

Lab : Developing and Debugging XAML-Based Applications

  • Exercise 1: Creating HTML Hosting Pages
  • Exercise 2: Customizing the App.Xaml Code-Behind File in Visual Studio 2010
  • Exercise 3: Debugging a Silverlight Application
  • Exercise 4: Retrieving URL Parameters in the App.xaml Code-Behind File
  • Exercise 5: Using URL Parameters in the Application
  • Exercise 6: Rewrite as: Exercise 6: Designing the Greeting Card Page (optional)
  • Exercise 7: Adding Code to Display Values From the URL

After completing this module, students will be able to:

  • Develop WPF applications.
  • Develop Silverlight applications.
  • Host a Silverlight application in an HTML web page.
  • Debug a XAML-based application.

Module 5: Creating Controls Programmatically and Working with Media Files

This module describes how to work with XAML objects programmatically and play audio and video files

Lessons

  • Creating and Using Controls Programmatically
  • Working with Media Files

Lab : Creating Controls Programmatically and Working with Media Files

  • Exercise 1: Creating Controls Programmatically
  • Exercise 2: Building a Video Player

After completing this module, students will be able to:

  • Create and use controls programmatically.
  • Work with media files.

Module 6: Working with Resources, Styles, Control Templates, and Behaviors

This module describes how to manage development efforts by using a variety of reusable/modular concepts in XAML-based applications

Lessons

  • Working with Resources
  • Working with Styles and Control Templates
  • Working with Actions, Triggers, and Behaviors

Lab : Working with Resources, Styles, Control Templates, and Behaviors

  • Exercise 1: Using Resources in Expression Blend 4
  • Exercise 2: Changing a Property Using a Conditional Behavior
  • Exercise 3: Calling Methods from a Conditional Behavior
  • Exercise 4: Using XAML Styles
  • Exercise 5: Using XAML Control Templates

After completing this module, students will be able to:

  • Use Resources in a XAML-based application.
  • Work with Styles and ControlTemplates.
  • Add and configure behaviors by using Expression Blend 4.

Module 7: Implementing Transforms, Animations, and Visual States

This module describes how to use animation techniques in XAML-based applications

Lessons

  • Transforms in XAML-Based Applications
  • Animations in XAML-Based Applications
  • Implementing and Working with Visual States

Lab : Implementing Transforms, Animations, and Visual States

  • Exercise 1: Preparing Objects for Animation
  • Exercise 2: Creating and Playing a StoryBoard
  • Exercise 3: Using Visual States for the Video Page
  • Exercise 4: Adding a Visual State for the Video Controls
  • Exercise 5: Controlling States Programmatically

After completing this module, students will be able to:

  • Apply transforms in your XAML-based applications.
  • Create different types of animations in your XAML-based applications.
  • Provide visual feedback to users based on the state of a control or a group of controls.

Module 8: Binding in XAML

This module familiarizes the students with various binding techniques.

Lessons

  • Property Binding in XAML-Based Applications
  • Data Binding in XAML-Based Applications

Lab : Binding in XAML

  • Exercise 1: Binding Controls
  • Exercise 2: Creating a Master/Detail View in WPF

After completing this module, students will be able to:

  • Implement property binding in XAML-based applications.
  • Implement binding to external data objects in XAML-based applications.

Module 9: Prototyping Applications by Using SketchFlow in Expression Blend 4

This module describes how to use SketchFlow to prototype complex user interfaces and to gather feedback from clients.

Lessons

  • Prototyping Applications with SketchFlow
  • Packaging and Reviewing Prototypes Developed with SketchFlow

Lab : Prototyping Applications by Using SketchFlow in Expression Blend 4

  • Exercise 1: Creating an Expression SketchFlow Application
  • Exercise 2: Creating SketchFlow Screens
  • Exercise 3: Configuring the Login Screen
  • Exercise 4: Configuring the Card Gallery Screen
  • Exercise 5: Packaging the SketchFlow Solution
  • Exercise 6: Performing the Client Role
  • Exercise 7: Performing the Developer Role

After completing this module, students will be able to:

  • Create application prototypes by using SketchFlow.
  • Package prototypes for distribution to your customers.
  • Review feedback on your prototypes from your customers.
Upcoming sessions at U2U in Brussels, Belgium:

To organize this course on-site, please contact info@u2u.be.

Course Calendar
Courses On Site
Course Agenda in PDF
Become a U2U trainer

Contact Me

Call me
Send U2U folder
Send more info