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

March 17, 2008 · by · in ,

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