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.
- To start, open your web page that contains your Silverlight control.
- 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.
- 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:
Thank you,
--Mike Snow
Subscribe in a reader