Making Silverlight content region occupy all available browser space

I know, I know. It’s been a while and I’ve been busy. I will do what I can to make up for it. Here’s the first.

So as I’ve mentioned, I’m starting from ground zero on Silverlight and I’m documenting stuff I ran into that I found frustrating so that it may help some other poor soul and so I have a place to check when it happens again (and it probably will). This little bugger was particularly frustrating because I wasn’t focused at the time. Writing good multi-threaded code does not mean that you can write good code when you’re multi-threading.

So what was I trying to do? I had already written my XAML and my code behind written and they were working fine. All I needed to do now was to make my Silverlight control take up all the space available in the browser window. Simple, right?

Well, it should have been. I tried setting the LayoutRoot’s height and width to Auto. No good. Set height and width to 100% on the <object> tag. Nope. Time to reference the library. Pro Silverlight 3 in C#, surely that must know. It says:

“… you might prefer to remove the Width and Height attributes from the <UserControl> start tag. That way, the page will be sized to match the Silverlight content region, which in turn is sized to fit the browser window, and your Silverlight content will always fit itself into the currently available space.”

Tricky wording there. It will fit itself into the currently available space, but it isn’t sized to take all the available space, which is what I wanted. So what was the key? When you have Visual Studio create a new Silverlight test page, you’ll notice that it adds a style, a style that I didn’t have. It looks like this:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}

body {
    padding: 0;
    margin: 0;
}

#silverlightControlHost {
    height: 100%;
    text-align:center;
}
</style>

As soon as I added that to my page, I got just what I was looking for. I should mention here that this makes the assumption that your silverlight <object> tag is nested in a div whose id is silverlightControlHost. Give it a shot and I hope this helps!

<style type=”text/css”>
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</st<style type=”text/css”>
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>yle>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s