Following up on this post it’s time to make the thing look a little bit better than it does right now. Some of this will be purely cosmetic, some of it will end up requiring some code changes.

In the first instance, I’ll go for some “cheap wins”. I’ll open up Expression Blend with my project and, first off, I’ll go and grab a Windows-themed wallpaper from www.hdwallpapers.net (in the Computer section) such as this one;

then I go to my project in Blend and add an existing item;

and add that Image into the project. Having done that, what I usually do is right mouse on it to insert it into the scene;

with the image in the scene, I make sure it’s selected and then I used Tools->Make Brush Resource to create myself a new ImageBrush;

With that created, I go and delete the image from the scene (not from the project!) and then I can go to the Window and set its background to be the Image Brush I just created as in;

and so now I’ve got a nice(r) background.

From there, it’d be nice to style my ItemDisplayControl UserControl that I built in the last post. Opening up that XAML file in the project…

Aside – there’s a bunch of useful short-cuts in Expression Blend. I recommend reading the help file but, generally, I find that CTRL++ and CTRL+- are useful for zooming in and out. Selecting something in the “Objects/Timeline” tree and then hitting CTRL+0 is great for zooming in to one particular element (especially for templates) and then F6 is useful for changing the views and TAB/F4 are useful for getting UI out of your way.

gives me something that looks like this;

and so our UserControl is just a Grid with a StackPanel that has an Image, TextBlock and then there’s another TextBlock.

In the first instance, I want to add some kind of “header” behind that StackPanel which I’ll do just by adding a Rectangle to the same Grid cell but I want it behind the StackPanel in the z-order as in;

and then I can give that rectangle a bit of colour by changing its background, its stroke, its RadiusX, RadiusY, its Margin all in the properties panel. One of the things to say here is that when making colours for Backgrounds, Strokes etc. it’s useful to make them as resources in Blend;

so that you can then re-use them rather than trying to re-create them. Having given my rectangle a bit of a fill;

I also want to wrap a little Border around my Image and give it both a bit of a margin and a bit of a drop shadow. That is;

Then I can style that border by giving it a stroke ( I re-used the one from my rectangle above ), I can give it a little Margin ( say 10 pixels ) and then I can add an effect to it making it a DropShadowEffect and setting properties as below;

I’d also like to style my fonts so I can take the TextBlock which is representing the Author and is a child of the StackPanel and change its font family to Gungsuh, the size to 36, the vertical alignment to Center, the foreground to a near-white colour.

For my other TextBlock which displays the contents of the Tweet, I change the font family to Segoe Print, the foreground colour to a near-black and the font-size to 48.

Running my app, the UI currently looks like;

It’s looking a bit better (highly subjective! :-)) but the background is merging with the text so I think it’s time to give that grid on my user control a background of its very own and maybe to apply a little drop-shadow to it as well repeating what I did earlier.

With that in place, the UI now looks like;

Not too bad although it has a bunch of “problems” that I’ll come back to later.

Enough of trying to “style” this ItemDisplayControl, I’ll move on to trying to style the ListBox and the items that it contains in the next post.