WebForm UserControl ?s

[JerryWEC]

I have created a UserControl to be position any place on the web page. I
added a Style Attribute to the each of the three constituent controls:

style="Z-INDEX: 102; LEFT: 0px; POSITION: absolute; TOP: 0px"
style="Z-INDEX: 100; LEFT: 0px; POSITION: absolute; TOP: 22px"
style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 120px"

The three controls contain within the UserControl are two buttons and a
Textbox. I added the required Style Property Get/Set so that each instance
of the UserControl can be reposition as needed on the web page(s). I added
one instance to each of five web pages and each have a different name/id
(ErrorBox1, ErrorBox2, etc...).

I Dim each ErrorBox (UserControl) within the Page Class for each page like:

Protected ErrorBox5 As ErrorBox

I can reposition the instance controls (ErrorBox5) as needed if I have
Document pageLayout set to GridLayout. However, if I have the containing
page's Document pageLayout set to FlowLayout I can't get the control to move
down the page as my DataGrid above it expands with data (data Grows). The
UserControl just seat's in a fixed location and does not float (or Flow).

Q1] How can I get this control to work in both GridLayout and FlowLayout?
Do I need two UserControls?

Q2] How do I get the UserControl to Flow/Float in pageLayout set to
FlowLayout?

Q3] Is there a way to make this UserControl resize for each instance? Do I
need a Resize Property for the UserControl and set the width and height
properties for each constituent control? Like in WinForms?

I really appreciate all help!!!

JerryM

 

[addup]

question: is this just design-time behaviour or run-time as well.

i.e. set youir page to "Flow", drop your control/s in, you wont be able
to "get the control to move down" ... no matter.
Run the page.

Where are the children positioned?

the answers that work for you will depend upon this

--- a ---

 

[Walter Wang [MSFT]]

Hi Jerry,

Thank you for your post.

Based on my understanding, you're using ASP.NET 1.1 to build a UserControl
and want to place it on the WebForm at arbitrary position. If I've
misunderstood anything, please feel free to post here.

First, the pageLayout property of Document is only design time behavior,
its purpose is to help you to place the control on the WebForm easily. When
moving control on the WebForm with pageLayout seting to GridLayout, you
will notice actually the designer is generating a style like:

"Z-INDEX: 101; LEFT: 480px; POSITION: absolute; TOP: 168px"

The attribute "MS_POSITIONING" added to the body tag is only useful when
you adding a new control to the WebForm; in another word, this is only a
designer related settings. It's nothing to do with the runtime behavior,
the control is placed at specified position because its style has such
settings.

As the style value indicates, the position of a control is controlled by
following properties: POSITION, LEFT, TOP; you can easily use the control's
Style property to control them:

ErrorBox5.Style.Add("POSITION", "absolute");
ErrorBox5.Style.Add("LEFT", "200px");
ErrorBox5.Style.Add("TOP", "200px");

You also mentioned that you want the UserControl move down the page as your
DataGrid above it expands with data, can I ask why not simply use default
flowLayout and remove the absolute positions of your UserControl, thus it
will automatically placed under the DataGrid and move down as needed.
Another question is why you want to 3 constituent controls in your
UserControl have absolute positions?

Could you please posting the code of your UserControl, especially how you
expose the Style property?

For the resizing question, I'm not sure whether you want to resize the
consitituent controls or change the bounds of the UserControl.

I'm looking forward to your reply so that we can continue the discussion,
thanks.



Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[JerryWEC]

I can use the following code in a Style() property of type string...
In the Property Get() add the following line of code...
Return pnlError.Attributes("style")

In the Property Set() add the following line of code...

pnlError.Attributes("style") = Value

This allows your UserControl to be moved in GridLayout mode.

pnlError.Attributes("display") = "block"

The above line of code allows you to set the Style.Display Attribute to
"Block" or "none" to hide or show your UC.

My main problem now is how to make this UC work in both GridLayout and
FlowLayout mode. If anyone has made a UC work in both Layouts then they
could be able to tell me how to do it. If I remove my Position:Absolute,
Top and Left style values my GridLayout doesnot work properly and the
control itself loses constituent control design positions. These controls
Button on top, textbox in the middle and button on buttom are close to each
other using the Position:Absolute.

If I change to Position:Relative the constituent controls will lose the
proper position within the UC.

Any help is greatly appriecated. JerryM

 

[JerryWEC]

If anyone has any ideas I on how to create one UC for both GridLayout and
FlowLayout I really appriecate the advise!!

I have now two UserControls. One for FlowLayout and one for GridLayout.
Both seem to work well. The graphics on the FlowLayout control is not as
good as I'd like. The Panel (aspanel) server control shows up between my
title button and my textbox and between my textbox and my close button. For
a work-a-round I changed the color of the panel to the same color as the
button borders. It works it just is not pretty!

I still would like to eliminate the duplicated code in two UserControls
(seems very non oop like to me!).

Ok, the main issue as I see it is that the Div tag I'm using for the
GridLayout Message box will not work in FlowLayout. While the the aspanel
server control will work in FlowLayout.

Food for thought for all those Web Control Guys/Gals! Jerry M

 

[Walter Wang [MSFT]]

Hi Jerry,

Thank you for your update.

What do you mean "Message box will not work in FlowLayout"?

As I stated in my previous post, the GridLayout is only helpful when you're
designing WebForm, when you're moving controls on the WebForm with
GridLayout set, the designer is actually saving the position in the
control's Style property, that's why it works when you exposed the Style
property.

The style property is actually embedded CSS (Cascading Style Sheets) rules.
You can refer to following links for more info:

http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position

If set to FlowLayout, only the designer will not help you generate the
Style property. However, if you manually set the Style property, it will
still work during runtime.

Hope this helps. Please feel free to post here if anything is unclear.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Walter Wang [MSFT]]

Hi Jerry,

I am interested in this issue. Would you mind letting me know the result of
the suggestions? If you need further assistance, feel free to let me know.
I will be more than happy to be of assistance.

Have a great day!

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[JerryWEC]

Walter, I did understand your last posts.

I currently have two versions of my UserControl (My UC was called ErrorBox).
Now I have a FlowMessage UC and a GridMessage UC.

One works in a Grid web page that is set to GridLayout, while the other is
working in FlowLayout when the web page is set to FlowLayout.

I was just hoping to create one control for both situations. I'm currently
looking at a Composite control. I'm not sure if this will solve my two UC
issues. Both controls work very simular but the Grid UC has better graphic
looks. While the Flow UC has a little panel spacing between each control. I
worked around this by changing the panel color to match the border for the
constituent controls (button on top, textbox in middle and a button on
bottom). The bulk of my code is duplicated in both controls.

I'll update the post as I discover a better way to do this UC. Baby
steps... I'm kind of new to the web world.

JerryM

 

[Walter Wang [MSFT]]

Hi Jerry,

How are you doing with the controls?

If you decided to go with a Composite Control, please let me know if you
need help on this.

Have a nice day!

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.