Creating a Custom Out-of-Browser Window in Silverlight 4

Silverlight 4 extends the out-of-browser feature to include support for window customization through the Window class.

What this means is that you can turn this:

normal out-of-browser window

into this:

custom out-of-browser window

Okay, so that's not necessarily much of an improvement, but you get the idea.

Basically, this feature lets you draw the entire window area yourself. You have complete control within the window rectangle (optionally with rounded corners).

This gives you a lot of room for both creativity and abuse. It is your responsibility to take usability into consideration and provide custom UI for common window interactions as appropriate. To help out with this, you can programmatically move, resize, pin, minimize, normalize, maximize, and close the window.

There are also a few limitations to this feature that you should be aware of:

  • You can't do transparency overlay effects such as shadows and non-rectangular windows. (Notice the lack of shadow in the custom window screenshot above.)
  • You can't tweak the default UI. You have to draw the title bar, buttons, etc. yourself.
  • You can only use it in trusted applications. This is because the feature can be used to spoof other apps, OS dialogs, etc., so users need a warning before they install.

Sample Code

I spent some time recently playing around with this feature while writing a forthcoming Quickstart, and I decided to encapsulate the windowing stuff into a reusable MainWindow control. You can download the VS project here.

The MainWindow control derives from UserControl and is meant to replace the default layout root. It provides the following features:

  • A title bar that users can drag to move the window. The title bar consumes out-of-browser configuration data for the icon and title text.
  • A default border that users can drag to resize the window. Hovering over the border changes the cursor as you would expect. A BorderBrush dependency property lets you customize the border background from the application layout root.
  • Isolated Storage support to store the window size, position, and state on application shutdown and retrieve the values on the next startup.

The usage is almost the same as with a UserControl:

<oob:MainWindow x:Class="OOBWindowDemo.MainPage"
...other attributes...
    BorderBrush="{StaticResource gradientBrush}">
    <Grid x:Name="LayoutRoot" Background="{StaticResource gradientBrush}">

Some nice things to add to the control would be a full screen button and better styling (such as VSM support for the various window states), but I'll leave that as an exercise for now.


Karl Erickson

See Also:

Out-of-Browser Support
Trusted Applications