Tips/Tricks: How to center Silverlight control on a webpage? 12

[Post written as of Silverlight 2 beta 1]

Question:

How can I center my Silverlight UserControl on the center of the web page (horizontally and vertically). To reproduce, create a new default Silverlight application in VS2008. I want that default xaml to appear in the center of the page, instead of the top left.

Source: http://silverlight.net/forums/p/11233/35791.aspx

My answer :

Centering something horizontally is so easy but vertically (especially for cross-browser). However, I found the CSS trick that works in any browser from this link. (Thanks to the original developer for this CSS trick.)

Silverlight

Let’s say your project name is “SL2Center” .

The following code is the default code from SL2CenterTestPage.aspx


<%@ Page Language="VB" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
<title>Test Page For SL2Center</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div  style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SL2Center.xap" Version="2.0" Width="100%" Height="100%" />
</div>
</form>
</body>
</html>

You change the width and height properties of Usercontrol to 300. And also, you add one TextBlock in that control.


<UserControl x:Class="SL2Center.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300">
<Grid x:Name="LayoutRoot" Background="Red">
<TextBlock Text="Silverlight Content" Foreground="Yellow" FontSize="30" FontWeight="Bold" VerticalAlignment="Center"  HorizontalAlignment="Center"/>
</Grid>
</UserControl>

The first thing that you need to do is that you have put the following CSS in <head> of SL2CenterTestPage.aspx.

<style type="text/css">
<!--

DIV.sl
{

position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 300px;
margin-left: -150px; /* half of width */
margin-top: -150px;  /* half of height */
background-color: #6699CC;
}

-->
</style>

I assume that the height and width properties of your xaml is 300. So, I set 300 to width and height in CSS.

Secondly, you have to set the class of DIV to the CSS class that we have created.


<div class="sl">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/SL2Center.xap" Version="2.0" Width="100%"
Height="100%" />
</div>

That’s all. You can run the application. You will see that the SL content is showing at the middle of web page. Cool, isn’t it? but one thing you should know is that if you want to change either width or height of XAML, you have to change the CSS again. I didn’t spend that much time for that but I hope you will get some ideas how you can customize it. Let me know if you have any problem or better solution.

You can download the sourcecode here.

12 thoughts on “Tips/Tricks: How to center Silverlight control on a webpage?

  1. Reply Cornel Mar 18,2008 12:51 am

    Cool, I was looking for that!

  2. Reply bg Mar 24,2008 6:24 am

    does not seem to work in firefox

  3. Reply Michael Sync Mar 24,2008 6:37 am

    Hi bg,

    Which version of Firefox are you using? I have tested this sample with IE6, IE7 and Firefox 2 and it is working.

  4. Reply bg Mar 24,2008 6:51 am

    sorry. what you posted does work in firefox. the problem is with absolute positioning in firefox when you don’t specify a height and width. i want this since specifying the width and height pops scrollbars on some resolutions.

  5. Pingback: Wöchentliche Rundablage: Silverlight 2, .NET, LINQ, ASP.NET MVC, Design | Code-Inside Blog

  6. Reply Ed Mar 25,2008 3:18 pm

    Hi,

    I played with a few different ways to center Silverlight content and find that making the control fill the entire browser window (100% height and width) then using a grid control like the following works quite well:

  7. Reply Ed Mar 25,2008 3:22 pm

    Woops, the code was stripped out of my comment. It’s just a (scale 9) grid with 3 columns and 3 rows. The center column’s width is set to the width of your content and the center row’s height to the height of your content. The content obviously then goes in the center cell. All other widths and heights are set to *.

  8. Pingback: Centered Silverlight 2.0 Content « Ed Silverton

  9. Reply Paul Dec 8,2008 3:25 am

    Thanks! This was an irritation as I couldn’t get my Silverlight control centered properly. This did the trick. Thanks for taking the time to post the advice.

  10. Reply Scott Marlowe Dec 30,2008 8:35 pm

    Cool. Just what I was looking for. Good tip. Thanks.

  11. Reply Avinash Jan 8,2009 12:55 am

    I want to stretch to my full page. how?

  12. Reply jwc Feb 25,2009 5:29 pm

    I use silverlight so I don’t have to deal with CSS issues. It seems that it would be so much easier to make the control take up the whole browser window then center whatever you need inside of that. Let Silverlight do the centering, that way you know it’ll work across browsers.

    I realize you were answering a question on a forum, but it wouldn’t hurt to ask the person if they had considered doing it the easy way.

Leave a Reply