Developing For .NET

Today, Microsoft released Expression 4, a suite of products for designing and building graphics, web sites, video, and WPF/Silverlight applications.  If you’ve ever seen me speak at a Code Camp or User Group, then odds are you’ve heard me talk about Expression.  Most of my use has centered around Blend, but I have done some work with Design and more recently with Encoder.

I’ve been working with Expression since Version 1, and I’ve truly enjoyed it: Expression made me better at what I do: create applications.  I’ve also had my share of complaints, but most of those center around Microsoft’s handling of the Expression Studio in general.  I’m both happy and a little annoyed this time around, so I thought I’d share some of my feelings, complaints, and suggestions.

The Good

First, the good news is in the pricing.  Last time I was a little miffed at the upgrade cost.  I’d like to point out that I was never upset at having to pay for the tool, but the things that really got under my skin were removing Expression Studio from MAPS and then forcing me to upgrade the entire Studio.  With Expression Studio 3 they removed the option to buy the tools individually.

While you could buy a package that included everything BUT Blend, apparently someone at Microsoft thinks I can’t make use of Blend without Web, Design, and Encoder.  So the most valuable tool in the Studio, by far, is the one with the most limited (and least acceptable) purchasing options.  So I was forced to purchase an upgrade of the entire Studio when all I wanted was Blend 3.

So that was my rant last time, and unfortunately some of it is still true: you just can’t get Blend without buying the entire Studio.  The good news, if you already own Studio 3, is that the upgrade is FREE.

If you go to the Upgrade page you’ll see this helpful text:

How To Upgrade

If you purchased Expression 3 from a store, download the trial of Expression Studio 4 Ultimate or Expression Studio 4 Web Professional. Provided you have Expression 3 installed on that computer, the full version will automatically be enabled. Owners of Expression Web 3 can upgrade for free to Expression Studio 4 Web Professional and owners of Expression Studio 3 can upgrade to Expression Studio 4 Ultimate.

Great!  This means I can upgrade for Free.  You cannot purchase any of the packages yet, all the buttons say “Buy Coming Soon”.  They also list the “Estimated Upgrade Price”.  They really shouldn’t call this an upgrade, instead it should be some kind of a discount, because it is not limited to previous ownership of Studio.  Both the main packages allow purchase at the upgrade price to “Any Adobe Creative Suite product”.  That is a great idea! 

Upgrade pricing is also available for Expression 1 and 2 users: the site states “Any Microsoft^® Expression product”.

The Changes

The new breakdown of Expression products has been renamed to align with the rest of the Microsoft Universe.

Expression Studio Ultimate – the everything version:

• Blend
• SketchFlow
• Web with SuperPreview
• Encoder
• Design

You are also eligible for Upgrade Pricing to Ultimate if you have Visual Studio 2005 or later.  I’m glad they are finally making some step towards developers, but it’s not enough (more on that later.)

Expression Studio 4 Web Professional – for web developers, as long as you don’t include Silverlight in “The Web”:

• Web with SuperPreview
• Encoder
• Design

You are also eligible for Upgrade Pricing to Web Professional if you have Any Microsoft Office product.

Expression Encoder 4 Pro – OK, so I correct myself: you can buy one product by itself, which is great if all you need to do is encode video.   In fact, it’s such a great idea, they should make it available for the rest of the products in the Studio!  Oh, and is Expression Encoder 4 Pro any different than the version included in the previous two versions of Studio?  If not, why isn’t it listed as “Pro” in the previous packages?

And check out the “Which Product is Right For Me?” option on the page.  It’s a Silverlight Application – I’ll bet the designer of this Web site had access to Blend!

The Confusing

There is one particularly confusing thing on the web site at the moment:

The Ultimate Development Resource, including tools for designers

A MSDN Subscription offers you access to virtually all of the Microsoft products you need to design, develop and test your next app. Expression Studio 4 is now available through a MSDN subscription. Expression Studio 4 Ultimate is included in the Ultimate level subscription and the Premium level comes with Expression Studio 4 Premium.

Check out that last statement: “the Premium level comes with Expression Studio 4 Premium.”  What the heck is Expression Studio Premium?  If it’s not more than a typo, then I’d like some clarification please.

My Rant

What gives with requiring MSDN Premium?  Why not include it with Professional?  Why are we still holding developers back from getting their hands on Blend?  I’ll tell you why: Microsoft hasn’t figured out that the long term market for Blend is NOT Designers: it’s Developers.  This incorrect attitude is evident in statements like the one above labeling Expression as “tools for designers”.

I make no bones about my opinion on this matter: I think Blend should be bundled with Visual Studio Professional and higher.  Not the whole Studio, just Blend.  Unwillingness to purchase yet another tool is one of the main obstacles I encounter in my Blend Evangelism.  They think Blend isn’t for them – if it was, Microsoft would give it to them.  If it was for them, it would be built in to Visual Studio, because THAT is for developers.

Instead, we hold it just out of reach for many developers.  There are lots of shops that can’t afford to subscribe to MSDN Premium or Ultimate – mine is one of them.  Fortunately, mine is willing to invest separately in Expression: most aren’t.  And truthfully, the only reason they are willing to pay for it now is because I initially got Studio 1 and 2 as part of MAPS.  This gave me free time to experiment with the tool and prove it’s usefulness.  If we were just starting today it may have been a different story.

For now, the good news is we’ve gotten those developers a little closer: they can buy the Studio at the Upgrade Price.  It’s a good start, but I think if we really want adoption to increase, we need some other options.  If we can’t have Blend as a companion to Visual Studio, then at least have the ability to buy Blend as a stand alone tool, preferably with a stand alone price tag.

4 comments

A question came up last night at RVNUG about manually editing XAML, something I avoid as much as reasonably possible.  When I have to edit XAML though, I almost always jump over to Visual Studio, so I was asked why I prefer to edit XAML in Visual Studio over the Blend editor.  Besides the fact that I’ve always just done it that way because originally we did not have Intellisense in Blend, I have two other reasons.

The first reason is that I use Blend to write XAML and Visual Studio to code XAML.  It sounds like splitting hairs, but let me explain.  Blend is the best darn XAML Editor ever written, primarily because it allows me to write and edit XAML without actually typing the XAML.  It magically translates the design I have on the screen into it’s XAML representation: that’s what makes it so awesome.  When I find a situation where I actually need to code the XAML and make textual changes to it myself, then I use Visual Studio, because it is the best darn Code Editor ever written.  To sum up: Design = Blend, Code = Visual Studio.

The second reason is far less highbrow: I dislike the default XAML formatting that Blend produces.  Don’t get me wrong, the XAML code itself is wonderful, almost pristine, but it compresses it to as few lines as possible.  That means lots of properties on a single line, which becomes an issue when you have a bunch of properties full of Binding references and more complicated structures.  So my preference is to see one property per line in the XAML.  This makes it much more palatable on those rare moments when I must code the XAML manually.

Setting up Visual Studio

I saw the question today on the Expression Blend forums about how to get Blend or Visual Studio to do exactly that, so I thought I would put up a quick post for the archives.

While Blend cannot format the XAML in this fashion, Visual Studio can:

1. In VS2008 or VS2010 go to Tools –> Options
2. Expand Text Editor -> XAML -> Formatting –> Spacing
3. Under "Attribute Spacing" check "Position each attribute on separate line".
4. If you prefer, you can also put the first attribute on the same line as the tag by checking the box.  I use this setting because it isn’t offensive and still saves a little space.

Now, whenever you edit XAML in Visual Studio, press "Ctrl+K+D" and Visual Studio will reformat the XAML as desired. 

Enjoy!

No comments

I think Expression Studio 3 is now available: the website has switched from "pre-order" buttons to "buy" and "upgrade".

Kevin pointed out that MSDN is the way to go, which I agree with if it is an option, but I have Visual Studio Professional with MSDN Professional, which is $1,199: Expression doesn’t become downloadable until you have Visual Studio Professional with MSDN Premium which is $2,499. It’s just not worth it to me to spend an additional $1,300.

Studio Pricing

Expression Studio 3 costs $599 for the full version or $349 for an upgrade.  If you don’t have MSDN or anything like it, they have a good deal going though with "Expression Professional Subscription":

• Expression Blend + SketchFlow
• Expression Web
• Expression Design
• Expression Encoder + IIS Smooth Streaming
• Visual Studio® Standard
• Office Standard
• Office Visio® Professional
• Windows® XP
• Windows Vista® Business Edition

All for only $999. I wonder if they’ll include Windows 7 now that it’s RTM?  And what happened to Expression Media?  It is no longer listed on the site.  No loss for me since I never used it, but I am curious.

Microsoft Action Pack Subscription

Through the Partner program, I was getting Expression Studio 2 via our Microsoft Action Pack (MAPS) subscription (specifically as part of the web solutions toolkit).  With MAPS I have to wait until they ship it to get the software, so I emailed the MAPS team the other day and asked if they knew when it would be available but they said they were not sure when the product would be released.

Today I checked the MAPS information online and they are now only advertising Expression Web, Design, and Encoder.  So it looks like I’ll probably end up buying the upgrade.  I’m a little surprised I can’t just update Blend, but apparently they aren’t selling the pieces individually except for Expression Web.

I’ve said for sometime that Microsoft should be giving Blend away if they really want to promote the adoption of WPF and Silverlight.  I wonder how many developers are sticking with Visual Studio because they don’t have access to Blend?

UPDATE:

The Luddite Developer is talking about this as well.  Seems he is in the same boat as me as far as MSDN goes.

I tried to call the MAPS team yesterday to get clarification on whether or not Expression Studio was going to continue to be part of MAPS, and also an update on when Expression 3 might ship.  The phone number given to me by Microsoft -I had called MSDN earlier and been given the number – had an interesting message:

“The number you have dialed has a new national directory service. For a charge of $3.79 please dial this new number …”

You want what?  You want me to pay to dial a new number?  Wow – if this was a rant I could fill it up… either MSDN gave me a bad number or MAPS is now charging for the privilege of calling them.

No comments

If you’ve spoken with me at any time over the last year at a technical conference or User Group you’ll know that I can’t go more than a few minutes without mentioning Microsoft Expression Blend. 

I was first introduced to WPF in 2006 and I was stunned by the results.  I couldn’t wait to try it myself, but at the time all I saw was XAML, and frankly I had no desire to develop business apps in markup.  Fortunately, in 2007 I saw Blend 1.0 and the flood gates opened: I had to have it, and I soon did.  Since then I have become a Blend evangelist.  It is my mission to preach the rich chocolaty goodness of Blend to all the people of the land.

OK, that may seem overkill, but in all honesty I cannot see developing WPF or Silverlight apps without Blend.  If I had to code strictly in XAML I would still be a Windows Forms developer.  Don’t get me wrong, plenty of people have done meaningful work without Blend, but I would never be one of them.

Is the Blend 3 trial worth the download?

Naturally, Blend is my current topic of choice for presentations, and I get plenty of questions about Blend from fellow developers.  This morning I received a question that I thought deserved sharing:

Are the blend 3 features worth the trouble of installing the trial version? Or wait for the official release?

This is a great question!  The requestor is currently using Blend 2 and wants to know if the updates from Blend 2 to Blend 3 are so awesome that they must have them now, or can they wait until GA.

My answer is, in typically non-committal fashion, “it depends.”

If you are dabbling with Blend and WPF or Silverlight 2, then you do not need to rush out and try Blend 3.  Don’t get me wrong, you could still benefit from it, but I wouldn’t consider it urgent.  You can wait for the RTM. 

[NOTE: If you are working on Silverlight 2, be sure to read all the warning labels before moving to Silverlight 3: you can’t go backwards once you install the Silverlight Tools for VS 2008.  In your case, you need to wait for VS2010, which is supposed to allow both environments.]

If you are a dedicated WPF or Silverlight developer/designer, by which I mean the bulk of your projects fall into one of these two categories, then by all means you should be using Blend 3 already.  You can install Blend 3 alongside Blend 2 with no ill effects. 

My Favorite Features

I spend a great deal of my time in Blend, and now even more so with Blend 3.  Here are the list of features I use the most in Blend 3:

• Vastly improved Data tab (including SampleDataSource and easier databinding)
• VSM for WPF (mostly built in, still need to add a reference to WpfToolkit.dll)
• Artboard integration is finally usable – you can actually click on
  the element you want to use
• The BreadCrumb makes working with Templates a lot easier
• Code Editor – now you can edit C# inside Blend, including Intellisense.  I don’t advocate it for serious coding, but simple changes and events are quite feasible

There are probably more, but these are the ones that seem to most enhance my daily experience.  There are, of course, some bigger fish to fry that I have yet to really take advantage of like Behaviors and SketchFlow.

Conclusion

If you are in a position to do so, I would try Blend 3.  Trial downloads of Expression Studio 3 are available for 60 days, and pre-order purchasing is currently available.

I’ll be writing more about these features in future posts.  I’d like to add some Video Tutorial too, so feel free to leave requests in the comments below.

2 comments

This is the fourth entry in a series of articles intended to teach developers how to use Expression Design.  You can find the previous articles here:

• Expression Design for Developers part 1 – First Impressions
• Expression Design for Developers part 2 – A Quick Tour
• Expression Design for Developers part 3 – Editing Your Art

In the previous installments we covered the basics of Expression Design, learned how to draw, and even added some nice Effects to our art.  If you’ve been following along so far, though, you may begin to wonder about the Developer part of the series title.  Certainly the entry level nature of the series does apply to developers, who are presumed to have little or no design experience.  So far, however, we haven’t seen anything that would really prompt a WPF developer (or designer for that matter) to use Design over Blend for these tasks.  Today’s article will, hopefully, fill in that void.

Layers

Blend has very functional graphic design capabilities, including path manipulation and Effects (with Blend 3), but at its core it is still an application design tool.  As such, it is missing some typical graphic design software features.  First and foremost is the lack of Layers.  I find layers to be an invaluable tool for organizing my art. It’s also great to logically group things together, which means you can do thigns like mass selection and toggle visibility.  For WPF developers, though, it ties in to another great feature: XAML Export.  I’ll get into this later, but using layers adds some cool functionality when it comes time to move your art to Blend.

Working with the Layers panel

Open Design and let’s get started. If you look at this image from part 2 you’ll see the Layers panel is located at the bottom right of the window:

Create a new project: the size doesn’t really matter, just make it big enough to give you some breathing room.  Before you begin drawing anything, check out the Layer panel and see what’s been added.  You should see a Layer cleverly called “Layer 1″ and outlined in Red.  The outline means that this is the currently selected layer, and since this is the only layer we have it makes sense that it is selected.  To see some stuff in action, let’s go ahead and add some art.  We are going to create several buttons, so let’s start with a Delete button:

Using the techiques from the previous articles, I’ve created art for a custom Delete button.  I’ve expanded the Layer (click the white arrow next to the Layer name) and you can see I have two elements to my drawing.  You’ll also see I renamed the Layer to “DeleteButtonImage”, which I did by double clicking the Layer name and editing it.  This will become important when we export to XAML, so name your layers well.  You can do the same thing for the element names if you wish, a practice I would definitely recommend once your art becomes more complex.  Trying to find a particular element can be tricky otherwise.

You’ll notice each element has an eyeball and a lock. The eyeball is a visibility toggle, which allows you to hide elements and focus on a particular element or a particular aspect of a layer.  It also lets you easily experiement with different options. The lock will lock the element so it cannot be accidently edited.  It can be pretty easy to lose track of which item is selected and before you know it you’ve changed the wrong element!  In our example above, you’ll also see that the “12 points” element has an “fx” label: this indicates that this element has an Effect applied to it, in this case a Drop Shadow.

The layer itself also has the eyeball and lock features.  Next to them is a box, which when clicked will select the entire layer, at which time the box will fill with the Layer color (Red above).  The Layer colors are a way of visually distinguishing between multiple layers.  You can control the color assigned to a layer as you’ll see in the next section.

At the bottom of the Layers Panel are three buttons: the one on the left is the Layer Options button which we’ll cover in the next section.  The two on the right are the “New Layer”  and the “Delete Layer” buttons.  They are pretty self explanatory, but it is worth noting that you cannot delete a layer when it is the only layer on the artboard, so at this stage the button should be disabled.

Layer Options

There are several options for controlling the Layers Panel. Click on the Layer options button at the lower left corner of the Layers Panel. Doing so reveals a context menu where you can Create a New Layer, Duplicate a Layer, Delete a Layer (when enabled), and change the Layer and Thumbnail Options.  Explore these a little and you’ll find that they are all pretty straight forward.  For now, click on “Duplicate Layer”, which will create a copy of the DeleteButtonImage we just drew.  One annoying aspect of this feature is that it also copied the layer color: click on either layer and you’ll see they are both the same.  If you create a new layer otherwise, it will be assigned a different color.  To correct this, select the newly copied layer and go back to Layer Options -> Layer Color… and assign it a new color.  Now that layer and it’s objects will use the new color.

Using Multiple Layers

One way to make use of multiple layers is to have them, well, layered on top of one another.  You would do this with a more complex example to better organize and manipulate the image.  This is of course an optional approach since you can have all your art in a single layer, but I like the flexibility discussed above.

For XAML export, though, we use multiple layers to represent multiple XAML Elements.  In our case, we are creating background images for a series of buttons, so each layer will represent each seperate image.  I want them all to have the same size, shape, and background gradient, so I am going to use the DeleteButtonImage Copy we just created to serve as my template for future buttons.  First, I want to rename the new layer to “ButtonTemplate”.  Next, I want to select the “X” art and delete it by selecting it and pressing the delete key.

All should look well right now, but it really isn’t: I want to be able to see all my buttons at once, but it appears I can only see the selected Layer.  In reality, I can only see the TOP layer: when we used the Duplicate Layer function the new layer was positioned immediately over the old layer and so all I can see is the topmost layer.  Let’s move the DeleteButtonImage layer so we can see both side by side.  Click the box on the DeleteButtonImage layer to the left of the eyeball: this should select the entire layer.  Now grab it on the artboard and move it to the side, which should reposition the entire contents of the layer. You may need to zoom out to get all the layers visible.

It’s good to mention at this point that you can also rearrange things in the Layers Panel by dragging and dropping them in the Tree.  This would not have addressed our particular concern because all it would have done was adjust the Z-Index, but this can come in handy for moving items and layers frontwards and backwards on the artboard.

If you’ve been playing along, you should now have something like this:

We need two more buttons, an Add button and a Copy/Add button.  I’ll start by copying the template 2 more times, renaming my new layers, fixing their colors, and moving them so I can see them all on the artboard at once:

Now I’ll add some art to the Add and CopyAdd button layers:

I used the same techniques from before to create the art, but as you can probably guess I copied the Add art and reused it to create the CopyAdd art.  One easy way to copy an element in Design is to hold down the Alt key and drag the element: this will create a copy of the element and drop it where you let off the mouse.  Be careful though: in this case, if you copy it over to the blank template for the CopyAdd button it will appear to be part of the button when in fact it is not!  Looking at the Layers Panel will show you that the newly created element is still within the AddButtonImage layer!  To correct this, in the Layers Panel drag it from its new home and drop it in the CopyAddButtonImage layer.  If you drop it below the “4 points” element it will be behind the background, so be sure to drop it above. And don’t worry if you miss, you can do this as often as you like.

Export to XAML

Now that we have some useful art in well named layers, let’s export them to XAML so we can use them in Blend.  In this case, we do not want to export the ButtonTemplate, so first go to the Layers Panel and click the eyeball on that layer to toggle its visibility off.  Go to File -> Export: this will popup the Export window.  On the right hand side, change the Format type to XAML WPF Resource Dictionary:

Leave the Group By selection as “Layers” and change the Live Effects option to “Convert to XAML Effects”.  Change the file name and location to whatever you want them to be and press Export All.  Your XAML file is now created and ready to go.  If you open the file in a text editor, you will see that each layer was converted to a DrawingBrush resource with the same name as the Layer which is why we want to use good names for our layers.

That was pretty simple, wasn’t it?  Now let’s put them in action!

Consuming the Resources in Blend

Open Blend and create a new project.  On the Project Tab, right-click the Project and add an existing item: navigate to the XAML file we exported from Design and add it to your project. If you go to the Resources Tab now, you should see the XAML file listed. Expanding it should show the three background images we created.  Now drop three buttons onto your artboard.  I made them squares since my art is square.

Create a Template

There are two easy ways to make the images the backgrounds for our buttons. The first way, and my preference, is to create a new template and make the image the Background of its Grid property:

1. Right-click the button (or use the Breadcrumb trail above the artboard).
2. Select “Edit Control Parts (Template)” -> Create New.
3. Name the ControlTemplate appropriately.
4. The Template will contain only an empty Grid.  Drag the Image from the Resources Tab and drop it onto the Grid: select “Background” from the popup menu. (You can also use the Brush Resources button on the Grid’s Background property and select the Image that way.)

Set the Button Background directly

Alternatively, you can use step 4 from above and drag the image directly from the Resources Tab to the Button and set its Background property to the Image.  Try both ways on the buttons we’ve created and run the application to see the differences.

I Recommend Templates

The Template approach appears to be more work: you’ll notice that you no longer have any of the typical button behaviors for IsMouseOver, IsPressed, etc.  You will need to implement these yourself.  This is easy enough to do, but beyond the scope of this article.  The good news is that you have complete control over the effects, so I would definitely prefer this method.

Setting the Background image of the Button is faster and easier, but leaves several things to be desired: first is the word “Button” in the center of the art.  Second is that the default IsMouseOver and IsPressed behaviors are still present, which means we lose our image in these states.  In order to take care of these issues, we are still going to edit templates, and I find starting from scratch much better than trying to work within the default Button template.

Here is what our application looks like with all three buttons applied:

Conclusion

I hope you can see how well Design and Blend can perform as a team.  If I was creating a suite of applications, I could now easily get a standard look and feel to all my buttons. I also now have one place to maintain them: my Design file.

I hope you’ve enjoyed this series.  Time and schedule permitting, I hope to cover more advanced drawing techniques in a future article.  If you have any questions or would like to see anything else covered, please leave your suggestions in the comments below.

1 comment