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.)
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.
Cornel said
am March 18 2008 @ 12:51 am
Cool, I was looking for that!
bg said
am March 24 2008 @ 6:24 am
does not seem to work in firefox
Michael Sync said
am March 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.
bg said
am March 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.
Wöchentliche Rundablage: Silverlight 2, .NET, LINQ, ASP.NET MVC, Design | Code-Inside Blog said
am March 24 2008 @ 12:13 pm
[...] Tips/Tricks: How to center Silverlight control on a webpage? [...]
Ed said
am March 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:
Ed said
am March 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 *.
Centered Silverlight 2.0 Content « Ed Silverton said
am March 25 2008 @ 4:21 pm
[...] I noticed that a method for doing this for Silverlight using css was posted here: http://michaelsync.net/2008/03/17/tipstricks-how-to-center-silverlight-control-on-a-webpage [...]