This weekend I decided to watch a training video series on Expression Blend called Expression Blend for Developers. I’ve been doing a lot of work with WPF in Visual Studio lately and I was really curious to see what Expression Blend might have to offer that VS didn’t already do well. I’ll admit that I didn’t have high expectations for Blend, I assumed it was going to be a lot like Flash Catalyst which I’ve found is still a little half-baked. I generally find myself working with the code view anyway and wasn’t sure how much garbage a “designer’s tool” like Blend would produce. After watching this training series I found that all of my preconceptions were entirely wrong. Not only is Blend really powerful, but incredibly well thought out. There were so many times where I said “wow, I can’t believe they actually built that in”. Here’s just a few of the most interesting topics:
Working with Control Templates
One of the biggest roadblocks I’ve run into is “how do I customize the default look and feel of a control?”. This might seem like an easy task, but once you try to do something like apply a theme to your application, changing or extending the look of controls becomes problematic. Say you’ve chosen to force the use of the Aero theme in your application, when you go to define a style based on the default Aero style you start running into weird situations like not being able to define the style in app.xml or issues with circular references. I’ve found that the simplest approach to extending the look of themed controls is to just edit a copy of the control template. Visual Studio really has no facility for pulling up a controls template. In Blend you can create a copy of the default template and customize to your hearts content.
Managing Resources
Another big question I had before watching the training videos was “how can I define styles, brushes, and colors that I want to re-use throughout my application?”. The training videos show both the simple approach of putting those things within app.xml, but they also show you how to break them out into separate resource files. Through the Resources panel in Blend you can see the resources available to your application as well as resources defined within the window you’re currently working with. Most properties are also easily converted to resources using the Convert to New Resource option.
Using Sample Data
This feature was probably the coolest of any that I saw during the videos. You can define a new sample data collection or even import sample XML data. From there you can easily define your properties including their data type and format. For example, you can make a collection called customers, then define properties like name and phone number. You can then tell Blend that “name” contains company names and “phone number” contains phone numbers and Blend will automagically create a bunch of names and phone numbers for you. It even works with things like dates, URLs, and a bunch more. You can even just choose to fill in “lorum ipsum” values. Of course you can drag those properties onto controls to bind them and it just works. This functionality is a huge time saver.
Animation
The animation facilities within Blend seem really good. The videos show you how to do some basic things like animate the different states of a button, but you can tell that you can really do a lot with the animation editor. Later on when you learn about triggers the video also mentions how you can animate things as a result of an event. I was also impressed with how you can use all the different easing algorithms and even define your own custom easing using this cool little visual editor.
Using SketchFlow
Before watching the videos I really wasn’t too sure what SketchFlow was for. The coolness factor on SketchFlow is right up there with the sample data stuff. SketchFLow allows you to create a working prototype of your application. The controls are styled to look like rough sketches which help your project stakeholders focus on the functionality and workflow of the application instead of the aesthetics. Flex had a similar idea where you could swap out the default theme with a prototyping theme. What I didn’t see was an example of how you can take your SketchFlow project and convert it to a real WPF or Silverlight project, so I’ll have to do some googling on that topic. One of the coolest features was being able to publish your SketchFlow project to a SharePoint site or your web server so that people can view the designs, export their comments, and send them to you. You can even export your SketchFlow project to Word which takes screenshots of all the pages and outlines the entire project.
Beyond those topics, I also gleaned a few other interesting tidbits about Blend:
- Unlike Visual Studio, within Blend you can change the visibility of different elements which is especially useful if you’re using z-index with overlays or to mask off portions of your UI. Within VS, elements that have their visibility set to hidden or collapsed still show up on the design surface which is really annoying at times. In Blend you can simple toggle the visibility off.
- Not only can you embed fonts, but you can choose an option called “auto fill” which only embeds the characters used within any static text you’ve defined throughout your application.
- The Windows Phone section was really interesting. Having played around with Android development within Eclipse, I can confidently say that the design experience within Blend is much better. If Windows Phone picks up some more market share I’d definitely love to design some apps in Blend.
This video tutorial series was one of the best I’ve watched. At just over 3 + 1/2 hours it was enough to get through in a weekend within having a mind meltdown. The series covered exactly what I wanted it to and I feel like I have an understanding of all the pieces of Blend that I would actually use. If I had to nitpick (which I obviously do), I wish Shawn didn’t say “make sense?” all the time. Other than that the videos were top notch and I’d highly recommend them to other developers interested in learning Expression Blend.