Andrej Tozon's blog

Did you know you can create cool looking splash screens for your WPF application right there with the Expression Designer?

Of course you did. Expression Designer provides you with all you need to create free-shaped, part-transparent, drop-shadowed graphics and I bet the the WPF splash screen support is going to be baked into the next release of Expression Blend as well.

This is a quick walk through designing a splash screen with the Expression Designer.

1. With Expression Designer open, create a new rectangle and set its Corner Radius property to about 30px (depending your rectangle’s size).

2. Set rectangle’s color to match your application theme and make it a bit transparent by setting Opacity to around 70%.

3. Find the Effects property section and click the Add Effect button. Choose Effects | Drop Shadow.

4. Decrease Softness and Offset and increase Opacity properties to make the shadow more compact. You will end up with something like this:

5. Create a new layer and put a new rectangle on it. Make it the same size as the first one and put it on the same spot to make them both aligned exactly.

6. Set its stroke to None and fill it with a transparent gradient: First Stop Alpha: 80%, Second Stop Alpha: 0%.

7. Move gradient’s origin more to the side and make it larger.

Your rectangle should now look just a little bit more exciting:

8. Time for some text… With the Text tool, create your application title. I’ve chosen 36 pt Arial Rounded MT Bold font with white color fill. Applying some transparency to the text will make it absorb some background color for a more glassy look. You could add some Outer Glow Effect to make it even cooler.

9. Add all other text you want to show in your splash screen. Here’s what I got so far:

10. If you have any graphics that could communicate to the user what your application is all about, you could use that as well. It might also be a screenshot from the actual application if you can’t find anything better. I used a screenshot of my sample Live Europe Weather Map application. Adding a bitmap to the existing Expression Design project is really easy – just select File | Import… and open your graphics - it will get added to the current layer so you will probably want to create a new layer before doing that. And don’t forget to set some transparency to that as well:

11. Almost done. To break out of dull symmetric rectangly shape, you can mix in some additional decorations, like I did to point out that this is a whole new version of the application [the yellow badge is from the bittbox badges collection:

 

And this is the final result for now. We’ve got transparency, irregular shape, drop shadow… Of course, this works for a sample, but for a real-world application I would have to put some additional work into it; pay more attention to the details, colors, gradients, etc.

12. When satisfied with your work, just select all objects, select File | Export… and choose PNG as your target format. After the file is saved on your disk, all you need is incorporate it in your WPF application.

Expression Design offers a lot more effects and options that were shown in this quick walkthrough. I am particularly happy to see how easy it is to play with different effects, mixing and layering them in different combination. There is, of course, also export to different Xaml instances, which makes it even more sweet.

While writing this post, I noticed that the WPF team published a new WPF Splash Screen Item Templates for Visual Studio 2008 SP1. This gives you additional option to add a splash screen to your WPF application – a new (Splash Screen (WPF)) item will be available in your templates window when adding a new item. Selecting that will insert a default graphics to your project and set it as the splash screen. You’ll have to customize the graphics yourself though. This is a nice option, although I’d like to see some form of a wizard with some styling options, font/title selections, etc… In the next version of Visual Studio perhaps…

Corrina Barber posted a cool looking new skin for Silverlight controls, which indeed looks perfect for giving your application a sketchy appearance when in early stages of development.

However, if you don't find the green color she used sketchy enough, it doesn't get any easier to adjust it to your likings. When we're talking about control skins in WPF/Silverlight, we're talking about styles, right? So...

with a simple Search & Replace in the App.Xaml file she posted along with her sample, I changed some of the colors in her skins to get a bit more of a Black & White / Gray appearance:

 

Now imagine, how much "damage" you could do to this skin with Expression Blend...

Anyway, this is the fourth Silverlight skin she posted and she's not stopping. If not anything else, this is a great inspiration to start creating your own Silverlight skins!

If you're considering installing Expression Blend 2.5 March 2008 Preview over Expression Blend 2 December Preview, make sure you uninstall the December Preview first, and then continue with March Preview installation. When doing vice versa, you'll lose some of the "Open in Expression Blend" shortcuts [allowing you to open solutions from Windows Explorer, or open (Silverlight) Pages from Visual Studio 2008].

However, all is not lost if those shortcuts are gone after uninstalling December Preview. Simply repair the March Preview installation and you're back and ready to blend your solutions again.

As expected, a lot of stuff was shown and discussed on the MIX08 keynote today:

• eight - Internet Explorer 8 Beta 1 (download): better standards compliance, backward compatible mode, faster faster JavaScript implementation, embedded debugging tools, "activities" and "webslices" (custom extensions, deliverable simply by hacking up a couple of rows of XML),. ...
• Silverlight 2.0 Beta 1 (download): it's here! With only 4.3MB in size, it delivers highly anticipated UI controls, along with a new testing framework, including tests for all Silverlight controls. Supports isolated storage for offline caching. Plus, Silverlight 2.0 now ships with a non-commercial Go-Live license and will also run on Nokia [Symbian] phones. Finally, if you've done any work with Silverlight 1.1, you're in for a serious code rewriting, as there's a lot of breaking changes in the code base. [That's, however, a good thing, because these changes bring Silverlight's programming model much closer to the the one in WPF]
• Expression Blend 2.5 March 2008 Preview (download): Silverlight 2.0 Support
• Silverlight Tools Beta 1 for Visual Studio 2008 (download): Add-on to Visual Studio for Silverlight 2.0 Beta 1 development. Better designer experience, although far from being nice as in Expression Blend.
• Sea Dragon in action - Deep Zoom: take a look: Hard Rock Memorabilia [a bit quirky at the moment, I'm afraid] Want to make your own Deep Zoom creation? Download Deep Zoom Composer preview. And you can start with this User Guide.
• The future of WPF: new controls, performance improvements, etc...

Watch the MIX08 keynote recording here.

[Update: here's a great preview of Silverlight 2.0 Beta 1 controls in action by Kathy Kam. Note that these controls are available in source code w/ full unit tests]

One of my favorite samples when talking about WPF is showing a rotating 3D letter 'e' in a Windows Forms application. You know, something like those "you've got mail" computer messages, seen in many Hollywood movies. Windows Forms/WPF interoperability features make this kind of stunt very easy to pull off and this is the recipe to make in happen in 15 minutes...

First, you'll have to come up with some kind of 3D element, which you can import in WPF. I used electric rain's ZAM 3D tool, which has the ability to export 3D elements directly to XAML, which can be later picked up and additionally arranged with  Expression Blend, for example. It actually took me just a couple of minutes to create a 3D letter 'e' and import the scene into Blend.

Rotating the 3D element was done by animating ViewPort's camera by setting 5 progressive key frames of its Rotate Transform property.

We need to make the element reusable, so we'll transform it to a user control. Expression Blend 2 (currently still in CTP version) fortunately makes this task very easy by exposing the "Make Control" task (Tools | Make Control...)

OK, half done... We now have a user control with rotating 3D element and a WPF Window, simply displaying it.

The next step is adding a new Windows Form to the project. Save the project in Blend, switch over to Visual Studio (2008) and add a new Form. Visual Studio will make sure all necessary interop assemblies will be added to the project in this process.

With newly created form displayed in the designer area and open a Toolbox. Right at the top (or elsewhere, depending on your project's name), there should be your WPF user control, ready to drag onto the form. When doing so, Visual Studio will create your control, hosted in the ElementHost control (a Windows Forms control, which can host a WPF element). Set control's size to a desired value and you're done.

Download the sample project here.

Just a quick reminder: 1st European Silverlight Challenge is entering the finishing line. As announced, the competition ends next Monday, which still gives you plenty of time to polish your applications and give them some finishing touches. When ready, don't forget to submit your app on local competition site (click here for Slovenian site). Note: you'll have to register and log in first to submit your entry.

Starting today, Silverlight v1.0 is also available through Windows Update, as an optional update.

Wait, there's more... also available through Windows Update from today, are updates for all Expression products, including service packs.

Just keep 'em coming...

Gradient eyedropper proved to be one of the fun features for presenting Windows Presentation Foundation/Expression Blend. While fun for presenting, its ability to capture the color spectrum of the mouse-crossed area is useful in real-time designing too.

Try this for example... Start up your Blend, create a new project and put a rectangle on a window. Select Gradient brush for rectangle's Fill property and click-select the Gradient eyedropper tool (next to the gradient/color selector):

With eyedropper selected, drag a mouse, holding the left button, vertically across the rainbow color scale (part of the color selector). And here comes the rainbow rectangle...

You can color swipe any area of the screen, as long as your eyedropper cursor stays inside Blend's main window. This is somehow different to using the "regular" Color eyedropper tools, which allows you to capture even colors outside Blend's bounds.

Now go color your life ;)

On a side note: Expression Blend 2 December Preview is out.