You are previewing Pro Expression Blend 4.
O'Reilly logo
Pro Expression Blend 4

Book Description

Pro Expression Blend 4 is for .NET developers wanting to learn how to use Expression Blend when creating their WPF and Silverlight applications. The book focuses on the Blend IDE and is comprised of two parts.

The first part of the book provides a detailed examination of the key Blend topics, including workspace customization, graphics, layout, styles, themes, data binding, and the use of SketchFlow. At the end of this part you will have an excellent understanding of the Blend product and what it can do for you.

The second part of this book makes it unique. It contains a series of walkthrough 'lab' sessions to build four fully working applications. This part of the book is more detailed and modeled on the tutorial support that you might receive in a good training class or hands-on lab. You'll work with both Blend and .NET code to finalize fully working projects that will provide both valuable insights and a foundation of working code for your future WPF and Silverlight projects.

Table of Contents

  1. Copyright
  2. About the Author
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
    1. Confessions of an XAML Jockey
      1. This Is Not a Programming Book...
      2. ... and Graphical Artists Are Welcome!
    2. Chapter Overview
      1. Chapter 1: Learning the Core Blend IDE
      2. Chapter 2: Vector Graphics and Object Resources
      3. Chapter 3: The Animation Editor
      4. Chapter 4: Controls, Layouts, and Behaviors
      5. Chapter 5: Styles, Templates, and UserControls
      6. Chapter 6: Blend Data Binding Techniques
      7. Chapter 7: Designing for Windows Phone 7
      8. Chapter 8: Prototyping with SketchFlow
    3. Obtaining the Sample Projects
    4. Obtaining Updates for This Book
    5. Contacting Me
  6. 1. Learning the Core Blend IDE
    1. 1.1. The Microsoft Expression Family
      1. 1.1.1. The Role of Expression Web
      2. 1.1.2. The Role of Expression Encoder
      3. 1.1.3. The Role of Expression Design
      4. 1.1.4. The Role of Expression Blend
        1. 1.1.4.1. Expression Blend Is Typically Only One Side of the Coin
        2. 1.1.4.2. The Role of SketchFlow
    2. 1.2. The Expression Blend Project Templates
      1. 1.2.1. WPF Project Templates
      2. 1.2.2. Silverlight Project Templates
      3. 1.2.3. Windows Phone Project Templates
    3. 1.3. A Guided Tour of the Core Blend IDE
      1. 1.3.1. Loading a Blend Sample Project
      2. 1.3.2. The Artboard and Artboard Controls
        1. 1.3.2.1. Zooming the Artboard Display
        2. 1.3.2.2. Showing and Hiding Rendering Effects
        3. 1.3.2.3. Tweaking UI Positioning with Snap Grid
        4. 1.3.2.4. Viewing Annotations
        5. 1.3.2.5. Viewing and Editing the Underlying XAML
      3. 1.3.3. The Objects and Timeline Panel
        1. 1.3.3.1. Selecting Objects for Editing
        2. 1.3.3.2. Regarding the "Timeline" Aspect
      4. 1.3.4. The Properties Panel
        1. 1.3.4.1. Naming and Finding Objects
        2. 1.3.4.2. An Overview of Property Categories
        3. 1.3.4.3. Viewing Advanced Configuration Options
      5. 1.3.5. The Project Panel
      6. 1.3.6. The Integrated Code Editor
      7. 1.3.7. The Results Panel
      8. 1.3.8. The Tools Panel
        1. 1.3.8.1. Adding Custom Content to the Sample Project
        2. 1.3.8.2. The Selection and Direct Selection Tools
        3. 1.3.8.3. The Zoom and Pan Tools
        4. 1.3.8.4. The Assets Library (and the Assets Panel)
      9. 1.3.9. Handling and Implementing Events
    4. 1.4. Customizing the Options of the Blend IDE
      1. 1.4.1. Creating a Custom Workspace Layout
    5. 1.5. The Expression Blend Documentation System
    6. 1.6. Summary
  7. 2. Vector Graphics and Object Resources
    1. 2.1. The Realm of Vector Graphics
      1. 2.1.1. Use of Graphical Data Is Pervasive
    2. 2.2. Exploring the Core Drawing Tools
      1. 2.2.1. Working with the Pencil Tool
      2. 2.2.2. Working with the Pen Tool
        1. 2.2.2.1. The Result of Using the Pen and Pencil Tools
      3. 2.2.3. Working with the Rectangle, Ellipse, and Line Tools
      4. 2.2.4. Working with the Shapes Section of the Assets Library
      5. 2.2.5. Modifying a Shape Using the Appearance Editor
      6. 2.2.6. Coloring a Shape Using the Brushes Editor
        1. 2.2.6.1. Viewing Brush-Centric Properties
        2. 2.2.6.2. Selecting the No Brush Option
        3. 2.2.6.3. Defining a Solid-Colored Brush
        4. 2.2.6.4. Defining a Gradient Brush
        5. 2.2.6.5. Defining a Tile Brush
    3. 2.3. Combining Geometries and Extracting Paths
      1. 2.3.1. Converting a Shape to a Path
    4. 2.4. Interacting with Shapes
      1. 2.4.1. Handling Events
    5. 2.5. Configuring "Pens"
      1. 2.5.1. Defining Pen Caps
      2. 2.5.2. Defining a Dash Pattern
    6. 2.6. Revisiting Visual Effects
      1. 2.6.1. Tweaking a Visual Effect
    7. 2.7. The Role of Expression Design
      1. 2.7.1. Preparing and Exporting a Sample Image
      2. 2.7.2. Creating a New Silverlight Application
        1. 2.7.2.1. Importing the Sample Data into a Blend Project
        2. 2.7.2.2. Interacting with the Bear
    8. 2.8. Applying 2D Graphical Transformation
      1. 2.8.1. Building the Initial UI
      2. 2.8.2. Applying Transformations at Design Time
        1. 2.8.2.1. RenderTransform or LayoutTransform?
      3. 2.8.3. Applying Transformations in Code
    9. 2.9. Applying 3D Graphical Transformation
      1. 2.9.1. An Introduction to WPF 3D Graphics
        1. 2.9.1.1. Mapping a 2D Image to a 3D Plane
        2. 2.9.1.2. The Elements of Viewport3D
        3. 2.9.1.3. Transforming the 3D Viewport with the Camera Orbit Tool
        4. 2.9.1.4. Changing Camera Settings Using the Properties Panel
        5. 2.9.1.5. Changing the 3D Viewport Using the Artboard Tools
        6. 2.9.1.6. Changing 3D Lighting Effects Using the Light Editors
        7. 2.9.1.7. Controlling the Camera in Code
        8. 2.9.1.8. A Brief Word on ZAM 3D
      2. 2.9.2. An Introduction to Silverlight 3D Graphics
        1. 2.9.2.1. Driving a Projection in Code
    10. 2.10. The Role of Object Resources
      1. 2.10.1.
        1. 2.10.1.1. Creating Resources in Blend
        2. 2.10.1.2. Managing Existing Resources
        3. 2.10.1.3. Applying Resources to New UI Elements
    11. 2.11. Summary
  8. 3. The Animation Editor
    1. 3.1. Defining the Role of Animation Services
      1. 3.1.1. The Scope of Animation Services
    2. 3.2. The Blend Animation Workspace
      1. 3.2.1. Creating a New Storyboard
      2. 3.2.2. Managing Existing Storyboards
      3. 3.2.3. Adding Keyframes
      4. 3.2.4. Capturing Object Property Changes
      5. 3.2.5. Testing Your Animation
      6. 3.2.6. Viewing the Animation Markup
      7. 3.2.7. Configuring Storyboard Properties
      8. 3.2.8. Zooming the Timeline Editor
    3. 3.3. Interacting with Storyboards in Code
      1. 3.3.1. Further Details of the Storyboard Class
    4. 3.4. WPF-Specific Animation Techniques
      1. 3.4.1. Working with WPF Motion Paths
      2. 3.4.2. Controlling WPF Animations Using Triggers
        1. 3.4.2.1. Adding a Trigger with the Triggers Panel
        2. 3.4.2.2. Building a Menu System with Blend
        3. 3.4.2.3. Assigning Triggers to Menu Items
    5. 3.5. Understanding Animation Easing Effects
      1. 3.5.1. Building the Initial Layout
      2. 3.5.2. Creating the Initial Storyboards
      3. 3.5.3. Applying Animation Easing Effects
      4. 3.5.4. Working with the KeySpline Editor
      5. 3.5.5. Executing the Storyboard at Runtime
      6. 3.5.6. Learning More About Animation Easing Effects
    6. 3.6. Controlling Storyboards in XAML via Behavior Objects
      1. 3.6.1. Modifying the SimpleBlendAnimations Example
      2. 3.6.2. Adding the ControlStoryboardAction Behavior
    7. 3.7. Summary
  9. 4. Controls, Layouts, and Behaviors
    1. 4.1. A First Look at GUI Controls
      1. 4.1.1. Locating Controls Within the IDE
      2. 4.1.2. Configuring Controls via the Properties Panel
      3. 4.1.3. Learning About Control Details
    2. 4.2. Understanding the Control Content Model
      1. 4.2.1. Creating Composite Content
      2. 4.2.2. Handling Events for Controls with Composite Content
      3. 4.2.3. Reusing Composite Content
    3. 4.3. Understanding the Items Control Model
      1. 4.3.1. Adding ListBoxItems
      2. 4.3.2. Viewing the XAML
      3. 4.3.3. Finding the Current Selection
      4. 4.3.4. Working with the Tag Property
    4. 4.4. Working with Layout Managers
      1. 4.4.1. Additional Layout Types
      2. 4.4.2. Changing the Layout Type
      3. 4.4.3. Designing Nested Layouts
      4. 4.4.4. Grouping and Ungrouping Selected UI Elements
      5. 4.4.5. Repositioning a UI Element into a Layout Manager
    5. 4.5. Building a User Interface with Blend
      1. 4.5.1. Creating a Tabbed Layout System
      2. 4.5.2. Working with the Grid
        1. 4.5.2.1. Defining Grid Rows and Columns
        2. 4.5.2.2. Adding Items to Grid Cells
        3. 4.5.2.3. Creating a Grid Splitter
        4. 4.5.2.4. Adding a Nested StackPanel
      3. 4.5.3. Introducing the WPF Document API
        1. 4.5.3.1. Block Elements and Inline Elements
        2. 4.5.3.2. Document Layout Managers
      4. 4.5.4. Creating a ToolBar Control
        1. 4.5.4.1. Populating a FlowDocument
        2. 4.5.4.2. Populating a FlowDocument Using Code
        3. 4.5.4.3. Saving and Loading Document Data
    6. 4.6. Introducing Blend Behavior Objects
      1. 4.6.1. The MouseDragElementBehavior Object
    7. 4.7. Summary
  10. 5. Styles, Templates, and UserControls
    1. 5.1. The Role of Styles
      1. 5.1.1. Creating a Simple Style by Hand
      2. 5.1.2. Assigning a Control's Style Property
      3. 5.1.3. Overriding Style Settings
      4. 5.1.4. Constraining a Style with TargetType
      5. 5.1.5. Subclassing Existing Styles
      6. 5.1.6. Defining Default Styles
      7. 5.1.7. Managing Existing Styles Using the Blend IDE
    2. 5.2. Creating New Styles Using Blend
      1. 5.2.1. Creating a New Empty Style
      2. 5.2.2. Working with WPF Simple Styles
        1. 5.2.2.1. Viewing Simple Style Markup
    3. 5.3. The Role of Control Templates in Styles
      1. 5.3.1. Building a Custom Control Template by Hand
      2. 5.3.2. Storing Templates as Resources
      3. 5.3.3. Incorporating Visual Cues Using WPF Triggers
      4. 5.3.4. Understanding the Role of {TemplateBinding}
      5. 5.3.5. Understanding the Role of <ContentPresenter>
      6. 5.3.6. Incorporating Templates into Styles
    4. 5.4. Creating Control Templates Using Expression Blend
      1. 5.4.1. Creating a Copy of a Default Template
        1. 5.4.1.1. Examining Style Properties of a Default Template
        2. 5.4.1.2. Examining the Template Itself
        3. 5.4.1.3. Using Tools to Edit a Template Copy
      2. 5.4.2. Creating a Stylized Template from a Graphic
        1. 5.4.2.1. Creating the Initial Graphic
        2. 5.4.2.2. Extracting the Stylized Template
        3. 5.4.2.3. Building a ListBox Stylized Template
        4. 5.4.2.4. Adding Interactivity via WPF Property Triggers
        5. 5.4.2.5. WPF Triggers: Further Resources
    5. 5.5. Building Templates Using the Silverlight API
      1. 5.5.1. Working with the VSM via the States Panel
      2. 5.5.2. Viewing the Generated XAML
      3. 5.5.3. Establishing State Group Transition Timing
      4. 5.5.4. Defining Transition Effects
      5. 5.5.5. Configuring Individual Transitions
      6. 5.5.6. A Brief Word Regarding Custom States
    6. 5.6. Generating UserControls Using Blend
      1. 5.6.1. Adding Visual States
      2. 5.6.2. Transitioning States in Code
      3. 5.6.3. Transitioning States in XAML
      4. 5.6.4. VSM: Further Resources
    7. 5.7. Summary
  11. 6. Blend Data Binding Techniques
    1. 6.1. The Role of Data Binding
    2. 6.2. Control-to-Control Data Binding
      1. 6.2.1. Building the Example UI
      2. 6.2.2. Creating New Data Bindings
      3. 6.2.3. Viewing the Generated Markup
    3. 6.3. Converting Data Types
      1. 6.3.1. Creating a Custom Data Conversion Class
      2. 6.3.2. Selecting a Conversion Class in Blend
        1. 6.3.2.1. Viewing the Generated Markup
    4. 6.4. Understanding Data Binding Modalities
      1. 6.4.1. Configuring Data Binding Options with Blend
      2. 6.4.2. Configuring a Two-Way Data Bind
    5. 6.5. Binding to Properties of Non-UI Objects
      1. 6.5.1. Creating a Custom Collection of (Custom) Objects
      2. 6.5.2. Defining an Object Data Source with the Data Panel
      3. 6.5.3. Binding the Entire Collection to a ListBox
        1. 6.5.3.1. Examining the Role of the Data Context
        2. 6.5.3.2. A First Look at Data Template Markup
        3. 6.5.3.3. Viewing the Bound Data Context
        4. 6.5.3.4. Quick Project Cleanup
      4. 6.5.4. Binding Individual Properties to ListBox Controls
      5. 6.5.5. Binding the Collection to a DataGrid
      6. 6.5.6. Manipulating the Collection at Runtime
    6. 6.6. Working with Data Templates
      1. 6.6.1. Editing a Data Template
      2. 6.6.2. Styling Items in a Data Template
      3. 6.6.3. Defining Composite UI Elements for a Data Template
      4. 6.6.4. Creating Control Templates Containing Data Templates
        1. 6.6.4.1. Adding Interactivity to the Template
    7. 6.7. Defining a WPF XML Data Source
      1. 6.7.1. Adding an XML Data Source
      2. 6.7.2. Binding XML Data to UI Elements via XPath
    8. 6.8. Creating a List Details Data Binding
      1. 6.8.1. Creating the User Interface
      2. 6.8.2. Examining the Generated Markup
    9. 6.9. Exploring the Role of Sample Data
      1. 6.9.1. Inserting Sample Data into a Project
      2. 6.9.2. Adding Additional Properties
      3. 6.9.3. Modifying the Data Types and Values
      4. 6.9.4. Binding Sample Data to the UI
      5. 6.9.5. Learning More About Sample Data
    10. 6.10. Data Binding: A Brief Word on Final Topics
      1. 6.10.1. Binding to Relational Database Data
      2. 6.10.2. The Role of Blend Databound Project Templates (MVVM)
    11. 6.11. Summary
  12. 7. Designing for Windows Phone 7
    1. 7.1. Installing the Windows Phone 7 SDK
      1. 7.1.1. Examining the New Bits
        1. 7.1.1.1. The Role of Microsoft XNA Game Studio 4.0
      2. 7.1.2. Installing the Windows Phone 7 Documentation
        1. 7.1.2.1. A Survey of Key Windows Phone 7 Namespaces
      3. 7.1.3. Viewing the New Blend Projects
        1. 7.1.3.1. The Updated Blend User Guide
          1. 7.1.3.1.1. Consider What You Already Know...
      4. 7.1.4. Viewing the New Visual Studio 2010 Projects
    2. 7.2. Exploring the Windows Phone Application Project Type
      1. 7.2.1. The Windows Phone Artboard
      2. 7.2.2. The Windows Phone System Styles
      3. 7.2.3. Creating a List-Details View with the Data Panel
      4. 7.2.4. Creating an Interactive Graphic
      5. 7.2.5. Creating a Custom Control Template
      6. 7.2.6. Handling the Click Event
      7. 7.2.7. Configuring the Emulator via the Device Panel
    3. 7.3. Exploring the Panorama Application Project Type
      1. 7.3.1. Examining the Initial Tree of Objects
      2. 7.3.2. Viewing the PanoramaItem Markup
      3. 7.3.3. Changing the Panorama Background
      4. 7.3.4. Adding a New PanoramaItem Object
    4. 7.4. Exploring the Pivot Application Project Type
      1. 7.4.1. Adding a New PivotItem
      2. 7.4.2. Designing the Pivot GUI Layout
      3. 7.4.3. Transforming the Grid
      4. 7.4.4. Controlling the Storyboard in XAML
    5. 7.5. Learning More About Windows Phone Development
      1. 7.5.1. MSDN Windows Phone Sample Projects
      2. 7.5.2. The App Hub Web Site
    6. 7.6. Summary
  13. 8. Prototyping with SketchFlow
    1. 8.1. The Role of Application Prototyping
      1. 8.1.1. The Role of SketchFlow
    2. 8.2. Examining a SketchFlow Prototype Sample
      1. 8.2.1. Exploring the SketchFlow Map Panel
        1. 8.2.1.1. The Role of the Start Node
        2. 8.2.1.2. Color Coding
        3. 8.2.1.3. Creating and Connecting Nodes
        4. 8.2.1.4. Assigning Transition Styles
      2. 8.2.2. Testing the Prototype with the SketchFlow Player
        1. 8.2.2.1. Navigating Screens
        2. 8.2.2.2. Adding Feedback to the Prototype
        3. 8.2.2.3. Exporting Prototype Feedback
        4. 8.2.2.4. Importing Client Feedback into Blend
        5. 8.2.2.5. Generating Microsoft Word Documentation
    3. 8.3. Creating a Silverlight Prototype
      1. 8.3.1. Examining the Project Files
      2. 8.3.2. Creating a Component Screen
      3. 8.3.3. Creating Additional Screens
      4. 8.3.4. Replicating the Navigation GUI
      5. 8.3.5. Using the NavigateToScreenAction Behavior
      6. 8.3.6. Incorporating Prototype Interactivity
      7. 8.3.7. Using the PlaySketchFlowAnimationAction Behavior
    4. 8.4. Packaging a Prototype
    5. 8.5. Moving a Prototype into Production
      1. 8.5.1. Modifying the *csproj Files
      2. 8.5.2. Updating the Root Project Assembly References
      3. 8.5.3. Modifying the App.xaml.cs File
    6. 8.6. Summary