Tools and techniques for designing User Interfaces with Microsoft Silverlight 2

Prerequisites:

Some familiarity with tools such as Photoshop, Flash, Illustrator and Dreamweaver. Developers would find experience with C# and Visual Studio an advantage

Course Description:

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

The course will consist of approximately 50% instructor presentation (limited PowerPoint slides and an emphasis on instructor led demonstration) and 50% hands on lab activities, which will provide students the opportunity to gain solid hands on experience with Silverlight and the Expression Studio products.

After completing this course, students will be able to:

• Describe the key features of Silverlight 2.
• Describe the people, tools, and tool workflow associated with creating Silverlight experiences.
• Create and manipulate images by using Expression Design.
• Create Expression Blend projects.
• Assemble and build a rich user interface by using Expression Blend.
• Develop and customize media by using 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.
• Customize the built in controls
• Create custom User Controls
• Create DeepZoom Silverlight Experiences

The Primary Audience is Designers – which includes graphics and Web designers currently familiar with tools such as Photoshop, Flash, Illustrator and Dreamweaver. The course is also relevant for those developers wanting to create rich front end applications

This course includes the following modules:

Fundamentals of Microsoft Silverlight

• This lesson introduces Silverlight, provides demonstrations of its capabilities and features, and describes the emerging capabilities of Silverlight. This lesson also explains the component architecture of Silverlight and describes the main tools that you can use to develop Silverlight content.
• This lesson will introduce and demonstrate the fundamentals of XAML, showing how you can use XAML to create the most common Silverlight features including controls, vector shapes, brushes, animations, and video

Introducing the Workflow for Building Silverlight Experiences

• This lesson introduces the Silverlight workflow by describing the designer-developer roles. This lesson also describes the collaborative workflow of the Expression Studio tools that are used in the creation of Silverlight content

Preparing Images by Using Microsoft Expression Design

• This lesson introduces Expression Design, provides an overview of the UI, and explains the main features of the application. The lesson also demonstrates how you use the application. This lesson describes how to use the export and import functionality of Expression Design. At the end of this lesson, you will create bitmap images and vector-based artwork to produce a button

Introducing Microsoft Expression Blend

• This lesson provides an overview of Expression Blend, introduces its main features, and explains how to use Expression Blend to create a Silverlight project. The lesson describes the UI for Expression Blend and explains the purpose of many of its tools and panels.
• This lesson explains the Expression Blend project structure, and shows how to build a new Silverlight project and import digital assets into that project.
• This lesson tackles a subject of primary importance to a designer. It explains the concept behind the object tree and how the Objects panel represents this. It explains how to use canvases in Expression Blend and the parent-child object relationship

Creating a Simple User Interface by Using Microsoft Expression Blend

• You can use the drawing tools in Expression Blend to create many parts of the UI, including buttons, menus, icons, and general graphics. Expression Blend generates all of these objects as Extensible Application Markup Language (XAML) to form crisp, vector shapes. You can also use the brush tools to add sophisticated color effects to objects to enhance the aesthetics of your application.
• You can use Expression Blend to add animations to many objects in your Silverlight project. Most commonly, you will want to add animation to buttons so that they animate when the user moves the mouse pointer over them or clicks them. You can also add animations to paths, shapes, images, or media elements, which you can use to achieve some very interesting results.
• This lesson give a quick, designer focused, introduction to C# and the Silverlight programming model.
• This lesson explains how to add basic interactivity through simple XAML. Students will learn how to hook buttons to click events and to write very simple code to perform basic functions, such as performing page transitions and triggering animations

Designing by Using Controls

• This lesson introduces the concept of controls, and then describes the controls that are available and how students can use them within their Silverlight experiences.
• This lesson introduces the conception of control customization, altering the appearance and visual interactivity but keeping the core control behavior or functionality. This lesson describes how styles can be used to manipulate and standardize control elements as well as looking the Visual State Manager as a way to implement customizations without needing to write code, create triggers or storyboards.
• This lesson explains how to create your own controls, in form of custom user controls

Publishing Media Content

• This lesson introduces and demonstrates Expression Encoder, and its main features and capabilities for working with video.
• This lesson gives you an overview of the media template skins and describes how to create Silverlight media content by customizing a media player template skin.
• This lesson introduces and explains markers, and then shows you how to add markers to your media content by using Expression Encoder

Designing by Using Controls

• This lesson introduces the concept of controls, and then describes the controls that are available and how students can use them within their Silverlight experienceshis lesson introduces the Deep Zoom feature within Silverlight, as well as how to create DeepZoom experiences by using Deep Zoom Composer.
• This lesson will cover how to customize the Deep Zoom experience by using Expression Blend

Handing Off Your Project to a Developer

• Although developers do not have to spend a lot of time incorporating a design for use, they must still be able to use the design effectively because they must link it to code and use code to control the UI elements. Because of this, it is important that the designer prepares the project well before handing it off to the developer. This enables the developer to take the design with minimal confusion and potential rework.
• You may be in an environment where you must upload or manage your project files within a centralized source control system. A source control system such as Team Foundation Server source control enables you to ensure that your workflow is efficient and that the developers on your team receive all of the files that they require to continue working on the project in an efficient manner.

Performing Basic Development Tasks in Microsoft Silverlight

• This lesson introduces the DOM and Silverlight object models and shows how you use them to change the position of XAML objects, how to attach event handlers, and how to dynamically create XAML objects by XAML manually at run time.
• This lesson also describes how you use, initialize, and access the Silverlight plugin to host your Silverlight application.
• This lesson shows you how to reference and modify objects and objects in collections at run time. This lesson also shows you how to change the z-order of XAML objects to change which objects are displayed in front of or behind other overlapping XAML objects

Enhancing the User Experience

• This lesson describes the keyboard events that Silverlight supports and explains how to attach event handlers for these keyboard events. This lesson describes the text elements that Silverlight provides and the formatting options that you use to format text in your Silverlight applications.
• This lesson also shows you how to package font files into Zip files to embed custom fonts in your Silverlight applications. This lesson describes the capabilities of the ink support in Silverlight and the scenarios that you might use ink features

Creating Advanced Animations

• This lesson describes KeySpline animations and how to script animations.
• The best way to model the real world in animations involves writing code that alters your Extensible Application Markup Language (XAML) objects at run time.

Creating Advanced Media Effects

• This lesson describes how to create a VideoBrush manually by creating the XAML directly. The lesson also explains the limits that Expression Blend imposes when you create advanced media effects that use brushes.
• This lesson describes more about the MediaElement object, how to work with streams and buffering, and how to consume events. The lesson culminates in the creation of your own media player.
• This lesson provides more information about Media Elements, the Progress events, and how to use markers to trigger events

Publishing Your Microsoft Silverlight Application

• After you have developed your Silverlight application, the next step is to release it. This process is known as publication. Publication involves copying files from your application to a public server, which could be one of your own Web servers, a hosted server, or a server that Microsoft provides that uses the Silverlight Streaming service. When you integrate your Silverlight application into a host Web page, you can control how the Silverlight control is rendered. You can specify elements such as its size, its position, and whether it should be full-screen.
• When you build real-world applications, you must consider performance and user experience. This lesson describes how to use the WebClient object. Students will learn how to package assets into a XAP file and how to create and use the downloader to dynamically load assets. They will also learn how to use the Silverlight downloader to display a progress bar to display progress during the download of large assets.