Centering a Siliverlight UserControl on a Webpage

1 replies. Latest Post by mchlSync on March 11, 2008.

(0)

robertlair

Member

79 points

43 Posts

Centering a Siliverlight UserControl on a Webpage

03-11-2008 2:42 AM |

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

14566 points

2,730 Posts

Re: Centering a Siliverlight UserControl on a Webpage

03-11-2008 3:35 AM |

Hello Robert,

RobertLair:
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.

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">
    
    </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>
       
        <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.

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!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net