Silverlight and Expression Design, Expression Blend training course

Course Outline

Silverlight is a new technology for cross-platform rich internet application development, and Microsoft has provided the Expression Suite of tools targeted at interactive designers.

This course will concentrate on using Expression Blend, Expression Encoder, and Expression Design as well as Visual Studio 2010 with the Silverlight extensions.

Course Content

On this course we'll teach you how to produce Silverlight design together with UI interaction through the use of XAML and some basic C# commands.

If you're looking for something much more software-developer focused, have a look at our other Silverlight courses.

View the Silverlight for Developers Course

Our hands-on Designing with Silverlight / Expression training course has been developed for real-world, commercial scenarios by our expert instructors. The course contains many Silverlight tutorials based on real-world scenarios. See below for detailed syllabus, or if you have a technical question, please email [email protected]

What you will learn

• What is Silverlight
• Silverlight Tools
• Silverlight Animation & Graphics
• Audio & Video in Silverlight
• DeepZoom
• Styles, Templates, Resources

Silverlight for Designers Training Course Outline

Introducing Blend and Silverlight

Positioning Microsoft Silverlight?

Plug-in and Download Requirements 
Placing Silverlight in the Timeline of the Web

Defining Silverlight Capabilities for the Designer

Key Types of Rich Media Supported by Silverlight 
Animation 
Databinding 
Effects 
Controls 
Layout 
DeepZoom 
Video & Audio 
Resources

Defining Silverlight Scenarios

Examples in Detail 
High-Definition Video Experiences 
Gaming 
E-Commerce

Overview of Expression Blend 4

Designer/Developer Workflow 
Prototyping 
The XAML Workflow 
Fundamental Ways to Create Silverlight Content

An Introduction to XAML

XAML for Communication 
The Essentials of XAML 
Understanding the Scope and Range of XAML Using Animation

Importing Photoshop and Illustrator Files

Customizing User Interface Using Controls

Understanding User Controls

Adding Interactivity with Behaviours

Applying a Hyperlink to an Object Using the HyperlinkAction Behaviour 
Publishing and XAP file 
The Site Folder 
The ClientBin folder 
The XAP file 
The HTML and SilverlightJS File 
Creating Prototypes with Sketch Flow

The SketchFlow Workflow

The Philosophy of Prototyping

The Prototype Workflow in SketchFlow

Feedback and Evolution

SketchFlow Authoring 
Feedback using the Sketch Flow Player

SketchFlow Projects and Workspace

T he Expression Blend Workspace

Document Windows 
Artboard 
Sketch Flow Map (SketchFlow only) 
The Tools Panel 
The Asset Library 
The Projects Panel 
The Objects and Timeline Panel 
The Properties Panel

Creating New Navigation Screens

Adding Content to Navigation Pages 
Adding User Interface Elements

Using Composition Screens

Adding a Navbar Across Pages

Working in the SketchFlow Player

Creating Interactive Navigation

Using the Navigate To command

Adding States in Sketch Flow

Creating an Animated Shopping Cart Screen Using States 
Activating State Changes

Working With the SketchFlow Player Feedback Feature

Exporting Your Project for Feedback

Exporting to Word

Importing and Building Assets with Expression Blend

Selection Primer: Making Selections in Expression Blend

Importing Assets into Expression Blend

Vector vs Raster

Importing From Photoshop

Understanding the Default Canvas Size 
Adding the Photoshop Object

Importing an Adobe Illustrator file

Creating Objects in Using the Expression Blend Drawing Tools

Overview of Drawing Tools for Shapes 
Aids to Help You Create More Precisely 
Naming Objects in Expression Blend 
Rounding the Corners of a Rectangle

Applying Properties to a Rectangle

Creating and Editing a Stroke

Cloning an Object

Resizing the Object

Using the Transform Pane

Applying a Gradient Stroke

Applying Effects Changing the Order

Aligning and Distributing Objects in Expression Blend

Working With Expression Design

The Expression Design Workspace

Creating a simple shape in Expression Design

Adding a Bevel Effect

Grouping and Naming the object

Exporting into Expression Blend

Naming and Arranging Elements in Expression Blend

Nested Objects: An Overview of Layout Controls

The Grid Control

The Canvas Control

Creating a Canvas Control 
Selecting Elements in Objects and Timeline

Exploring the Grid Control

Creating a Grid Control

Grid vs Canvas

Stack Panel and Border Controls

Transforming vs The Viewbox Control

Transforming a Canvas

The Viewbox Control

Creating Animation & Basic Interactivity in Expression Blend

Understanding Storyboards

Creating Storyboard Resources

Creating Additional Storyboards 
Switching Storyboards on Click 
Understanding Events and Event Handlers

Behaviors in Expression Blend

What are Triggers? 
Benefits of “Hand-Off” Timelines

Working with the Visual State Manager

A Look at the UI Controls 
Adding and Modifying a UI Button Control 
Modifying UI Controls 
Modifying States & Transitions 
Applying Style Templates to Existing Controls

Modifying Control Labels and Icons

A Look at the Content Presenter 
Creating a Custom UI Control

Defining States & Transitions in a Custom Control

Editing the Content Presenter

Applying Your New Control Styles 
Adding Video in Expression Blend

Preparing Video with Expression Encoder

T he Expression Encoder Workspace 
Trimming and Cutting Video

Importing Media

Understanding Bitrate and How it Affects Quality and File Size

Encoding Basics 
Working With Encoding Profiles 
Using the A/B Feature Compare to Create a Custom Profile 
Comparing Different Encoding Methods

Encoding Your Video Using Templates

Editing Encoder's Video Player Templates in Blend 
Audio and Video Support in Silverlight 4

Adding Video Files to a Silverlight Project

Using the MediaElement Control in Blend 
Creating a Volume Control 
Advanced Coding & Interactivity: A C# Sharp Primer

Brief C# and Net Background

Common Object Models (COM) 
Operating System (OS) 
Application Programming Interface (API) 
Services

Using Expression Blend to Develop a Silverlight Project Using C#

Investigating the Automatically-Generated C# Code

Understanding Namespaces

Collections 
Heap 
Methods

Properties and Methods

Partial 
Building the simple re-useable Component

What is Object-Oriented: Understanding Classes, Methods & Properties

The Process 
Accessing an Auto-Generated Control Class 
Bridging Between Auto-Generated Code and Manually Written Code 
Using Comments in Code

Object Instantiation, Object Implementation & Adding Methods & Properties

Instantiation 
Implementation

Modifying a Property

Making the Property Public 
Passing an Argument to Set the Property

Using Get/Set to Access Methods

Initializing a Property Through a Constructor

Overloading: Multiple Constructors

if/else Conditional Logic

Enumerations 
Review of Blocks in the Code 
Advanced Coding & Interactivity: Practical Application

Using Classes in User Controls

Creating Custom Controls 
Custom Controls as Classes

Adding States to Custom Controls

Extending the Abilities of Custom Controls with C#

Adding Exposed Properties

Working with Data

Adding Data Sources

Creating and Customizing Controls from Data Sources

Data Binding

Binding Element Properties 
Introducing DeepZoom

DeepZoom Composer

DeepZoom Technology 
Blurry-to-crisp Loading Behavior 
Image Pyramids and Tiles 
Project Structure

Preparing Images for a DeepZoom Composition

Creating, Composing, and Exporting a DeepZoom Project

Creating the DeepZoom Composition 
Changing the Stacking Order

Aligning and Distributing Images

Exporting Your DeepZoom Project

Updating your DeepZoom Project to Silverlight 4