ASP.NET Custom WebControl Absolute Positioning

[Nick Goloborodko]

Hi,

I'm currently in the process of building a custom webcontrol. I nearly
finished it, however one thing is a mystery to me: how do i enable the
control to support absolute positioning?

Thanks in advance,
Nick Goloborodko

 

[Wilco Bauwer]

This is more a HTML/CSS question. You could define a properties which
expose the Control's absolute position, and let your control render the
css tyle "position: absolute" and some css offset attributes (like
"top: 10px; left: 10px") based on those properties.

However, it is arguably a bad idea to absolutely position everything.

 

[Nick Goloborodko]

Hi, thanks for the reply However that only answers part of my question.
As far as I'm aware, WebForms support two types of layout: Flow Layout and
Grid Layout. Flow layout is nice and straight forward - all of the
components are positioned by the use of tables, div etc. However Grid
Layout is using th html stlye attribute of components to absolutly position
them.

My Component is nothing more than 2 divs, one insde another which funtion
like progress bar (with a little JavaScript magic). When i add the
component to the tool box, i can drag it out fine onto a WebForm and
position it using GridLayout into a position (we'll i do know that this is
somewhat a bad practice, which i do not normally use, but since i am
planning to realise my custom WebControl to the comunity - this is kind of
neccecary) the Control is displayed fine in the designer, but when i launch
my form, all of my elements are moved to the TOP Left corner of the page
(as can be expected if Flow Layout was used).

Please give me a clue

Kind regards,
Nick Goloborodko

 

[Steven Cheng[MSFT]]

Hi Nick,

I think the problem you're meeting should be divided into two parts:

1. The design-time jobs for your control:
The "GridLayOut" setting is for VS.NET IDE use at design-time more than
page in runtime. When the page is set to "GridLayout", each control draged
from toolbox onto the webform will contains absolute postion attributes in
the "style" attribute. And when they're moved , the values will be
synchronized by IDE.

eg:

<cc1ositionControl id="Control1" style="Z-INDEX: 101; LEFT: 264px;
POSITION: absolute; TOP: 112px" runat="server"...... >

This won't happen when using the "FlowLayout".

2. The runtime jobs for your control:
Though the VS.NET IDE will help manage these position attributes at
deign-time(using GridLayout). This dosn't means that our webcontrol will
also display as absolute postion on the web page at runtime. This is
because the web page is rendered as Html elements and displaying in
clientside browser, if you want to make your custom control also located on
page by absolute positino, you need to render the absolute postion
styles(css styls) when rendering the html content of your web control. For
example:

the TextBox control(with absolute position) will render as the following
html elements:

<input name="TextBox1" type="text" id="TextBox1"
style="height:40px;width:256px;Z-INDEX: 102; LEFT: 304px; POSITION:
absolute; TOP: 40px" />

Note that the "style" value is different from the "style" in aspx page, we
need to manually set these css attributes in our control's code. However,
ASP.NET design-time has provided us the ability to retrieve the design-time
position attributes' values by providing a custom ControlDesigner. Here is
a blog article which has mentioned how to get this value :

How to interact with Style["LEFT"] and Style["TOP"] of the WebControl
during design time
http://blog.joycode.com/felix/articles/39633.aspx?Pending=true

For other reference about applying styles for asp.net controls you can have
a look at the MSDN's webcontrol develpment section:

#Styles in Server Controls
http://msdn.microsoft.com/library/en-us/cpguide/html/cpconstylesinservercont
rols.asp?frame=true

Hope helps. Thanks.

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)