Andrej Tozon's blog

If you like the way how Windows Vista shows your account picture on the Login screen, or how Windows Live Messenger’s display picture looks like on, you have probably already thought about putting something like it in your Silverlight application, either for a login screen or just to display a picture in a nice frame.

To take a short break from coding, I’m going to write about how to design a frame, similar to what the above examples use, and put it on a Silverlight page.

I’ll start by opening Expression Design.

Create a new document, then select a Rectangle tool and draw two squares on the canvas. Their size should be set to 110x110 and 97x97. Make sure the stroke of both is set to 1 px width, black.

Set the smaller square’s Corner Radius to 2 px, and the bigger one should be set to 4px.

With the bigger square selected, select Object | Envelope Distort | Make Warp Group then decrease group’s resolution by selecting Object | Envelope Distort | Decrease Resolution.

With the Direct Selection tool selected, select each of the four handles on the sides (not corners) and move them away from the center by approx. 4 px.

With the square still selected, select Object | Envelope Distort | Edit Warp Group.

In the Properties window, under Appearance, select Fill Gradient Color tool. Choose your base color (I’ve chosen one from the default set) and build a custom gradient on it. Setting it up like this:

got me this:

Return to the main panel. If the square isn’t updated with the gradient, do something to it to get it refresh itself.

Now, select both rectangles and align them vertically and horizontally (Arrange | Align | Vertical Centers, Arrange | Align | Horizontal Centers). If the smaller square disappears (falls behind the bigger one), send the big one to back (Arrange | Order | Send to Back).

Select the smaller square and set its fill color to White and allow some transparency (80% Opacity in this case).

Voila:

If that's not enough, you can experiment by setting the outer square’s stroke color to a lighter black/grey, add a drop shadow, etc. Expression Design allows great effects to be applied to your objects, would be a waste not to use them :)

Now, for the Silverlight part…

Select Edit | Options | Clipboard (XAML)… Set Clipboard format to XAML Silverlight Canvas. You can uncheck the Place grouped objects in a XAML layout container option.

Group all objects (Arrange | Group) into one group and move the whole thing into left top corner. Edit | Copy XAML (Ctrl+Shift+C) and paste into your Silverlight page (Xaml view).

Note: all of the above applies if you’re building a display picture for your WPF application too. Just select the proper Clipboard/XAML settings in Expression Designer and you’re ready to go.

Now, replace the Canvas declaration with a Grid and remove all Canvas-related attributes from its child elements.

Now you can fill the empty content with a picture of your choice.

In one of the forthcoming posts I’ll make this a custom control and most likely build a multiple user login screen, but in a rather unusual way ;)