Setting window background in Expression Blend proved to be quite confusing. Of course, seasoned users would say it is beyond obvious and I am just an ignorant novice. This may be true, but in my opinion this is exactly how good apps differ from bad apps. Good apps make it easy for ignorant novices by following established practices and by not violating “the rule of least astonishment”. Of course, different people may be astonished by different things, but nevertheless there is some established common philosophy of Windows apps.

Astonishment #1: there is no “Properties” in the right click menu. I naturally assumed that “background” would be one of the properties, and I was right. However, I had a hard time finding the properties window. Usually you right-click on the object you want to edit, choose “Properties” from the right click menu and you’re there. Not in Expression Blend. There is no even View→Properties in the menu. There is Window→Properties, but who looks in the Window menu? 🙂 It turns out “Properties” is one of the tabs alongside “Project” and “Resources”, but it seems so obvious to the authors of multiple tutorials, they don’t even mention that. Or maybe I was just missing it.

Astonishment #2: when you edit the “Background” property, you cannot select background image right there. You can select an image brush, but it comes up with a default picture which is not changeable. Oops. It turns out, defining a background is a two-step process, I need to create an image brush first, and then I can use it for my window.

Astonishment #3: you cannot create an image brush by just browsing for an image and selecting it. If you go to Tools↔Make Brush Resource↔Make Image Brush Resource, you will find it disabled. You need to add an image to your project first. So, setting window background actually becomes a 3-step process.

Astonishment #4: when you add an image to your project, you still cannot create an image brush out of it! You must drag the image to the artboard first, where it will be taking space for no reason. And then you have to remember to delete it. I am not making it up: see, for instance this post. They advise to add an image to the window and then delete it.

Astonishment #5. If you have your window selected while you drag the image to the artboard, it will overwrite the contents of the window! Ouch. So you’d better take care of the background first, or else it would be quite inconvenient.

So, the algorithm for adding the image background so far:

1. Find nice image. Add to your project.
2. Drag the image from the “Project” tab to the design surface (“artboard”). You don’t really need it there, but it won’t work otherwise. Be careful to save your design first, because the image will overwrite the contents of the window.
3. Convert the image to a brush resource by using Tools↔Make Brush Resource↔Make Image Brush Resource.
4. You no longer need the image on the artboard, feel free to delete it.
5. Click on the window on the artboard to select it, and go to the properties tab.
6. Click on a little square to the right of “Background” property and choose the brush created on step 3 from the LocalResource menu.

Easy, isn’t it? 🙂 If anyone knows a shorter way, please let me know.

Astonishment #6. It seems that most Expression Blend tutorials are in video format. Either Microsoft does not believe Expression Blend users can read text, or they just fell that making videos is more fun, I don’t know. I honestly tried to run this video, which promptly informed me it needs the latest version of Silverlight (but of course!), installing which required me to close all browser windows, and then it happily told me it cannot install it anyway, because my developer components are out of date. Since I did not feel like upgrading my development components at the moment, I chose not to see the video. Congratulations.

Bottom line: this is ridiculous. At least when it comes to adding background images, Expression Blend application is counter-intuitive and cumbersome. The process requires multiple steps, gazillions of mouse clicks, and you don’t get any guidance along the way. Big thumbs down. And did I mention it’s all black and depressing? 🙂

How would I improve it?. In order from easy to tough:

1. Add “Properties” option to the right click menu.
2. Allow creating image brush by right clicking on an image file, without having to put it on the artboard first.
3. Allow creating image brush from an arbitrary file, automatically adding it to the project (and don’t forget to give an option where to add it.
4. Allow to do the same directly from the background brush editor.