Pro Expression Blend 4

387 Pages·2011·22.69 MB·English

by  Andrew Troelsen (auth.)

Pro Expression
Blend 4

■ ■ ■
Andrew Troelsen

i
Pro Expression Blend 4
Copyright © 2011 by Andrew Troelsen
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording, or by any information
storage or retrieval system, without the prior written permission of the copyright owner and the
publisher.
ISBN-13 (pbk): 978-1-4302-3377-0
ISBN-13 (electronic): 978-1-4302-3378-7
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos,
and images only in an editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or
not they are subject to proprietary rights.
President and Publisher: Paul Manning
Lead Editor: Ewan Buckingham
Technical Reviewer: Andy Olsen
Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan
Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Jeffrey Pepper, Frank
Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom
Welsh
Coordinating Editor: Debra Kelly
Copy Editor: Bill McManus
Compositor: MacPS, LLC
Indexer: BIM Indexing & Proofreading Services
Artist: April Milne
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail
[email protected], or visit www.springeronline.com.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or
promotional use. eBook versions and licenses are also available for most titles. For more
information, reference our Special Bulk Sales–eBook Licensing web page at
www.apress.com/info/bulksales.
The information in this book is distributed on an “as is” basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall
have any liability to any person or entity with respect to any loss or damage caused or alleged to
be caused directly or indirectly by the information contained in this work.
The source code for this book is available to readers at www.apress.com. You will need to answer
questions pertaining to this book in order to successfully download the code.
To the next little Troel
■ CONTENTS
Contents at a Glance
■ Contents ................................................................................................... v
■ About the Author .................................................................................... xiv
■ About the Technical Reviewer ................................................................. xv
■ Acknowledgments .................................................................................. xvi
■ Introduction ........................................................................................... xvii

■ Chapter 1: Learning the Core Blend IDE ................................................... 1(cid:2)
■ Chapter 2: Vector Graphics and Object Resources ................................. 33(cid:2)
■ Chapter 3: The Animation Editor ............................................................ 87(cid:2)
■ Chapter 4: Controls, Layouts, and Behaviors ....................................... 119(cid:2)
■ Chapter 5: Styles, Templates, and UserControls .................................. 163(cid:2)
■ Chapter 6: Blend Data Binding Techniques .......................................... 221(cid:2)
■ Chapter 7: Designing for Windows Phone 7 .......................................... 273(cid:2)
■ Chapter 8: Prototyping with SketchFlow .............................................. 311(cid:2)
■ Index ..................................................................................................... 347

iv
■ CONTENTS
Contents
■ Contents at a Glance ................................................................................ iv
■ About the Author .................................................................................... xiv
■ About the Technical Reviewer ................................................................. xv
■ Acknowledgments .................................................................................. xvi
■ Introduction ........................................................................................... xvii

■ Chapter 1: Learning the Core Blend IDE ................................................... 1(cid:2)
The Microsoft Expression Family ........................................................................ 1(cid:2)
(cid:2)
The Role of Expression Web .................................................................................................... 2
(cid:2)
The Role of Expression Encoder .............................................................................................. 2
(cid:2)
The Role of Expression Design ................................................................................................ 2
(cid:2)
The Role of Expression Blend ................................................................................................. 3
The Expression Blend Project Templates ............................................................ 5(cid:2)
(cid:2)
WPF Project Templates ........................................................................................................... 6
(cid:2)
Silverlight Project Templates .................................................................................................. 7
(cid:2)
Windows Phone Project Templates ......................................................................................... 8
A Guided Tour of the Core Blend IDE ................................................................... 8(cid:2)
(cid:2)
Loading a Blend Sample Project ............................................................................................. 9
(cid:2)
The Artboard and Artboard Controls ..................................................................................... 10
(cid:2)
The Objects and Timeline Panel ............................................................................................ 15
(cid:2)
The Properties Panel ............................................................................................................. 16
(cid:2)
The Project Panel .................................................................................................................. 19
(cid:2)
The Integrated Code Editor ................................................................................................... 20
(cid:2)
The Results Panel ................................................................................................................. 21
(cid:2)
The Tools Panel ..................................................................................................................... 22
v
■ CONTENTS
(cid:2)
Handling and Implementing Events ...................................................................................... 28
Customizing the Options of the Blend IDE ......................................................... 30(cid:2)
(cid:2)
Creating a Custom Workspace Layout .................................................................................. 30
The Expression Blend Documentation System ................................................. 31(cid:2)
Summary ........................................................................................................... 32(cid:2)
■ Chapter 2: Vector Graphics and Object Resources ................................. 33(cid:2)
The Realm of Vector Graphics ........................................................................... 33(cid:2)
(cid:2)
Use of Graphical Data Is Pervasive ....................................................................................... 34
Exploring the Core Drawing Tools ..................................................................... 34(cid:2)
(cid:2)
Working with the Pencil Tool ................................................................................................ 35
(cid:2)
Working with the Pen Tool .................................................................................................... 36
(cid:2)
Working with the Rectangle, Ellipse, and Line Tools ............................................................ 38
(cid:2)
Working with the Shapes Section of the Assets Library ....................................................... 39
(cid:2)
Modifying a Shape Using the Appearance Editor .................................................................. 40
(cid:2)
Coloring a Shape Using the Brushes Editor .......................................................................... 42
Combining Geometries and Extracting Paths .................................................... 47(cid:2)
(cid:2)
Converting a Shape to a Path ................................................................................................ 49
Interacting with Shapes .................................................................................... 50(cid:2)
(cid:2)
Handling Events .................................................................................................................... 50
Configuring “Pens” ........................................................................................... 52(cid:2)
(cid:2)
Defining Pen Caps ................................................................................................................. 52
(cid:2)
Defining a Dash Pattern ........................................................................................................ 53
Revisiting Visual Effects .................................................................................... 54(cid:2)
(cid:2)
Tweaking a Visual Effect ....................................................................................................... 55
The Role of Expression Design .......................................................................... 56(cid:2)
(cid:2)
Preparing and Exporting a Sample Image ............................................................................. 56
(cid:2)
Creating a New Silverlight Application .................................................................................. 60
Applying 2D Graphical Transformation ............................................................. 64(cid:2)
(cid:2)
Building the Initial UI ............................................................................................................. 64
(cid:2)
Applying Transformations at Design Time ............................................................................ 66
vi
■ CONTENTS
(cid:2)
Applying Transformations in Code ........................................................................................ 68
Applying 3D Graphical Transformation ............................................................. 69(cid:2)
(cid:2)
An Introduction to WPF 3D Graphics ..................................................................................... 69
(cid:2)
An Introduction to Silverlight 3D Graphics ............................................................................ 79
The Role of Object Resources ........................................................................... 81(cid:2)
Summary ........................................................................................................... 86(cid:2)
■ Chapter 3: The Animation Editor ............................................................ 87(cid:2)
Defining the Role of Animation Services ........................................................... 87(cid:2)
(cid:2)
The Scope of Animation Services ......................................................................................... 88
The Blend Animation Workspace ...................................................................... 88(cid:2)
(cid:2)
Creating a New Storyboard ................................................................................................... 89
(cid:2)
Managing Existing Storyboards ............................................................................................ 90
(cid:2)
Adding Keyframes ................................................................................................................. 91
(cid:2)
Capturing Object Property Changes ...................................................................................... 92
(cid:2)
Testing Your Animation ......................................................................................................... 94
(cid:2)
Viewing the Animation Markup ............................................................................................. 94
(cid:2)
Configuring Storyboard Properties ........................................................................................ 94
(cid:2)
Zooming the Timeline Editor ................................................................................................. 96
Interacting with Storyboards in Code ................................................................ 96(cid:2)
(cid:2)
Further Details of the Storyboard Class ................................................................................ 97
WPF-Specific Animation Techniques ................................................................ 98(cid:2)
(cid:2)
Working with WPF Motion Paths ........................................................................................... 98
(cid:2)
Controlling WPF Animations Using Triggers ........................................................................ 102
Understanding Animation Easing Effects ........................................................ 109(cid:2)
(cid:2)
Building the Initial Layout ................................................................................................... 110
(cid:2)
Creating the Initial Storyboards .......................................................................................... 111
(cid:2)
Applying Animation Easing Effects ..................................................................................... 111
(cid:2)
Working with the KeySpline Editor ...................................................................................... 113
(cid:2)
Executing the Storyboard at Runtime ................................................................................. 114
(cid:2)
Learning More About Animation Easing Effects .................................................................. 114
vii
■ CONTENTS
Controlling Storyboards in XAML via Behavior Objects ................................... 115(cid:2)
(cid:2)
Modifying the SimpleBlendAnimations Example ................................................................ 115
(cid:2)
Adding the ControlStoryboardAction Behavior .................................................................... 116
Summary ......................................................................................................... 118(cid:2)
■ Chapter 4: Controls, Layouts, and Behaviors ....................................... 119(cid:2)
A First Look at GUI Controls ............................................................................ 119(cid:2)
(cid:2)
Locating Controls Within the IDE ......................................................................................... 120
(cid:2)
Configuring Controls via the Properties Panel .................................................................... 121
(cid:2)
Learning About Control Details ........................................................................................... 121
Understanding the Control Content Model ...................................................... 123(cid:2)
(cid:2)
Creating Composite Content ............................................................................................... 124
(cid:2)
Handling Events for Controls with Composite Content ....................................................... 126
(cid:2)
Reusing Composite Content ................................................................................................ 127
Understanding the Items Control Model ......................................................... 128(cid:2)
(cid:2)
Adding ListBoxItems ........................................................................................................... 128
(cid:2)
Viewing the XAML ............................................................................................................... 130
(cid:2)
Finding the Current Selection ............................................................................................. 131
(cid:2)
Working with the Tag Property ........................................................................................... 132
Working with Layout Managers ...................................................................... 132(cid:2)
(cid:2)
Additional Layout Types ...................................................................................................... 134
(cid:2)
Changing the Layout Type ................................................................................................... 134
(cid:2)
Designing Nested Layouts ................................................................................................... 135
(cid:2)
Grouping and Ungrouping Selected UI Elements ................................................................ 136
(cid:2)
Repositioning a UI Element into a Layout Manager ............................................................ 137
Building a User Interface with Blend .............................................................. 138(cid:2)
(cid:2)
Creating a Tabbed Layout System ...................................................................................... 138
(cid:2)
Working with the Grid ......................................................................................................... 141
(cid:2)
Introducing the WPF Document API .................................................................................... 147
(cid:2)
Creating a ToolBar Control .................................................................................................. 149
Introducing Blend Behavior Objects ................................................................ 156(cid:2)
viii
■ CONTENTS
(cid:2)
The MouseDragElementBehavior Object ............................................................................. 159
Summary ......................................................................................................... 161(cid:2)
■ Chapter 5: Styles, Templates, and UserControls .................................. 163(cid:2)
The Role of Styles ........................................................................................... 163(cid:2)
(cid:2)
Creating a Simple Style by Hand ......................................................................................... 164
(cid:2)
Assigning a Control’s Style Property ................................................................................... 165
(cid:2)
Overriding Style Settings .................................................................................................... 167
(cid:2)
Constraining a Style with TargetType ................................................................................. 167
(cid:2)
Subclassing Existing Styles ................................................................................................ 168
(cid:2)
Defining Default Styles ........................................................................................................ 169
(cid:2)
Managing Existing Styles Using the Blend IDE .................................................................... 170
Creating New Styles Using Blend .................................................................... 172(cid:2)
(cid:2)
Creating a New Empty Style ............................................................................................... 172
(cid:2)
Working with WPF Simple Styles ........................................................................................ 175
The Role of Control Templates in Styles ......................................................... 180(cid:2)
(cid:2)
Building a Custom Control Template by Hand ..................................................................... 181
(cid:2)
Storing Templates as Resources ........................................................................................ 182
(cid:2)
Incorporating Visual Cues Using WPF Triggers ................................................................... 184
(cid:2)
Understanding the Role of {TemplateBinding} .................................................................... 186
(cid:2)
Understanding the Role of <ContentPresenter> ................................................................. 187
(cid:2)
Incorporating Templates into Styles ................................................................................... 187
Creating Control Templates Using Expression Blend ...................................... 189(cid:2)
(cid:2)
Creating a Copy of a Default Template ............................................................................... 189
(cid:2)
Creating a Stylized Template from a Graphic ...................................................................... 193
Building Templates Using the Silverlight API .................................................. 204(cid:2)
(cid:2)
Working with the VSM via the States Panel ........................................................................ 206
(cid:2)
Viewing the Generated XAML .............................................................................................. 207
(cid:2)
Establishing State Group Transition Timing ........................................................................ 208
(cid:2)
Defining Transition Effects .................................................................................................. 209
(cid:2)
Configuring Individual Transitions ...................................................................................... 210
(cid:2)
A Brief Word Regarding Custom States .............................................................................. 211
ix