microsoft expression blend 4 unleashed

www.it-ebooks.info Microsoft ® Expression Blend ® 4 UNLEASHED 800 East 96th Street, Indianapolis, Indiana 46240 USA Brennon Williams www.it-ebooks.info Microsoft ® Expression Blend ® 4 Unleashed Copyright © 2011 by Pearson Education All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. ISBN-13: 978-0-672-33107-7 ISBN-10: 0-672-33107-1 Library of Congress Cataloging-in-Publication Data is on file Printed in the United States of America First Printing, April 2011 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possi- ble, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book. Bulk Sales Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales. For more information, please contact U.S. Corporate and Government Sales 1-800-382-3419 corpsales@pearsontechgroup.com For sales outside of the U.S., please contact International Sales international@pearson.com Editor-in-Chief Greg Wiegand Executive Editor Neil Rowe Development Editor Mark Renfrow Managing Editor Kristy Hart Project Editor Andy Beaster Copy Editor Water Crest Publishing Indexer Lisa Stumpf Proofreader Jennifer Gallant Technical Editor Bruce Johnson Publishing Coordinator Cindy Teeters Book Designer Gary Adair Composition Nonie Ratcliff www.it-ebooks.info Contents at a Glance Introduction 1 1 Expression Blend 4 Overview 5 2 Discovering the Expression Blend Interface . 13 3 Using Expression Blend for the First Time . 61 4 Common Properties and Functionality . 79 5 The Art of Layout . 103 6 Element Styles and Templates. 125 7 Working with Parts . 145 8 Working with States . 157 9 Working with SketchFlow . 175 10 Expression Blend Data Support . 217 11 Animations and Transitions . 247 12 Shapes, Paths, and Effects . 273 13 Skins, Themes, and Resource Dictionaries . 293 14 Advanced Controls . 313 15 Windows Phone 7 . 325 A Resources for Going Further . 351 Index . 357 www.it-ebooks.info Table of Contents Introduction 1 What Will You Learn in Expression Blend 4 Unleashed? 1 The Topics Covered in Expression Blend 4 Unleashed . 2 How This Book Is Structured . 2 Sample Applications Covered in This Book. 3 1 Expression Blend 4 Overview 5 What Is Expression Blend and Who Is It For? . 5 What’s New in Expression Blend 4? 7 A Brief History Leading to the Future… 8 Why the Focus Shifted Away from WPF . 8 Enter Silverlight. 9 What Does This All Mean for the Big Picture? . 10 What Does Expression Blend have to do with HTML5, CSS, and Expression Web? . 11 Summary 11 2 Discovering the Expression Blend Interface 13 The Expression Blend Interface Theme . 13 How the Experience Changes . 16 Project Panel . 21 Expression Blend Options Dialog . 22 The Artboard . 27 The XAML Editor . 30 The Code Editor. 31 Objects and Timeline Panel. 37 Tools Panel. 39 Assets Panel. 49 Properties Panel . 49 Resources Panel. 57 Data Panel . 58 Summary. 59 www.it-ebooks.info 3 Using Expression Blend for the First Time 61 Keeping Things Simple to Start With . 61 It All Starts with a Button! . 62 Transformations . 72 Simple Animation . 74 Summary. 78 4 Common Properties and Functionality 79 Controls, Controls, Elements… . 79 Border 80 The Checkbox 83 The RadioButton . 85 TextBlock Versus Label . 88 The TextBox . 89 The ProgressBar. 92 The Slider 93 The ComboBox. 97 The ListBox . 100 Summary . 102 5 The Art of Layout 103 Layout Panels . 103 The Grid Control . 104 Canvas . 117 The Viewbox . 119 Scaling Text . 120 StackPanel. 121 ScrollViewer . 122 Summary . 124 6 Element Styles and Templates 125 What Is the Difference Between a Style and a Template? . 126 What Is a Style?. 126 What Is a Template?. 132 Creating the Easiest Button Ever . 140 Simple Styles. 142 Summary . 144 Contents v www.it-ebooks.info 7 Working with Parts 145 It’s the Parts That Make Up the Whole. 146 Element to Element Binding. 147 Building Your Own Slider Control . 151 Summary . 156 8 Working with States 157 What Is a State? . 157 Working with the VSM . 158 The Base State . 160 The Unchecked State. 160 Control Level States . 163 State Transitions. 168 Transition Effects . 170 Transition Effect Priority . 172 Summary . 173 9 Working with SketchFlow 175 The User Centered Design Process (UCD) . 176 It’s All About the Process. 176 Collaboration Isn’t Easy . 181 Creating a Basic SketchFlow Solution . 183 Summary . 215 10 Expression Blend Data Support 217 Designing Sample Data. 217 Thinking About the Data . 218 Defining Sample Data . 219 Editing the Data Template. 224 Editing the ItemContainerStyle. 227 Working with the Details . 229 The ValueConverter Solution. 234 Switching to Live Data . 239 Summary . 246 11 Animations and Transitions 247 The Storyboard Editor . 247 Animation Keyframes. 250 Transformations . 251 Plane Projections . 258 Easing Functions . 260 Microsoft Expression Blend 4 Unleashed vi www.it-ebooks.info The Spline Editor. 261 Repeating the Animation . 263 Duplicate and Reverse the Storyboard . 266 HandOff Animation . 267 Managing State Animations with Storyboards. 268 Summary . 272 12 Shapes, Paths, and Effects 273 Taking Shape . 273 Is it a Path or a Line? . 274 The New Silverlight PathListBox . 282 The Magic of Effects . 289 Summary . 290 13 Skins, Themes, and Resource Dictionaries 293 Does It Come in Blue?. 293 Resource Dictionaries . 293 What Is the Difference Between a Skin and a Theme? . 297 Multiple Style Resources Within a Single Skin. 305 Using the ResourceVault in Your Solution . 307 Creating a Default Skin. 309 Using Themes in Expression Blend . 310 Summary . 312 14 Advanced Controls 313 Introduction. 313 The WPF and Silverlight Toolkits . 313 The DataGrid Control . 314 The DataForm . 316 Silverlight Charts. 317 InkPresenter . 319 AutoComplete Textbox. 320 WPF Extended Toolkit . 322 Summary . 323 15 Windows Phone 7 325 And on the 8th Day…. 325 Style and Substance with Metro . 327 Tools and Add-Ins . 329 Building a Simple WP7 Application . 335 Adding Rotation Animation Support. 346 Summary . 349 Contents vii www.it-ebooks.info A Resources for Going Further 351 Finding Out More…. 351 Short URLs . 351 Expression Blend Resources 352 SketchFlow Resources . 352 XAML Resources 353 Silverlight Resources 353 WPF Resources . 354 Windows Phone 7 Resources . 354 Surface Resources. 354 C# .NET Development Resources . 355 M-V-VM Resources. 355 Summary . 356 Index 357 Microsoft Expression Blend 4 Unleashed viii www.it-ebooks.info About the Author Brennon Williams is the Chief Technology Officer for the award-winning UK design and development agency, Splendid. Brennon is also a technical advisor to several companies around the world, specializing in the implementation of designer/developer collaboration and workflows. For almost two decades, Brennon has worked in several countries as a consultant software developer and technical advisor. Owner of the ExpressionBlend.com website which is due to be launched in 2011, Brennon’s technology insights can also be followed at his personal blog, brennonwilliams.com Brennon was awarded a BS in Computer Science from NYU and has received the Microsoft MVP award for Expression Blend 2008, 2009, 2010, 2011. www.it-ebooks.info [...]... Net and indeed with Expression Blend 4, but these concepts specifically are the key areas in terms of UI implementation If you are new to Expression Blend, you will find that you can read this book from start to finish and build your knowledge step by step, from beginner concepts through to complex interaction The Topics Covered in Expression Blend 4 Unleashed Expression Blend 4 Unleashed contains detailed... Begin with Expression Blend 4 Unleashed It is essential that you have downloaded Expression Blend 4 or Expression Studio It will also help if you have a version of Visual Studio installed All those packages can be found by going to Microsoft s website and searching for the relevant download www.it-ebooks.info This page intentionally left blank www.it-ebooks.info CHAPTER 1 Expression Blend 4 Overview... platform, such as Silverlight or WPF www.it-ebooks.info What’s New in Expression Blend 4? 7 Learn to use Expression Blend 4 as a tool, and you will be able to work with all the supported platforms with only slight changes between them 1 What’s New in Expression Blend 4? If you are an experienced user of past releases of Expression Blend, it might be the subtle changes to the interface that you first... CHAPTER 1 Expression Blend 4 Overview IN THIS CHAPTER Who should use Expression Blend 4? What’s new in Expression Blend 4? The growth of Silverlight HTML5 and how it may affect XAML In this chapter, you will be quickly taken through some of the high-level concepts of Blend as a tool and be introduced to what is new in Expression Blend 4 As you may have heard, there are currently several rumors surrounding... do using Expression Blend. ” —Sam Bourton, Developer www.it-ebooks.info Project Jupiter and the future of Expression Blend 6 CHAPTER 1 Expression Blend 4 Overview “As a developer, Blend allows me to concentrate on the final result and seeing it growing step by step without worrying excessively about technical aspects, it also makes the code and view integration very easy and smooth Without Blend, I... performance than the predecessor Expression Blend 1 and 2 do support early versions of the Net framework before version 4. 0, but it must be noted that the project types created by Expression Blend 1 and 2 only associate with Visual Studio 2008 Expression Blend 4 creates and support Visual Studio 2010 project types This book will focus on targeting the Net framework version 4. 0 for both WPF and Silverlight,... with Expression Blend Take the time to understand the core parts of Blend, and you will be rewarded Keep in mind that you will use Blend differently than I do, and differently than the person sitting next to you… But, after reading this book, you will be using Blend how you do www.it-ebooks.info 1 Microsoft knows they have the right tooling solution in place now with applications like Expression Blend, ... forward The Expression Blend Interface Theme Amazingly, one of the first questions that many users new to Expression Blend ask is: “Can I change the UI theme?” The short answer is yes—you have a choice of two themes, Expression Dark,” shown in Figure 2.1, and Expression Light,” shown in Figure 2.2 www.it-ebooks.info Working with Resources Working with the Data panel 14 CHAPTER 2 Discovering the Expression. .. with the Data panel 14 CHAPTER 2 Discovering the Expression Blend Interface FIGURE 2.1 An example of the Expression Blend Light theme FIGURE 2.2 An example of the Expression Blend Dark theme www.it-ebooks.info The Expression Blend Interface Theme There has been several requests over the years to enable the user to customize the theming of the Blend interface, but as of yet, it hasn’t been a high-enough... core features of Expression Blend 4, the creation of compositions, and the structure of solutions in a generic setting By far, the most important features of Expression Blend to learn are the combination of several intrinsically connected concepts, as follows: Styles and templates Parts States Behaviors Animations Resources Data www.it-ebooks.info 2 Expression Blend 4 Unleashed Understanding these . www.it-ebooks.info Microsoft ® Expression Blend ® 4 UNLEASHED 800 East 96th Street, Indianapolis, Indiana 46 240 USA Brennon Williams www.it-ebooks.info Microsoft ® Expression Blend ® 4 Unleashed Copyright. Blend 4 Unleashed? 1 The Topics Covered in Expression Blend 4 Unleashed . 2 How This Book Is Structured . 2 Sample Applications Covered in This Book. 3 1 Expression Blend 4 Overview 5 What Is Expression. Expression Blend 4? . What’s new in Expression Blend 4? . The growth of Silverlight . HTML5 and how it may affect XAML . Project Jupiter and the future of Expression Blend CHAPTER 1 Expression Blend 4 Overview In