Page view counter

Silverlight Tips of the Day - Blog by Mike Snow

Game Programming with Silverlight

Silverlight Tip of the Day #34 – How to Center your Silverlight Application in your Browser

By default your Silverlight application is aligned to the left of your browser. How cool though would it be if you could keep your Silverlight application centered in the browser?

Run this demo here: http://silverlight.live.com/ContentTestPage.aspx?setName=Keep+me+centered

There are a variety of ways to do this, below is one such technique.

  1. To start, open your web page that contains your Silverlight control.
  2. Move your Silverlight control into a table with a single cell or into a div. Add a style to the table setting the margin-left and margin-right to auto.
  3. You will also need to set the <td> width and height to the size of your Silverlight control otherwise the control will not render.

Example:

<body>
  <form id="form1" runat="server" style="height: 100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <table style="margin-left: auto; margin-right: auto;">
        <tr>
           <td style="width: 600px; height: 300px;">
                <asp:Silverlight ID="Xaml1" PluginBackground="Transparent" runat="server" Source="~/ClientBin/SilverlightDev.xap"
                     MinimumVersion="2.0.30523" Width="100%" Height="100%" />

           </td>

        </tr>
    </table>
  </form>
</body>

Alternatively, you can use a div:

<div style="width: 100%; margin: 0">

<div style="margin: auto; width: 600px; height: 300px">

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightDev.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

</div>
</div>

That’s it! Your Silverlight control will now stay centered in your browser.

Screen Shots:

image

image

image

Thank you,
--Mike Snow

 Subscribe in a reader

Posted: Aug 29 2008, 10:12 PM by mike.snow | with 17 comment(s)
Filed under: , , ,

Comments

Microsoft Weblogs said:

By default your Silverlight application is aligned to the left of your browser. How cool though would

# August 30, 2008 2:04 AM

robhouweling said:

Hi,

When your front-end developers, like mine, have an aversion against tables you can use a similar solution using divs like this:

<div style="width:100%;margin:0">

   <div style="margin:auto;width:400px;height:300px">

       <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication2.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

   </div>

</div>

# August 30, 2008 4:09 AM

mike.snow said:

Thanks Robhouweling! I added your <div> code above as an alternate way.

# August 30, 2008 11:18 AM

BenHayat said:

Hi Mike;

Your text said "Add a style to the table setting the margin-left and margin-right to zero.".

But your code said "<table style="margin-left: auto; margin-right: auto;">"

So is it "Zero" or Auto"?

Thanks!

..Ben

# August 30, 2008 12:07 PM

Dew Drop - August 30, 2008 | Alvin Ashcraft's Morning Dew said:

Pingback from  Dew Drop - August 30, 2008 | Alvin Ashcraft's Morning Dew

# August 30, 2008 7:24 PM

Pages tagged "day" said:

Pingback from  Pages tagged "day"

# August 31, 2008 10:20 AM

Community Blogs said:

Erik Mork interviews Bill Reiss, Terence Tsang with Flash &amp; Sl 3D Text Space, Shawn Wildermuth&#39;s

# August 31, 2008 9:01 PM

Mirrored Blogs said:

Post: Approved at: Aug-31-2008 Silverlight on the Desktop - Desklighter Desklighter is a windows utility

# September 1, 2008 1:42 AM

Silverlight news for September 1, 2008 said:

Pingback from  Silverlight news for September 1, 2008

# September 1, 2008 4:53 AM

2008 September 01 - Links for today « My (almost) Daily Links said:

Pingback from  2008 September 01 - Links for today &laquo; My (almost) Daily Links

# September 1, 2008 5:24 PM

mike.snow said:

BenHayat - Thanks fixed, meant to say auto.

# September 5, 2008 1:00 AM

Visual Web Developer Team Blog said:

&#160; Silverlight Tip of the&#160; Day #39 Title : How to Create a Zoom Toolbar Demo: silverlight.services.live.com/.../iframe.html

# September 11, 2008 1:21 AM

Silverlight Tips of the Day - Blog by Mike Snow said:

The purpose of this post is to create an outline summary all the blogs from my Silverlight tips of the

# January 2, 2009 5:56 PM

o UAU nosso de cada dia said:

essa lista eu copiei desse blog bárbaro (acompanhe por RSS você também): uma lista de dicas super úteis

# January 3, 2009 6:24 AM

jin_u as blog » Blog Archive » ??????????????? ??? ?????? said:

Pingback from  jin_u as blog  &raquo; Blog Archive   &raquo; ??????????????? ??? ??????

# January 14, 2009 7:55 PM

harvs899 said:

Hello, i tried to center this doing it the table way as shown above but i cant get it to work here is a snippet of my code;

<table style="margin-left: auto; margin-right: auto;">

    <tr>

       <td style="width: 900px; height: 920px;">

<div id='errorLocation' style="font-size: small;color: Gray;">

<div id="silverlightControlHost" style="margin-left: auto; margin-right: auto;">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="900px" height="920" >

<param name="source" value="ClientBin/robWebsite.xap"/>

<param name="onerror" value="onSilverlightError" />

<param name="background" value="black" />

<param name="minRuntimeVersion" value="4.0.50401.0" />

<param name="autoUpgrade" value="true" />

<a href="go.microsoft.com/fwlink style="text-decoration: none;">

<img src="go.microsoft.com/fwlink alt="Get Microsoft Silverlight" style="border-style: none"/>

</a>

</object><iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe></div></div>

</td>

</tr>

</table>

</body>

Please tell me why this isnt working

Thanks in advance

Harvey

# December 27, 2010 6:23 PM

Silverlight width | Firstunitypark said:

Pingback from  Silverlight width | Firstunitypark

# September 15, 2011 4:30 AM