Gaudioso foundation Learn the Blend and Visual Studio 2008 development environments Create designs using Blend 2’s unique tools Use XAML and C# to add interactivity to your designs Publish your Rich Media Applications to the Web using Silverlight Foundation Expression Blend 2: Building Applications in WPF and Silverlight T he only real tool available for creating Rich Media Applications, web-based animations, and games has been Flash—until now! WPF (Windows Presentation Foundation) and Silverlight have opened the door of Rich Media Application development to Microsoft NET developers With Microsoft’s new Blend and Visual Studio 2008, you can now create compelling Rich Media Applications complete with animations and even 3D! This book shows you how to take full advantage of Blend’s new interface, together with WPF and Silverlight’s vastly improved designer-developer workflow, guiding you through every step of development from downloading and installing of the development environment through creating finished, functional projects Available from Apress You’ll learn how to create simple drawing applications with the InkCanvas, make tabbed and scrollable interfaces, as well as build fully featured media players, photo galleries, and interactive 3D designs Each chapter discusses major WPF and Silverlight features, provides a hands-on tutorial, and explains how that feature is implemented in the real world In the end, you will have a collection of impressive WPF and Silverlight applications that can be added to your portfolio Whether you’re an experienced NET or web developer, or you’re just starting out, this book will provide you with all you need to create Rich Media Applications with Expression Blend ISBN-13: 978-1-59059-976-1 ISBN-10: 1-59059-976-4 53999 Expression Blend In this book, you’ll: Building Applications in WPF and Silverlight Also Available Foundation Expression Blend Building Applications in WPF and Silverlight Victor Gaudioso SHELVING C AT EGORY Web Development Create fantastic Rich Media Applications in Microsoft Expression Blend US $39.99 PC-compatible only www.friendsofed.com Move your applications to the Web using WPF and Silverlight Add video and advanced 3D to your desktop and web applications 781590 599761 this print for reference only—size & color not accurate spine = 0.875" 376 page count 9764FM.qxd 2/28/08 5:34 PM Page i Foundation Expression Blend Building Applications in WPF and Silverlight Victor Gaudioso 9764FM.qxd 2/28/08 5:34 PM Page ii Foundation Expression Blend 2: Building Applications in WPF and Silverlight Copyright © 2008 by Victor Gaudioso 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-59059-976-1 ISBN-10 (pbk): 1-59059-976-4 ISBN-13 (electronic): 978-1-4302-0612-5 ISBN-10 (electronic): 1-4302-0612-8 Printed and bound in the United States of America Trademarked names may appear in this book Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013 Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705 Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, 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 freely available to readers at www.friendsofed.com in the Downloads section Credits Lead Editor Ben Renow-Clarke Associate Production Director Kari Brooks-Copony Technical Reviewer Jason Cook Production Editor Laura Esterman Editorial Board Clay Andres, Steve Anglin, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Matthew Moodie, Joseph Ottinger, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager Kylie Johnston Copy Editor Ami Knox Compositor Dina Quan Proofreader Linda Seifert Indexer Carol Burbo Cover Image Designer Corné van Dooren Interior and Cover Designer Kurt Krames Manufacturing Director Tom Debolski 97a7b91d187e1703ee1e25f687516049 9764FM.qxd 2/28/08 5:34 PM Page iii I would like to dedicate this book to my loving wife, Shay, who always believed in me and pushed me to reach for the stars I would also like to dedicate this book to my three beautiful kids, Brianna, Tristan, and Luke Finally, I would like to dedicate this book to my wonderful, close-knit family—my parents, Ralph and Elfie, and my two awesome uncles, Joseph Gaudioso and Charles Elliot 9764FM.qxd 2/28/08 5:34 PM Page iv 9764FM.qxd 2/28/08 5:34 PM Page v CONTENTS AT A GLANCE About the Author About the Technical Reviewer About the Cover Image Designer Acknowledgments Introduction xv xvii xix xxi Chapter Setting Up the WPF Development Environment Chapter The WPF/Blend Workflow and Your First WPF Application Chapter The Blend Integrated Development Environment Chapter C# and XAML 23 53 91 Chapter The MediaElement Chapter ControlTemplates, Styles, and Custom UserControls Chapter Events and EventHandlers 99 117 141 167 Chapter ObservableCollections and the Data Factory Chapter 10 WPF and 3D Chapter Layout Elements 189 207 Chapter 11 DependencyProperties Chapter 12 Case Study A: 3DImageProject Chapter 13 Case Study B: 3DTieFighterProject Chapter 14 Case Study C: SilverlightPagingSystemProject 247 267 293 309 325 333 337 Chapter 15 Case Study D: SilverlightVideoPlayerProject Appendix WPF and Silverlight Resources Index xiii v 9764FM.qxd 2/28/08 5:34 PM Page vi 9764FM.qxd 2/28/08 5:34 PM Page vii CONTENTS About the Author About the Technical Reviewer About the Cover Image Designer Acknowledgments Introduction xiii xv xvii xix xxi Chapter Setting Up the WPF Development Environment Downloading and installing Visual Studio 2008 Professional Downloading and installing Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta Downloading and installing Blend Creating your first WPF project 14 Summary 21 Chapter The WPF/Blend Workflow and Your First WPF Application A new way of working Your first WPF application: “Hello World!” Getting to know Solution Explorer Time for Blend 2! Changing the size of the application Styling the Background Styling the TextBlock Making the “Hello World!” application more exciting Creating a WPF button Creating EventTriggers for the spinBtn Summary Chapter The Blend Integrated Development Environment The Blend toolbar The Selection tool The Direct Selection tool The Pen/Pencil tools The Pan tool 23 53 23 27 29 30 31 32 34 38 38 41 51 54 55 55 56 57 vii 9764FM.qxd 2/28/08 5:34 PM Page viii CONTENTS The Zoom tool The Camera Orbit tool The Eyedropper tool The Paint Bucket tool The Brush Transform tool The shape tools: Rectangle, Ellipse, and Line Layout controls Text controls and text input controls Input controls The Asset Library Last Used tool The Asset Library The InkCanvas control The TabControl The Frame control The Objects and Timeline panel The Project panel The Properties panel Brushes Appearance Layout Common Properties Text Transform Miscellaneous Search The Resources panel Blend development views and Workspaces The Design view The XAML view The Split view Workspaces The Design Workspace The Animation Workspace Creating 3D objects in Blend Summary Chapter C# and XAML C# and the NET Framework The NET CLR Why C#? XAML Summary 91 Chapter Layout Elements 57 57 58 58 58 60 61 62 62 62 62 63 64 64 65 66 67 68 76 78 79 79 79 80 80 81 81 82 82 83 83 83 84 86 88 91 92 92 96 97 99 The Grid 100 The Canvas 105 The StackPanel 107 viii 9764Index.qxd 2/28/08 5:32 PM Page 336 9764Index.qxd 2/28/08 5:32 PM Page 337 INDEX Numbers and symbols + button, adding new action with, 45 + Event button, creating new event, 43, 286 +Brush button, creating color resource with, 70–71 +CLR Object, adding a DataSource with, 276 - (minus) icon, 297 3D and WPF, 207–244 3D animation vendors, adoption of OBJ file format by, 227 3D box adding easing to, 288–289 adding new event to, 286 creating, 283–284 spinning, 286–290 3D objects building for placing VideoUserControl, 239 creating with third-party software, 212–220 exporting to pull into Blend 2, 217–220 3D plane, adding descriptive text to, 303 3D Tools controls, wrapping Viewport3D inside of, 242–243 3D Tools library, using, 233–243 3DImage application, creating, 86–88 3DImageProject Case Study A, 267–290 creating in Visual Studio, 208–212 importing images into, 268–270 styling and creating the DataSource, 275–276 3DMediaElementProject adding a video into, 236 building, 234–236 making video 3D, 238–243 wiring up buttons in, 237–238 3DPlane Window.Resource adding 3D Tools library code to, 240 binding Interactive3D namespace to, 240–241 3DTieFighterProject Case Study B, 293–307 cleaning XAML for, 296–297 creating, 295–307 creating and naming Ellipses buttons, 297–298 stripping animations and Triggers from, 297 styling the background, 302 A Abstract factory pattern, creating ObservableCollections with, 191–197 Add CLR Object Data Source dialog box, creating a DataSource in, 276 Add Existing Item dialog box adding icon image in, 258–265 telling VS to look for image files in, 269 Add new action button, timeline for, 230–231 Add New Item dialog box, creating ImageFactory in, 270–275 Advanced Visualizer animation package, OBJ files for, 227 AllowDrop property, setting for DragEnter event, 170–171 alpha, setting to zero, 251–252 Animate Temple button, creating, 229 Animation Workspace bringing up in Blend 2, 223 creating Storyboard animations in, 84 switching to in Blend 2, 286 viewing, 84 337 9764Index.qxd 2/28/08 5:32 PM Page 338 INDEX app.xaml, in Project panel, 66 Appearance bucket changing Visibility menu option in, 282 giving Ellipse bitmap effect with, 77–78 of Properties panel, 76–78 applicationResourceDict.xaml file, opening and editing Styles in, 148–149 AssemblyInfo.cs, in Project panel, 66 Asset Library button, displaying Asset Library with, 62–63 Asset Library Last Used tool, 62 Asset Library tool, creating ComboBox with, 197–198 autocomplete function, IntelliSense, 30 automatic garbage collection, in OOP, 95 B background adding gradient to MyMediaElementProject, 122 changing gradient, 312 styling, 32–34 Background DependencyProperty, setting for simple Button, 248 Background property, setting to No Brush, 220 Beatriz Costa blog, web site address, 334 BeginTime property, in Clock mode, 119 binding feature, in XAML, 97 Blend 2, 53–88 3D image and, 208–212 adding DataSource in, 198 adding Rows and Columns to LayoutControlsProject, 101 changing application size in, 31–32 Column and Row definitions created in, 102 creating 3D objects in, 86–88 creating EventAndEventHandlers project in, 168–170 creating new WPF Application in, 218–220 development views and Workspaces, 81–86 downloading and installing, 9–13 handling of animation by, 231–233 importing images into project from, 191 keyboard shortcuts for tools, 55 Make a Button feature, 126–129 338 making “Hello World” more exciting, 38–51 myButton control design, 147 Objects and Timeline panel in, 41, 65 opening after compiling project, 19 opening project in, 30 sample XAML code in, 25–26 startup dialog box, 19 styling application background, 32–34 styling TextBlock, 34–38 switching to Animation Workspace, 42 toolbar, 54–64 vs Visual Studio for creating WPF projects, 14 working with Viewport3Ds in, 220–223 Blendables-Tools and Components for Designers and Developers, 335 BlueButtonControl adding Image control to, 154–155 moving to ResourceDictionary, 152–153 BlueButtonControl Style applying to multiple Button controls, 155–156 creating, 144–147 BlueButtonUserControl adding functionality to, 163–164 seeing in action, 161–163 Boolean variable, 133 creating in Window1.xaml.cs, 262 Border layout element, 111–112, 114 BorderBrush option, in Brushes bucket, 76 box Viewport3D moving playhead, 287–288 selecting Rotation tab in Transform bucket, 287 setting Visibility value for, 284 turning down arrows to Box01, 287 Brimelow, Lee, web site created by, 233 Brush resource, applying to Ellipse, 72 Brush Transform tool adjusting gradients with, 33–34, 250 Blend toolbar, 58–60 changing gradient color direction with, 70 changing Rectangle with, 252 creating play Button with, 127 creating Rectangle with gradient with, 58–60 Brushes bucket options in, 76 turning down content for, 32 9764Index.qxd 2/28/08 5:32 PM Page 339 INDEX Brushes panel, setting up project in, 68–76 Build Action property, changing video’s, 124 Button controls, 62 applying BlueButtonControl Style to multiple, 155–156 applying Style to new, 155 coding PreviewMouseDown event for, 179 creating in C#, 96–97 creating XAML, 96 Make a Button feature for, 126–129 naming, 145, 177 styling Rectangles and turning into, 250–255 Button ControlTemplate creating, 142–147 examining XAML for, 145–147 giving gradient to, 143–144 using on multiple button controls, 155–158 Button Style adding to ResourceDictionary, 152–153 editing to display new image, 154 replacing text with image via, 153–155 ButtonEnter animations, 41 ButtonLeave animations, 41 Buttons adding play to MediaElement, 126–129 adding stop to myVideo MediaElement, 119 adding text to, 39–41 changing Content property, 157–158 changing text color, 157 creating pause Button, 132–134 creating stop Button, 130–131 creating to run Storyboard animations, 38–41 wiring up the home Button, 158–160 C C# (C Sharp) control vs XAML control, 97 NET Framework and, 91–95 portability of applications created in, 95 reasons to use, 92–95 XAML and, 91–97 Camera, selecting inside Viewport3D, 222 Camera Orbit tool, 220 making Viewport3D bigger with, 225 on Blend toolbar, 57 Canvas layout element, 105–106, 114 Case Study A, 3DImageProject, 267–290 Case Study B, 3DTieFighterProject, 293–307 Case Study C, SilverlightPagingSystemProject, 309–322 Case Study D, SilverlightVideoPlayerProject, 325–331 circle icon, next to eyeball icon, 66 classes, in OOP, 93–94 Click event, review of, 170–186 ClipToBounds property in Viewport3D Properties panel, 211 unchecking, 220 Clock mode, NaturalDuration in, 119 code-behind page, in Window1.xaml file, 67 color handles, adding, 70 color resources creating, 70–71 editing alpha of, 72–73 Columns, creating visually in Blend 2, 101 ComboBox, 189 changing size of, 203–204 drawing in workspace, 197–198 naming, 202 wiring to display images, 198–201 ComboBox control drawing in the Workspace, 277 populated with image data, 279 Common Properties bucket, setting Text property in, 253 Common Properties section, of Properties panel, 79 community sites, web site addresses, 335 constructor, creating for Images class, 272 content Canvas container, creating, 316–319 content pages, creating, 316–319 Content property, changing Button text with, 40 ContentCanvas creating, 316–319 creating functionality in VS, 319–322 creating sections as XAML files, 316–317 instantiating sections for, 319 339 9764Index.qxd 2/28/08 5:32 PM Page 340 INDEX ContentPresenter, 128 tutorial web site address, 334 controls, overriding default Styles for, 149–152 ControlTemplate, 142–147 ControlTemplate.Triggers, changing, 150–152 ControlTemplateProject creating, 142–147 opening in Blend and VS 2008, 143 web site address for, 164 Copy to Output Directory property, changing a video’s, 124 count variable, creating for ImageFactory class, 192 Create Brush Resource dialog box, 71 Create Storyboard dialog box, 223 creating new Storyboard in, 224–226 Create Storyboard Resource dialog box, 85 creating SpinBox in, 287 Create Torus button, on ZAM 3D toolbar, 215 Cursor field, in Properties panel, 79 Cursor property in Properties panel, 79 putting in XAML for RedButtonUC, 262 custom UserControls, making functional, 261–264 See also UserControls D Data Factory See also ImageFactory class ObservableCollections and, 189–205 DataSource changing color of gradient, 276 changing Grid background to a gradient, 275 creating that uses ImageFactory class, 198 creating using ImageFactory class, 275–276 making use of, 277–280 styling 3DImageProject and creating, 275–276 DataTemplate, 189 creating, 198 Daytime lighting scheme, adding to 3DTieFighterProject, 294–295 debugging information, recorded when error is thrown, 92 Define in area, in Create Brush Resource dialog box, 71 340 DependencyProperties, 247–265 animating, 248 creating a region for each, 256 demystified, 247–249 Microsoft official definition of, 247 placing all in C# regions, 255 registering custom, 255–258 setting in XAML, 248 DependencyProperties project adding icon image to, 258–260 creating, 249 custom with custom UserControl, 249–264 design pattern, 190 Design view Blend 2, 82 closing, 28 Design Workspace, 83 development resources, IdentityMine, 335 DiffuseMaterial.Brush node, binding to SelectedItem of ComboBox, 283 Direct Selection tool, on Blend toolbar, 55 DockPanel tool, 108–109, 114 downloading and installing Blend 2, 9–13 MS Silverlight Tools Alpha Refresh for VS 2008 Beta 2, 8–9 Visual Studio 2008 Express, 3–8 DragEnter event, 170–171 draggedImgStr variable, setting MediaElement source to path of, 175–176 DragLeave event, 172 DragOver event, 172–173 Drop event, 173–176 listening for in Independent mode, 118 _DTieFighterProject, coding TextGrid text in, 303–307 dtImages Data Template creating, 199–200 E Easing panel, adding easing to 3D box, 289 Electric Rain’s ZAM 3D creating torus object, 215–217 web site address, 86, 212 working with, 212–220 9764Index.qxd 2/28/08 5:32 PM Page 341 INDEX Ellipse, with drop shadow bitmap effect, 77 Ellipse tool, 61 Ellipses adding radial gradient fill to, 298 moving _3DPlane above, 306 pasting into Workspace, 298 repositioning next to respective model parts, 300–301 email address, for sending samples to author, 226 encapsulation, in OOP, 92–93 error handling, 92 adding to myVideo stop Button, 119 adding to stop Button, 131 EventAndEventHandlers project adding Button control to, 176–177 creating in Blend 2, 168–170 creating in VS 2008, 167–186 EventHandler, creating for home Button, 159–160 events and EventHandlers, 167–186 EventTriggers, creating for spinBtn, 41–51 exception (error) handling, 92 See also error handling ExpressionBlend.com, web site address, 335 eyeball icons, for objects in Visual Tree, 65–66 Eyedropper tool Blend toolbar icon, 58 changing color value with, 69 F Far Clipping Plane, changing properties for, 222–223 flyby animation, creating, 223–226 FlyBy Storyboard changing name of, 231 creating, 224–226 naming, 224 running the application, 226 Foreground option, in Brushes bucket, 76 Foreground property, setting for TextBlock, 35–36 Frame control, 64 G garbage collection, automatic in OOP, 95 geometryModel3D, displaying, 287 gimbal control, 210 Ginkakuji temple OBJ file, web site address, 227 Gradient brush styling Background with, 32–33 using, 69–70 gradient colors adding to Window1, 197 changing, 70 making invisible, 251 Grid, grouping all Rectangles into, 253 and tags, 30 Grid layout element, 100–104, 114 adding controls into, 103–104 content positioning using margins, 104 Grid Layout mode, main Grid in, 102 Grid tool, displaying layout controls with, 62 Grid.Column, changing values for, 104 Grid.Row, changing values for, 104 H Height and Width properties changing application size with, 31–32 changing for TestPage.html, 311–312 for Grid Columns and Rows, 102 Hello World application adding code to, 30 creating, 27–28 home Button creating EventHandler for, 159–160 naming, 158 wiring up, 158–160 I icon.png, coding path into RedButtonUC, 260 icon2.png, importing into MyRedButtonUC2 project, 264 IdentityMine, web site address, 335 if/then conditional, using for pause Button, 134 341 9764Index.qxd 2/28/08 5:32 PM Page 342 INDEX Image control adding, 199 adding to Grid and naming, 254 adding to home Button Workspace, 158–160 changing to Image3D control, 282 drawing in the Grid, 255 naming in, 255 ScrollViewer in Blend Design view, 110 selecting from Asset Library, 254 ImageBrush, binding to ComboBox, 202–203 ImageBrush node, creating in StackPanel.Background node, 202–203 ImageData class adding NotifyPropertyChanged method to, 274 adding PropertyChangedEventHandler to, 274 adding under Images class, 195 creating constructor for, 273 creating ImageName variable, 273 creating under Images class, 272 creating _sImageName private string for, 272 passing _sImageName to constructor, 273 ImageDT DataTemplate, creating, 278 ImageFactory class, 190 creating, 191, 270–275 creating DataSource with, 275–276 creating variables for, 192–193 ImageName string, creating getters and setters that will set, 274 images adding to Images directory, 270 creating viewing choices for, 280–284 importing into 3DImageProject, 268–270 importing into projects, 153–154 naming, 270 using selected, 201–204 Images class adding under ImageFactory class, 192–194 creating constructor for, 272 creating in ImageFactory class, 271 Images constructor, creating, 193–194 Images directory, adding images to, 270 Images folder creating, 191 directory structure, 269 Independent mode, 118 342 inheritance, in OOP, 94 InitializeComponent method, 129 InkCanvas control, using, 63–64 INotifyPropertyChanged, 195 resolving, 272 input controls, 62 instance name, giving to Button, 39–41 integrated development environment (IDE) See Blend IntelliSense, autocomplete function, 30 Interaction panel, Objects and Timeline panel, 65–81 Interactive3D namespace, using 3D Tools library with, 240–241 InteractiveVisual3D control, 241–242 IRhetoric blog, web site address, 334 is raised drop-down menu, selecting, 44 IsHitTestVisible option, 79 _isPlaying variable, creating, 329 IsSelected Setter, 151–152 IsSelected Trigger, changing, 150–152 ItemsSource property, adding to project, 278 JK keyboard shortcuts, for tools, 55 L Language Integrated Query (LINQ), new to NET 3.0, 95 LaserCannon creating Storyboard for, 301–302 moving Ellipse in Workspace, 301 Layout bucket, of Properties panel, 78 layout controls, 61–62 layout elements, 99–114 LayoutControlsProject, 100–101 LayoutRoot control, 61 LayoutRoot Grid changing XAML code in, 218–219 placing 3D object in, 219 LeftWing Ellipse changing event for, 301 moving to corner of Workspace, 300 Visual Tree, 65 9764Index.qxd 2/28/08 5:32 PM Page 343 INDEX Lighting Schemes, adding to 3DTieFighterProject, 294–295 Line tool, 61 ListBox creating and adding new Style to, 149 overriding default behavior, 149–152 overriding default behavior in XAML, 150–152 ListBoxItems, setting new Style for, 152 LoadedBehavior effect of setting to Manual, 119 for playback modes, 118 setting to Manual, 237 lock icons, locking row height or column width with, 103 Lynda tutorial, web site address, 334 M maintainability, in OOP, 94 mainWindow, putting Drop event in, 174–175 mainWindow control, coding for MouseDown event, 179 mainWindow_Drop method adding functionality to, 175–176 creating MessageBox for, 175 Make a Button feature Blend 2's, 126–129 creating myButton control with, 144–147 Make Control dialog box, naming UserControl in, 255 MediaElement (ME MediaElement), 117–138 adding code for playing, 129 adding to MyMediaElementProject, 122–123 adding to SilverlightVideoPlayerProject, 326–327 controls, 24 creating, 174 creating resource for source of, 71 creating with stop and play controls, 234–236 creating your first project, 120–125 drawing and naming Button controls, 235 drawing in workspace, 234 playback modes, 117–120 setting source of to path of draggedImgStr, 175–176 setting to Manual, 237 setting to play, 120 video player, 137 MediaTimeline, in Clock mode, 119 memory management, in NET CLR, 92 Microsoft Download Center page downloading Blend trial from, 9–13 finding VS 2008 from, Microsoft Windows SDK for Windows Vista and NET Framework 3.0 Runtime Components, web site address, 170 Miscellaneous section, in Properties panel, 80 modularity, in OOP, 94 mouse events, 176–178 MouseDoubleClick event, 178 MouseDown event , 178–179 MouseEnter and MouseLeave events, 180–181 MouseEnter state, 181 MouseLeave state, 181 MouseLeftButtonDown event, 181–182 adding to applications, 182 listening for for each RedButtonUC, 262–263 MouseLeftButtonUp event, adding to applications, 182–183 MouseRightButtonDown and MouseRightButtonUp events, 183–184 MouseRightButtonDown event, adding to applications, 184 MouseRightButtonUp event, adding to applications, 183 MouseWheel event, 185–186 MS Silverlight Tools Alpha Refresh for VS 2008 Beta 2, downloading, 8–9 MSDN Silverlight Community, The, web site address, 335 MSDN Visual Studio Setup and Installation, web site address, 335 MSDN Windows Presentation Foundation, web site address, 333 MSDN Windows Presentation Foundation (Avalon) FAQ, web site address, 334 MSDN WPF Forums, The, web site address, 335 MyButton responding to DragLeave event, 172 responding to DragOver event, 173 343 9764Index.qxd 2/28/08 5:32 PM Page 344 INDEX myButton control adding code in XAML view, 178 adding MouseDoubleClick event to, 178 Blend design breakdown, 147 creating, 144–147 naming, 145 myCB ComboBox, naming, 202 MyIconDP DependencyProperty, 258 MyImage's Source DependencyProperty, setting to value of MyIconDP, 260 MyListBoxStyle, editing, 148–149 MyMediaElement, creating in VS 2008, 123 MyMediaElementProject adding video to, 123–124 creating in VS 2008, 120–125 MyMediaElementProject.sln adding MediaElement to, 122–123 changing Height and Width in Blend, 121 giving gradient background to, 122 opening, 120 MyRedButton, checking visibility of, 263–264 MyTextDP property adding into XAML, 256 changing in RedButtonUC, 260 registering, 256 setting Text property of TextBlock to value of, 257 N Name (Key) field, in Create Brush Resource dialog box, 71 Name property, changing for Button, 40–41 NaturalDuration, in Clock mode, 119 navigation buttons creating, 313–316 creating events for, 319–322 Near Clipping Plane, changing properties for, 222–223 NET common language runtime (CLR), of NET Framework, 92 NET Framework C# and, 91–95 NET CLR of, 92 344 New Project dialog box, 16 creating Hello World application in, 27–28 New Storyboard button, adding new Storyboard with, 286 No Brush in Brushes bucket, 76 setting for Background property, 220 NotifyPropertyChanged method, adding to ImageData class, 274 O OBJ files, importing and working with, 227–233 OBJ model, adding Animate Temple button to, 229 object-oriented programming (OOP) language C# as, 91 resource reusability in WPF, 141–142 objects, characteristics of in OOP, 92–95 Objects and Timeline panel changes in Blend 2, 41 eyeball icons in Visual Tree, 65–66 Interaction panel, 65–81 locking items in, 130 Record Keyframe button in, 47 selecting elements in, 31 styling Background in, 32–34 OBJImport application, creating, 227–228 ObservableCollection project adding images into, 194–195 creating, 190 importing images into, 191 opening in Blend 2, 197–201 source application web site address, 204 ObservableCollections, 271 closing off namespace, 195–197 creating with Abstract factory pattern, 191–197 Data Factory and, 189–205 opening in Blend 2, 197–201 OpacityMask property, editing alpha of project with, 73 P padlock icon, in Objects and Timeline panel, 66 Page.xaml, changing properties for, 311 9764Index.qxd 2/28/08 5:32 PM Page 345 INDEX Paint Bucket tool, on Blend toolbar, 58 Pan tool, on Blend toolbar, 57 Paragraph tab, in Common Properties bucket, 253 partial classes, new feature in NET 2.0, 95 Path, setting play symbol's, 128 Path tool, creating play button triangle with, 328 pause Button, creating, 132–134 Pen tool, for creating play Button, 127 Pen/Pencil tools, on Blend toolbar, 56 play and stop buttons, wiring up in VS 2008, 237–238 play Button, adding to MediaElement, 126–129 playback modes MediaElement, 117–120 switching between, 119–120 Preview events, 179–180 PreviewMouseDown and PreviewMouseUp events, 179–180 private variable, creating for pause Button, 133–134 Project panel, 66 adding existing item through, 208–210 assets that make up project, 66–67 projects, importing images into, 153–154 Properties panel, 67–80 changing Content property in, 40 changing Width and Height values in, 32 in VS 2008, 125 setting up project in, 68–76 PropertiesPanel project changing solid fill to gradient in, 69–70 creating, 68–69 PropertyChangedEventHandler, adding to ImageData class, 274 QR RadioButton controls decreasing Rectangle width for, 280 making visible, 285 placing in Rectangle, 281 wiring up for Image3D, 284–286 radius handles, giving Rectangle rounded edges with, 143 Recent Projects section, in VS 2008, 121 Record Keyframe button, in Objects and Timeline panel, 47 Rectangle adding Grid to, 281 building solid with rounded edges, 313 changing Visibility value in, 282 creating a reflection for, 73–76 decreasing width of, 280 filling with gradient, 314 modifying Fill property, 279–280 naming and setting Visibility property, 284 Rectangle control, drawing in Workspace, 143, 277 Rectangle tool, 60 creating pause Button with, 132 creating play Button in Workspace with, 127 creating stop button icon with, 329 creating stop Button with, 130 Rectangles grouping into a Grid, 253 pasting into Workspace, 252 rotating in Workspace, 252 styling and making into Button control, 250–255 RedButtonUC changing Height and Width of, 261 changing properties in XAML, 261–262 copying XAML for into Window1.XAML, 261 renaming in Properties panel, 255 verifying it is registered and set, 257 RedButtonUC.xaml.cs adding this.Loaded method in constructor, 257 opening in Solution Explorer, 255 References directory, in Project panel, 66 ResourceDictionaries adding Button Style to, 152–153 creating, 71–72 creating for ControlTemplate project, 147–148 Resources folder, creating, 269 Resources panel, applying resources in, 81 Resources/Images folder, changing Image control in, 282 Rotate tab, in Transform bucket, 232 Rows, creating visually in Blend 2, 102 Rows and Columns, exercise to understand, 103 runtime error, 119 345 9764Index.qxd 2/28/08 5:32 PM Page 346 INDEX S ScrollViewer control, setting for scrollbars, 110 ScrollViewer layout element, 110–111, 114 scrubber, 118 Search section, in Properties panel, 80 SelectedItem binding ImageSource property to, 203 setting background of StackPanel to, 189 Selection tool Blend toolbar, 55 changing Rectangle size with, 252 giving Rectangle rounded edges with, 250–251 rotating Rectangle with, 252 styling TextBlock with, 34–35 Setter code, for HighlightTextBrushKey, 151 shape tools, on Blend toolbar, 60–61 Show Material button, clicking and selecting Glossy tab, 214–215 Show snap grid button, 128 ShowLeftWing Storyboard, creating, 299–300 Silverlight See WPF/Silverlight Silverlight 1.1 vs WPF for applications, 309–310 Silverlight 1.1 Alpha Refresh developer plug-in, web site address, 309 Silverlight 1.1 MediaElement project, creating, 325–331 Silverlight button controls adding text to, 315 building, 313–315 copying to have buttons, 315 grouping into a Canvas, 316 wrapping into a layout control, 315 Silverlight Forums, The, web site address, 335 Silverlight homepage, web site address, 334 Silverlight project, creating, 310–322, 325–331 Silverlight resources and WPF, 333, 335 SilverlightPagingSystemProject Case Study C, 309–322 creating in VS 2008, 310–322 web site address for source application, 322 SilverlightVideoPlayerProject adding buttons to, 327–329 adding gradient to buttons, 327 adding MediaElement to, 326–327 Case Study D, 325–331 346 coding play, pause, and stop buttons, 330 creating, 325–331 _simageName private string, creating, 272 Sneath, Tim, blog web site address, 334 Solution Explorer, 29–30 SpeedRatio, value in Independent mode, 118 spin Storyboard, creating, 41–51 spinBtn, creating EventTriggers for, 41–51 Split view, in Blend 2, 83 StackPanel creating, 84–86, 199 layout element, 107, 114 naming, 84 wiring up functionality in XAML, 201 tag, closing off StackPanel control with, 202 StackPanel.Background node, creating, 202 stop Button, creating, 130–131 Storyboard closing, 50, 289 renaming, 46–47 Storyboard animations creating button to run, 38–41 creating for 3DTieFighterProject, 299–302 creating spin, 41–51 creating visual, 23 Storyboard resource, creating new, 85 String ImageName, creating public, 273 Stroke property, setting to No Brush, 252 Styles, 147–149 overriding default for controls, 149–152 setting control properties with, 147–149 using in WPF/Silverlight, 24–25 System Brush Resources list, HighlightTextBrushKey in, 151 System.Collections.ObjectModel class, importing into Images class, 271 System.Windows.Media.Imaging namespace, adding to DependencyProperties project, 260 T TabControl, 64 images used to populate in Project panel, 66 in Visual Tree, 65 9764Index.qxd 2/28/08 5:32 PM Page 347 INDEX TabItems, in Visual Tree, 65 TempleAnimation, renaming FlyBy Storyboard to, 231 TestPage.html adding body style to, 312 changing Height and Width of, 311–312 text, changing color of for Buttons, 157 Text bucket, in Properties panel, 79 Text primitive tool, activating in ZAM 3D toolbar, 213 UIElement changing color to gradient, 37 choosing a color for, 36 increasing text font size, 37–38 setting properties for, 35–36 styling, 34–38 TextBlocks adding control into a Grid, 253 adding to display path of Image, 199 adding to Hello World application, 30 in different Grid Rows and Columns, 104 giving unique name to, 254 hard-coding to be in Row and Column 0, 103 setting Angle property of, 48–50 setting Foreground property of, 253 setting Text property of, 257 specifying alignment for, 253 TextBox tool, 62 This document, making resource available to current document, 71 Tie Fighter model, importing from ZAM 3D, 294–295 TieText changing from TextBlock when application starts, 306 setting Text property of, 305 TimeSpan, setting for stop Button, 131 toggle button, creating, 158–159 toggleVideo Button, creating event handler for, 136 torus object, adding material to, 216 TowerAnimation Storyboard changes recorded into, 231 closing, 233 specifying start position for, 231–233 traffic analysis tools, using Preview events for, 179–180 Transform bucket, Rotate tab in, 232 Transform section, in Properties panel, 79–80 Triggers adding action to when it is raised, 230 changing for Animate Temple button, 230 creating for spinBtn, 41–51 Triggers and Storyboards, creating, 43–50 Triggers panel collapsing and expanding, 42–43 creating new event in, 43 tutorials, web site addresses, 334 U UIElements (user interface elements), 24 Uniform Resource Identifier (URI), setting MediaElement's, 118 UniformGrid layout element, 114 Ellipses spread out evenly in, 112 URI See Uniform Resource Identifier (URI) UserControls creating custom, 160–164 making custom functional, 261–264 putting custom on 3D plane mesh, 234 with custom DependencyProperties project, 249–264 V video adding to MyMediaElementProject, 123–124 changing Build Action setting, 124 changing Copy to Output Directory property, 124 creating button functionality for player, 329–331 creating player, 325–331 making 3D, 238–243 video toggle Button creating, 134 styling, 135–136 wiring up, 136 ViewBox tool, 112–114 viewing choices, creating for images, 280–284 347 9764Index.qxd 2/28/08 5:32 PM Page 348 INDEX Viewport3D changing Near and Far Clipping Plane properties, 222–223 changing playhead Y property and rotation, 233 creating 3D box, 283–284 creating 3D objects in the XAML, 207 gimbal control, 210 making and adding camera to, 240 making very small, 223 moving playhead out seconds, 232 naming Image3D, 284 playing with in Blend 2, 220–244 recording default axis of, 232 rotating with Camera Orbit tool, 221 unchecking ClipToBounds, 282 using gimbal tool to skew, 282 working with in Blend 2, 220–223 wrapping 3D Tools controls inside of, 242–243 zooming in and out, 221–222 Viewport3D control, turning Image control into, 210 Visibility drop-down menu option, changing, 282 Visibility property changing for Viewport3D, 225 setting as hidden for one RedButtonUC, 262 Visual Brush onto 3D Primitive radio button, for spinning 3D box, 289 Visual Studio 2008 coding TextGrid text in, 303–307 creating EventAndEventHandlers project in, 167–186 creating new WPF application in, 295–307 New Project dialog box in, 27 sample XAML code in, 25 Visual Studio 2008 Beta Professional Edition burning installation DVD for, downloading and installing, 8–9 running installation DVD, 4–8 starting and opening new project in, 14–15 vs Blend for creating WPF projects, 14 Visual Studio 2008 Express, downloading and installing, 3–8 Visual Studio Designer, turning off, 17 Visual Tree, in Workspace, 65–66 348 W Wavefront Technologies, OBJ files developed by, 227 web site addresses 3D Tools library, 233 3DImage application, 88 3DImageProject source application, 290 Beatriz Costa blog, 334 Blendables-Tools and Components for Designers and Developers, 335 book updates, 333 ContentPresenter tutorial, 334 ControlTemplateProject application, 164 DependencyProperties project application, 265 downloading OBJImport files, 233 downloading Silverlight, Electric Rain’s ZAM 3D, 86, 212 EventAndEventHandlers project, 186 ExpressionBlend.com, 335 Ginkakuji temple OBJ file, 227 Hello Word files, 51 IdentityMine, 335 Lynda tutorial, 334 MediaElement application without video assets, 137 Microsoft downloads, MSDN WPF Forums, 335 MSDN Silverlight Community, The, 335 MSDN Visual Studio Setup and Installation, 335 MSDN Windows Presentation Foundation (Avalon) FAQ, 334 MSDN Windows Presentation Foundation, 333 ObservableCollection project source, 204 Silverlight 1.1 Alpha Refresh developer plug-in, 309 Silverlight Forums, 335 Silverlight homepage, 333–334 SilverlightPagingSystemProject source application, 322 SilverlightVideoPlayerProject source application, 331 SilverlightVideoPlayerProject, 331 Sneath, Tim blog, 334 tutorials, 334 9764Index.qxd 2/28/08 5:32 PM Page 349 INDEX WPF FAQ Index, 334 ZAMDWPF example application, 226 web site paging system See SilverlightPagingSystemProject WelcomeScreen.xaml, creating new section as, 322 When drop-down menu, selecting, 44 Width and Height properties, changing, 31–32 [Window] changing Height and Width of, 143 selecting in Objects and Timeline panel, 143 [Window] UIElement, 31 .Loaded event, creating, 44 node, adding code to, 239–240 Window1.xaml file adding MyTextDP property into, 256 creating MediaElement inside the Grid, 123 in Project panel, 67 renaming to mainWindow, 174 Window1.xaml.cs adding DragEnter EventHandler into, 171 listening for Click for RadioButtons, 284 listening for Drop event in, 174–175 setting MediaElement to play in, 125 Windows Presentation Foundation (WPF) See WPF (Windows Presentation Foundation) workflow, between developers, designers, and engineers, 24–25 Workspaces, 83 and Blend development views, 81–86 drawing Button control in, 39 WPF (Windows Presentation Foundation) 3D and, 207–244 building Hello World application, 27–28 DependencyProperties as part of, 249 setting up development environment, 1–21 Silverlight resources and, 333, 335 vs Silverlight 1.1 for applications, 309–310 WPF Application project, creating in Visual Studio 2008, 100 WPF button, creating, 38–41 WPF Button control, building Silverlight control that acts like, 313–315 WPF FAQ Index, web site address, 334 WPF layout elements See layout elements WPF project, creating your first, 14–20 WPF solution, created by Visual Studio, 17 WPF/Blend workflow, and your first WPF application, 23–51 WPF/Silverlight a new way of working, 23–25 requirements for, WPFTestApplication.Window1, compiling and giving basic content, 18 WrapPanel layout element, 107–108, 114 X X button, closing Storyboard with, 50 XAML (Extensible Application Markup Language), 96–97 browser applications (XBAPs), 309 cleaning for 3DTieFighterProject, 296–297 for myButton control, 145–146 overriding default ListBox behavior in, 150–152 reformatting for readability, 147 XAML control creating vs C# control, 97 example of typical, 96 XAML page, opening in XML view, 18 XAML view, in Blend 2, 82–83 XML documentation, embedding into source files, 95 XML Editor, setting as default, 17 YZ Z angle, setting, 287–288 ZAM 3D See also Electric Rain’s ZAM 3D importing a model from, 294–295 web site address, 86 ZAM 3D text primitive changing name of, 213 giving style to, 214–215 ZAM3DWPF project creating in Blend 2, 218–220 resolving housekeeping issues, 220 XAML portion in Split view, 218 Zoom tool, on Blend toolbar, 57 349 9764Index.qxd 1-59059-543-2 2/28/08 $39.99 [US] 5:32 PM Page 350 1-59059-518-1 $39.99 [US] 1-59059-542-4 $36.99 [US] 1-59059-558-0 $49.99 [US] EXPERIENCE THE DESIGNER TO DESIGNER™ DIFFERENCE 1-59059-517-3 $39.99 [US] 1-59059-651-X $44.99 [US] 1-59059-314-6 $59.99 [US] 1-59059-315-4 $59.99 [US] 1-59059-619-6 $44.99 [US] 1-59059-304-9 $49.99 [US] 1-59059-355-3 $24.99 [US] 1-59059-409-6 $39.99 [US] 1-59059-748-6 $49.99 [US] 1-59059-593-9 $49.99 [US] 1-59059-555-6 $44.99 [US] 1-59059-533-5 $34.99 [US] 1-59059-638-2 $49.99 [US] 1-59059-765-6 $34.99 [US] 1-59059-581-5 $39.99 [US] 1-59059-614-5 $34.99 [US] 1-59059-594-7 $39.99 [US] 1-59059-381-2 $34.99 [US] 1-59059-554-8 $24.99 [US] ... 9764FM.qxd 2/ 28/08 5:34 PM Page i Foundation Expression Blend Building Applications in WPF and Silverlight Victor Gaudioso 9764FM.qxd 2/ 28/08 5:34 PM Page ii Foundation Expression Blend 2: Building Applications. .. specializing in designing and developing cutting-edge software applications in WPF and Silverlight, creating customized WPF /Blend and Silverlight training programs, and creating tools for designers and. .. any single one of you xix 9764FM.qxd 2/ 28/08 5:34 PM Page xx 9764FM.qxd 2/ 28/08 5:34 PM Page xxi INTRODUCTION Welcome to Foundation Expression Blend 2: Building Applications in WPF and Silverlight!