1) 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.
2) In trying to get this centered, I attempted to put the <asp:Silverlight> in a table cell. When I did this it no longer appeared. In addition, when I right clicked anywhere on the page, it showed as being a siliverlight application. How can I get a
silverlight asset to appear in a specific spot on an aspx page with multiple controls, graphics, etc?
1) 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.
Centering something horizontally is so easy but vertically.Centering div or text vertically is kinda tricky.
YOUR_PROJECTName_TestPage.aspx is the aspx page where you host SL content.
The following code is by-default in that aspx file.
Note: assume that the width and height of XAML is 400x300.
You can also take a look CSS sample from
this link.
RobertLair
2) In trying to get this centered, I attempted to put the <asp:Silverlight> in a table cell. When I did this it no longer appeared. In addition, when I right clicked anywhere on the page, it showed as being a siliverlight application. How can I get a silverlight asset
to appear in a specific spot on an aspx page with multiple controls, graphics, etc?
I suggest you not to use table-based layout. The most of web developer stopped using table-based layout since long time back. DIV-layout is much better and flexible than table-based layout.
Hope it help.
(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)
RobertLair
Member
79 Points
44 Posts
Centering a Siliverlight UserControl on a Webpage
Mar 11, 2008 06:42 AM | LINK
I am working on two things:
1) 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.
2) In trying to get this centered, I attempted to put the <asp:Silverlight> in a table cell. When I did this it no longer appeared. In addition, when I right clicked anywhere on the page, it showed as being a siliverlight application. How can I get a silverlight asset to appear in a specific spot on an aspx page with multiple controls, graphics, etc?
Robert Lair
http://blog.robertlair.net
mchlSync
Star
14968 Points
2799 Posts
Re: Centering a Siliverlight UserControl on a Webpage
Mar 11, 2008 07:35 AM | LINK
Hello Robert,
Centering something horizontally is so easy but vertically.Centering div or text vertically is kinda tricky.
YOUR_PROJECTName_TestPage.aspx is the aspx page where you host SL content.
The following code is by-default in that aspx file.
<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/SL2HttpPost.xap" Version="2.0" Width="100%" Height="100%" />
</div>
</form>
</body>
So, you have to change it to the code below.
<%@ Page Language="C#" 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 SL2HttpPost</title>
<style type="text/css">
<style type="text/css">
<!--
DIV.sl
{
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
margin-left: -150px; /* half of width */
margin-top: -150px; /* half of height */
background-color: #6699CC;
}
-->
</style>
</style>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<!-- Credit : http://milov.nl/code/css/verticalcenter.html -->
<div class="sl">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SL2HttpPost.xap" Version="2.0" Width="100%" Height="100%" />
</div>
</form>
</body>
</html>
Note: assume that the width and height of XAML is 400x300.
You can also take a look CSS sample from this link.
I suggest you not to use table-based layout. The most of web developer stopped using table-based layout since long time back. DIV-layout is much better and flexible than table-based layout.
Hope it help.
Regards,
Michael Sync
Silverlight MVP
Blog : http://michaelsync.net