50147 - Tools and Creative Techniques for Designing User Interfaces by using Microsoft Silverlight

This four-day instructor-led training course teaches developers and designers how to use the Microsoft Expression Studio product set to build rich and compelling user experiences based on the Microsoft Silverlight platform.

After completing this course, students will be able to:

• Describe the key features of Microsoft Silverlight
• Describe the people, tools, and tool workflow associated with creating Silverlight experiences
• Create and manipulate images by using Microsoft Expression Design
• Create projects in the Microsoft Expression Blend design software
• Assemble and build a rich user interface (UI) by using Expression Blend
• Develop and customise media by using Microsoft Expression Encoder
• Hand off design projects and graphical assets to developers
• Develop basic code in a Silverlight project
• Enhance the user experience by using keyboard interactivity, text effects and ink
• Develop advanced animation effects
• Develop advanced media effects
• Publish a Silverlight application
• Customise the built-in controls
• Create custom user controls
• Create Deep Zoom Silverlight experiences

Module 1: Fundamentals of Microsoft Silverlight
This module introduces Silverlight and provides the context for the rest of the course. The module demonstrates the key capabilities and features of Silverlight. The intention of this module and its demonstrations is to create a “wow” factor to enthuse students and get them excited about learning more. It also presents an overview of Extensible Application Markup Language (XAML) to give students an insight into the language on which the tools in Expression Studio and Silverlight are based.

Lessons
• Introducing Silverlight
• Introducing XAML

After completing this module, students will be able to:
• Explain the uses and capabilities of Silverlight
• Create and manipulate common Silverlight features by using XAML

Module 2: Introducing the Workflow for Building Experiences in Microsoft Silverlight
This module covers the life of a Silverlight project from start to finish. The module describes each stage in the creation process, the people typically involved, and the tools that they use.

Lessons
• Building Silverlight Experiences

After completing this module, students will be able to:
• Describe the workflow of the people and tools that are associated with creating Silverlight experiences.

Module 3: Preparing Images by Using Microsoft Expression Design
This module explains how to create vector and bitmap images by using Expression Design and export them in a format that is suitable for a Silverlight project.

Lessons
• Introducing Expression Design
• Preparing Images by Using Expression Design

Lab : Creating Graphic Assets by Using Expression Design
• Creating a Button
• Exporting Bitmap Images as PNG, and Vector-Based Objects as Silverlight XAML Files
• Exporting Bitmap and Vector-Based Images by Using Slices

After completing this module, students will be able to:
• Describe the functionality of Expression Design
• Create a compelling UI button by using vector-based and bitmap graphics
• Prepare and export images by using Expression Design

Module 4: Introducing Microsoft Expression Blend
This module introduces students to Expression Blend, explains what the program enables them to achieve, and shows the Silverlight project structure.

Lessons
• Introducing Expression Blend
• Creating an Expression Blend Project
• Organising Objects in Expression Blend

Lab : Building a Simple Expression Blend Project
• Creating a Silverlight Project

After completing this module, students will be able to:
• Describe the core features of Expression Blend
• Build a simple Expression Blend project
• Organise objects inside an Expression Blend project

Module 5: Creating a User Interface by Using Microsoft Expression Blend
This module shows the students how to use Expression Blend to create a rich UI. The module describes drawing in Expression Blend and how to use the tools in Expression Blend to create animations. This module also explains how to add basic interactivity to a Silverlight application and provides a brief introduction to the Microsoft Visual C# development tool from a designer’s perspective.

Lessons
• Drawing and Editing
• Animating Objects
• Introducing Visual C#
• Adding Basic Interactivity

Lab : Expanding PowerPlay
• Enhancing the PowerPlay Application

Lab : Animating Objects
• Adding Animation to PowerPlay

Lab : Performing Page Transitions
• Creating a Page Transition
• Adding Interactivity

After completing this module, students will be able to:
• Draw and edit images in Expression Blend
• Create Storyboards to animate objects
• Add basic interactivity to an application and perform page transitions

Module 6: Designing by Using Controls
This module introduces the built-in controls that are supplied with Silverlight; details how to customize those controls by using styles and templates and by manipulating control states; and then explains how to create and utilize user controls.

Lessons
• Introducing Silverlight Controls
• Customising Controls
• Creating Custom User Controls

Lab : Creating Custom User Controls
• Creating Components for a Custom Control
• Creating a Custom User Control and Specifying Properties
• Adding Dependency Properties to Your Custom Control

After completing this module, students will be able to:
• Describe the controls that are provided with Silverlight
• Customise existing controls by using styles and templates
• Explain the purpose and use of control states in the Expression Blend design software
• Describe the purpose of, and how to create, custom user controls in Expression Blend

Module 7: Publishing Media Content
This module shows how to use Expression Encoder to encode video and audio, add markers to video and generate a customizable Silverlight media player.

Lessons
• Introducing Expression Encoder
• Customising the Media Player
• Adding Markers to Video

Lab : Customising a Video Skin
• Creating a Media Player and Customising the Background Assets
• Customising the Timer and Chapter Control Elements
• Creating the Timeline and Volume Slider Bars
• Creating the Player Control Elements

Lab : Publishing with Video Markers
• Applying Markers to Trigger Events

After completing this module, students will be able to:
• Explain the main features and functionality of Expression Encoder
• Customise a media player
• Add markers to a video to trigger simple events

Module 8: Creating Deep Zoom Experiences
This module introduces the Deep Zoom feature within Silverlight by way of the MultiScaleImage control, and then explains the purpose of the Deep Zoom Composer application and how to use it.

Lessons
• Introducing Deep Zoom
• Using Deep Zoom Composer

Lab : Customising a Deep Zoom Project by Using Expression Blend
• Creating a Deep Zoom Experience
• Updating the Deep Zoom Experience by Using Expression Blend

After completing this module, students will be able to:
• Explain what the Deep Zoom technology is
• Describe how to create and customise Deep Zoom experiences

Module 9: Handing Off Your Project to a Developer
This module describes what designers must do to prepare their project for hand-off to a developer so that they can increase the efficiency of the creation workflow. The module describes guidelines and best practices for designers and how to use a centralized source control system to manage a project.

Lessons
• Preparing Your Project for Hand-Off
• Adding Projects and Assets to Source Control

After completing this module, students will be able to:
• Describe how to prepare a project for hand-off
• Explain how to use source control

Module 10: Performing Basic Development Tasks in Microsoft Silverlight
This module gives a more in-depth look at using Microsoft .NET code to add logic to Silverlight applications. The module shows how to use the default code-behind file, create dynamic effects by using code, and manipulate the more complex properties of objects.

Lessons
• Silverlight Fundamentals
• Manipulating Objects in Code at Run Time

Lab : Modifying XAML Objects by Using C#
• Modifying XAML Objects

After completing this module, students will be able to:
• Add simple code to a Silverlight project
• Access and modify objects in Silverlight applications at run time

Module 11: Enhancing the User Experience
This module shows how to add more features to a Silverlight application, such as keyboard interactivity, text effects, and ink support.

Lessons
• Adding Keyboard Interactivity
• Working with Text Properties
• Adding Ink Support

Lab : Writing Ink Messages
• Implementing an Ink Application

After completing this module, students will be able to:
• Add keyboard interactivity to a Silverlight application
• Work with text properties in a Silverlight application
• Add ink support to a Silverlight application

Module 12: Creating Advanced Animations
This module explains how to create more complex animations by using code. The module describes how to develop spline animations and create scripted animations.

Lessons
• Creating KeySpline Animations
• Creating Code-Based Animations

Lab : Creating a Snowy Background
• Creating a Background Glow and a Snowflake
• Adding Animation Functionality

After completing this module, students will be able to:
• Develop KeySpline animations
• Develop code-based animations

Module 13: Advanced Media
This module shows how to use media effects to give impact to a project. The module describes how to use video brushes to render a video on multiple surfaces and to create live video reflections. The module also shows how to create a custom media player to use in a Silverlight application.

Lessons
• Painting with a VideoBrush
• Handling MediaElement Events

Lab : Creating an Advanced Media Player
• Creating a Media Player
• Adding Slider Controls

After completing this module, students will be able to:
• Create advanced video effects by using the VideoBrush
• Create an advanced media player

Module 14: Publishing Your Microsoft Silverlight Application
This module describes the final stages of the application creation process. The module explains how to optimize the appearance and performance of a project for the Web and how to effectively publish the project. The module also examines how to use the WebClient object to optimize the download performance.

Lessons
• Publication Process
• Working with the Silverlight Control
• Optimizing Run-Time Performance by Using the WebClient Object

Lab : Adding Full-Screen Functionality to a Media Player
• Creating a Full-Screen Media Player

After completing this module, students will be able to:
• Publish Silverlight content by using Microsoft Silverlight Streaming by Windows Live
• Program the Silverlight control
• Optimize run-time performance by using the WebClient object

This course is intended for developers and designers. This includes visual, interactive, and Web designers who are currently familiar with tools such as Adobe Photoshop, Flash Player, Illustrator and Dreamweaver.

Before attending this course, students must have some familiarity with tools such as Photoshop, Flash Player, Illustrator and Dreamweaver.