Developing For .NET

Not too long ago, I posted about how to center a Silverlight Application within an HTML page.  Last weekend, I was working on a Silverlight application and I wanted to stretch the background brush across the entire browser, but retain the content in a fixed space in the middle of the screen.  I could have done this by creating a gradient and then applying it as the background in my HTML/CSS, but I wanted the ease of design and flexibility that I have within Silverlight.  Here is what I did to accomplish the trick.

Sizing the UserControl

To begin with, we have to set the width and height properties of the UserControl so that the UserControl will stretch to fill all available space within the browser.  We’ll start by setting Width and Height of our UserControl to Auto and the LayoutRoot container to a fixed size with a Background color so we can see it along with our Background work.  This way we can tell what effect we are actually having. 

[Note: click on the images for full size]

So far, it seems like we are centering, so all we should need to do is add a Background to the UserControl, right?  Unfortunately, that will not do what we want.  Adding a Background to the UserControl gives us the exact same results.  Since the screen shot is the same, I won’t repeat it, but if you are following along at home try it and you should get the same result. 

Also, not to be picky, but this is not actually centering: this is setting the HorizontalAlignment and VerticalAlignment properties to their default values of Stretch.  The Grid is actually stretching to fill up the available space, but it is still limited to its fixed size, so it gives the appearance of centering.  Not to worry, it’s a minor technicality.

Setting the Background

Our goal is for the Background, in this case a GradientBrush, to stretch across the entire surface of the browser window.  Above we saw that fixing the LayoutRoot to the size of our desired content won’t allow this to happen.  Instead, we’ll need to set the LayoutRoot Width and Height properties to Auto, and set the Background of the LayoutRoot element to the desired Gradient. 

Running the application at this point will show our Background filling the entire browser space.

And here is the XAML:

Centering the Content

Now that we have our Background properly visible across the entire surface of the browser, we need to center the Content inside our LayoutRoot Grid.  This is easily done by adding another Container to the LayoutRoot to act as a wrapper for our fixed size content.  This example shows a Grid, but I initially did it with a Canvas. I’ve added a Black Background color so you can see the content Grid.

Now set the HorizontalAlignment to Center.  I think the default VerticalAlignment value of Top looks best, but of course you could center it or add some Margin around the content Grid to suit your preference. 

Now just add your content to the internal Grid, and you will have an automatically sized Silverlight page with centered, fixed size content.

Adding a Clipping Region

One last thing you should be aware of: if you are doing any animations with content off screen, using this method will make them visible outside the bounds of your content.  While this has some interesting potential, it is probably not the behavior you want. 

To correct this, you need to add a Clipping Region to your content Grid.  This will ensure that child elements of that Grid are only visible inside its visual boundaries. Since you can’t do this visually, you’ll need to edit the XAML directly.  The key here is to set the Clipping geometry, in this case a Rectangle, to be the same width and height as the content Grid.

Conclusion

It’s important to note that since we are letting Silverlight do all the work, you do NOT want to use the HTML and CSS from the previous Centering post.  Doing so will result in only the width defined in the CSS being displayed.  Instead, just use the default HTML and CSS settings.

I like this approach better since it gives my application an integrated background.  It gives me more creative options and more control.  Let me know how it works for you!