in Silverlight

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

[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.

Leave a Reply

  1. Hi bg,

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

  2. 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.

  3. 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:

  4. 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 *.

  5. 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.

  6. 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.