Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

I'm running into strange problems all around after converting my .NET 1.1 code in VC# 2003 to .NET 2.0 in VC# 2005.

I have a custom control based off of WebControl. The tag is defined as "cc:CustomControl", since this control rendered as an HTC component on the client end. I have a custom designer based on ControlDesigner now (didn't work without it either) that simply outputs an HTML table.

This control does not behave like other controls that are built the same way and I can't figure out why. When I try to click on this control on a web form it doesn't select like other controls. When I try to grab this control and move it to a different spot, the whole web form behaves like a drop target as if I were trying to move the control into a region, and keeps it at the top left corner. At the bottom left of the IDE, the status bar displays "Left: auto Top: auto". Other controls that move fine display "Left: ###px Top ###px" as they should. I don't know why or how to regulate that.

Does anyone have an idea of what I'm doing wrong? This control worked fine in VC# 2003.

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Here's a mock up of what I'm doing that exhibits the same problem. Anyone? I'm stumped.

public class ContextMenuTestDesigner : System.Web.UI.Design.ControlDesigner
	{
		public ContextMenuTestDesigner( )
		{
		}


		public override bool AllowResize
		{
			get { return false; }
		}


		public override string GetDesignTimeHtml( )
		{
			Table tbl = new Table( );
			tbl.CellPadding = 1;
			tbl.CellSpacing = 1;
			tbl.Style.Add( HtmlTextWriterStyle.BackgroundColor, "menu" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderCollapse, "collapse" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderStyle, "outset" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderWidth, "2px" );
			tbl.Style.Add( HtmlTextWriterStyle.Display, "block" );
			tbl.Style.Add( HtmlTextWriterStyle.FontSize, "8pt" );
			tbl.Style.Add( HtmlTextWriterStyle.FontFamily, "Microsoft Sans Serif, Verdana, Arial, Helvetica" );
			tbl.Style.Add( HtmlTextWriterStyle.Padding, "1px" );


			for( int i = 1; i <= 10; i++ )
			{
				TableRow tr = new TableRow( );
				TableCell td = new TableCell( );


				if( (i % 3) != 0 ) // 2 items, then a separator
				{
					WebControl wc = new WebControl( HtmlTextWriterTag.Div );
					if( i == 2 ) // hilight 2nd item
					{
						wc.Style.Add( HtmlTextWriterStyle.BackgroundColor, "highlight" );
						wc.Style.Add( HtmlTextWriterStyle.Color, "highlighttext" );
					}
					else
					{
						// alternate disabled look
						wc.Style.Add( HtmlTextWriterStyle.Color, ((i % 2) != 0) ? "black" : "inactivecaptiontext" );
					}
					wc.Style.Add( HtmlTextWriterStyle.Cursor, "default" );
					wc.Style.Add( HtmlTextWriterStyle.Overflow, "visible" );
					wc.Style.Add( HtmlTextWriterStyle.Padding, "2px 18px 2px 14px" );
					wc.Style.Add( HtmlTextWriterStyle.Width, "100%" );
					



					LiteralControl lc = new LiteralControl( );
					lc.Text = "Menu Item " + i.ToString( );
					

					wc.Controls.Add( lc );
					td.Controls.Add( wc );
				}
				else
				{
					td.Height = Unit.Pixel( 0 );
					td.Style.Add( "border-top", "1px solid threedshadow" );
					td.Style.Add( "border-bottom", "1px solid threedhighlight" );
				}


				tr.Cells.Add( td );
				tbl.Rows.Add( tr );
			}


			StringWriter sw = new StringWriter( );
			HtmlTextWriter htw = new HtmlTextWriter( sw );
			tbl.RenderControl( htw );
			return sw.ToString( );
		}
	}




	[
	Designer( typeof( ContextMenuTestDesigner ) ),
	ToolboxData( "&lt;{0}:ContextMenuTest runat=\"server\"&gt;&lt;/{0}:ContextMenuTest&gt;" )
	]
	public class ContextMenuTest : System.Web.UI.WebControls.WebControl
	{
		public ContextMenuTest( ) : this( String.Empty )
		{
		}


		public ContextMenuTest( string id ) : base( HtmlTextWriterTag.Div ) // base( "c:ContextMenuTest" )
		{
			this.ID = id;
		}
	}

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

The attributes for ContextMenuTest got escaped by the forum software, should be:

[
Designer( typeof( ContextMenuTestDesigner ) ),
ToolboxData( "<{0}:ContextMenuTest runat=\"server\"></{0}:ContextMenuTest>" )
]

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

That's because your ContextMenuTestDesigner class is full of errors.

Delete
Designer(typeof(ContextMenuTestDesigner)),
before
public class ContextMenuTest : System.Web.UI.WebControls.WebControl
{
and everything works OK

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Why not to use (just Drag&Drop from ToolBox) ready Menu or TreeView?

I do not quite understand your logic drawing on Design surface without support or link to any Run- or Design-time properties

Even if you want to invent biecycle reimplementing what already exists. Yo can compose (e.g. Composite or DropDownList, etc.) custom control at design-time and draw it symply by
   public class CompositeControlDesigner : ControlDesigner {
        public override string GetDesignTimeHtml() {
            // Retrieve the controls to ensure they are created.
            ControlCollection controls = ((Control)Component).Controls;
            return base.GetDesignTimeHtml();
        }

        public override void Initialize(IComponent component) {
            if (!(component is Control) &&
                !(component is INamingContainer)) {
                throw new ArgumentException(
                    "Component must be a container control.",
                    "component");
            }
            base.Initialize(component);
        }
    }
}

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Thanks for your reply.

1) The sample I showed you is just an example. I wrote it specifically to illustrate the problem I'm having. It is not my actual code. It is just an example of the problem I'm experiencing. The control does nothing on purpose, to show the problem with the designer, it's not meant to be executed at runtime.

2) Yes, I'm sure there's a better option, but I don't have that luxury unfortunately. I work at a company that is upgrading our existing code from .Net 1.1 to 2.0, with as little rewritting as possible.

3) You mention that the designer code has problems. What problems? Everything looks ok to me. It doesn't need to access anything in the control as far as I know, it's simply meant to be a non-functional representation of the control.

Given the sample code I provided, why can I not move it around in the designer? Why does it stay at the top left and only allow me to drag it into containers? What am I missing. This worked in 1.1.

Thanks

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

<div>Well, your ContextMenuTestDesigner doesn''t render ContextMenuTest control.
It does render content (and not even control) of another webcontrol (Table tbl) overwriting by it yout ContextMenuTest control</div> <div>This rendering is not related (or even persisted) into ContextMenuTest custom control in any way

My advise is to form your custom control in order to render and not vice versa (to render it in order to form) </div> <div> </div>

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

GetDesignTimeHtml method should return the HTML generated by the control at run time by calling the control's RenderControl method.

Once againg, check the snippet I provided above!

BTW Try to Right Click ---> Add New Item-->Component ---> Web Custom Control

The following class is created

namespace ClassLibrary1
{
partial class CountControls
{
private System.ComponentModel.IContainer components = null;

/// <summary>
/// Clean up any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
}
#region Component Designer generated code

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>

    private void InitializeComponent()
    {
        components = new System.ComponentModel.Container();
    }
#endregion
}
}

Where is it (Required method for Designer support )?

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Forget what I wrote after BTW.
You should have run-time HTML generated in ContextMenuTest class and as final step the same mimicked in GetDesignTimeHtml () and not vice versa

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Thanks for your responses, but I don't believe your assumptions are correct. You can render absolutely anything you want from GetDesignTimeHtml, and you don't have to render a single thing from the actual control, since the designer overrides it and we're not actually rendering the control at runtime.

I have determined that the problem is actually related to WebControl.AddAttributesToRender.

This method seems to add css positioning information to the control's main tag that allows it to move around in the designer. However, I don't know where it's getting those values from. ControlStyle is empty. Attributes is empty. There's something tricky going on in this function.

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Found it. Once I copied the control's Attributes.CssStyles to the Attributes.CssStyles of the design-time main control, it started positioning correctly and all is well with the cosmos.

Thanks.

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

what your missing is that the new default is to wrap everything in a div, but you are not rendering that div. you drag it around, and the properties get set, but you are rendering it inline without positioning (from your snippet), so it moves back to top-left (inline display).

In your rendered output, you need to set style="position:absolute; top:yyy; left:xxx" etc from your target control if it's not empty and apply it to your design-time output. Also double check that you aren't using any deprecated functionality in your designer, since you are porting existing code.

Lastly, you can always try posting the whole source (since I've been chastised for encouraging members to e-mail me such things) and not just what seems to be the relevant portion, as well as a sample host-page, if it behaves any differently according to host.

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Phlow
Found it. Once I copied the control's Attributes.CssStyles to the Attributes.CssStyles of the design-time main control, it started positioning correctly and all is well with the cosmos.

Congratulations!!!!!!!!

What do you call "design-time main control" in terms of the code that you posted?

Is it possible to give more exact snippet to reproduce your success?

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Sure, here's the same code I posted above, except I've added the copying of the CssStyle collection to make it work:

public class ContextMenuTestDesigner : System.Web.UI.Design.ControlDesigner
	{
		public ContextMenuTestDesigner( )
		{
		}


		public override bool AllowResize
		{
			get { return false; }
		}


		public override string GetDesignTimeHtml( )
		{
			Table tbl = new Table( );
			tbl.CellPadding = 1;
			tbl.CellSpacing = 1;
			tbl.Style.Add( HtmlTextWriterStyle.BackgroundColor, "menu" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderCollapse, "collapse" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderStyle, "outset" );
			tbl.Style.Add( HtmlTextWriterStyle.BorderWidth, "2px" );
			tbl.Style.Add( HtmlTextWriterStyle.Display, "block" );
			tbl.Style.Add( HtmlTextWriterStyle.FontSize, "8pt" );
			tbl.Style.Add( HtmlTextWriterStyle.FontFamily, "Microsoft Sans Serif, Verdana, Arial, Helvetica" );
			tbl.Style.Add( HtmlTextWriterStyle.Padding, "1px" );

			ContextMenuTest ctxMenu = this.Component as ContextMenuTest;
			foreach( string strKey in ctxMenu.Attributes.CssStyle.Keys )
			{
				tbl.Attributes.CssStyle.Add( strKey, ctxMenu.Attributes.CssStyle[strKey] );
			}
			for( int i = 1; i <= 10; i++ )
			{
				TableRow tr = new TableRow( );
				TableCell td = new TableCell( );

				if( (i % 3) != 0 )	// 2 items, then a separator
				{
					WebControl wc = new WebControl( HtmlTextWriterTag.Div );
					if( i == 2 )	// hilight 2nd item
					{
						wc.Style.Add( HtmlTextWriterStyle.BackgroundColor, "highlight" );
						wc.Style.Add( HtmlTextWriterStyle.Color, "highlighttext" );
					}
					else
					{
						// alternate disabled look
						wc.Style.Add( HtmlTextWriterStyle.Color, ((i % 2) != 0) ? "black" : "inactivecaptiontext" );
					}
					wc.Style.Add( HtmlTextWriterStyle.Cursor, "default" );
					wc.Style.Add( HtmlTextWriterStyle.Overflow, "visible" );
					wc.Style.Add( HtmlTextWriterStyle.Padding, "2px 18px 2px 14px" );
					wc.Style.Add( HtmlTextWriterStyle.Width, "100%" );
					

					LiteralControl lc = new LiteralControl( );
					lc.Text = "Menu Item " + i.ToString( );
					
					wc.Controls.Add( lc );
					td.Controls.Add( wc );
				}
				else
				{
					td.Height = Unit.Pixel( 0 );
					td.Style.Add( "border-top", "1px solid threedshadow" );
					td.Style.Add( "border-bottom", "1px solid threedhighlight" );
				}

				tr.Cells.Add( td );
				tbl.Rows.Add( tr );
			}

			StringWriter sw = new StringWriter( );
			HtmlTextWriter htw = new HtmlTextWriter( sw );
			tbl.RenderControl( htw );
			return sw.ToString( );
		}
	}


	[
	Designer( typeof( ContextMenuTestDesigner ) ),
	ToolboxData( "<{0}:ContextMenuTest runat=\"server\"></{0}:ContextMenuTest>" )
	]
	public class ContextMenuTest : System.Web.UI.WebControls.WebControl
	{
		public ContextMenuTest( ) : this( String.Empty )
		{
		}

		public ContextMenuTest( string id ) : base( HtmlTextWriterTag.Div ) // base( "c:ContextMenuTest" )
		{
			this.ID = id;
		}
	}

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

For my part at least, an item for the VS wish-list would be the ability to view the designer's source markup. As it is, we're flying blind.

FWIW...

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

<div>Ok, I have added
ContextMenuTest ctxMenu = this.Component as ContextMenuTest;
foreach (string strKey in ctxMenu.Attributes.CssStyle.Keys)
{
tbl.Attributes.CssStyle.Add(strKey, ctxMenu.Attributes.CssStyle[strKey]);
}
to
GetDesignTimeHtml() of ContextMenuTestDesigner
(and I have not checked the rest)

What is going on is that design-time is quering
ContextMenuTest custom control and inserting the corresponding values.

In design-time the value of string str = sw.ToString( ) (from return of GetDesignTimeHtml)

is:
1)
undefinedf in Source view of aspx
<cc1:ContextMenuTest ID="ContextMenuTest1" runat="server" Style="left: 42px; position: absolute; top: 97px" />
then
str "<table cellspacing=\"1\" cellpadding=\"1\" border=\"0\" style=\"LEFT:42px;POSITION:absolute;TOP:97px;background-color:menu;border-collapse:collapse;border-style:outset;border-width:2px;display:block;font-size:8pt;font-family:Microsoft Sans Serif, Verdana, Arial, Helvetica;padding:1px;\">\r\n\t<tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 1\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"background-color:highlight;color:highlighttext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 2\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 4\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 5\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 7\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 8\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 10\r\n\t\t</div></td>\r\n\t</tr>\r\n</table>"

2)
if in Source view of aspx
<cc1:ContextMenuTest ID="ContextMenuTest1" runat="server" Style="left: 42px; position: absolute; top: 97px" />
then
str contains:
"<table cellspacing=\"1\" cellpadding=\"1\" border=\"0\" style=\"background-color:menu;border-collapse:collapse;border-style:outset;border-width:2px;display:block;font-size:8pt;font-family:Microsoft Sans Serif, Verdana, Arial, Helvetica;padding:1px;\">\r\n\t<tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 1\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"background-color:highlight;color:highlighttext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 2\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 4\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 5\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:black;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 7\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 8\r\n\t\t</div></td>\r\n\t</tr><tr>\r\n\t\t<td style=\"height:0px;border-top:1px solid threedshadow;border-bottom:1px solid threedhighlight;\"></td>\r\n\t</tr><tr>\r\n\t\t<td><div style=\"color:inactivecaptiontext;cursor:default;overflow:visible;padding:2px 18px 2px 14px;width:100%;\">\r\n\t\t\tMenu Item 10\r\n\t\t</div></td>\r\n\t</tr>\r\n</table>"
3)
you may see (in very time- and resource-consuming manner) what is output while you move your control
Well, it is clear that if there is no code
    foreach (string strKey in ctxMenu.Attributes.CssStyle.Keys)
   { tbl.Attributes.CssStyle.Add(strKey, ctxMenu.Attributes.CssStyle[strKey]); }
then there is no way to have synchronization between control and its design view.

Here I can only to return to the advise I gave from the beginning
construct control and visualize it on design surface (and not vice versa)

How to debug at design-time,
you may see here
''how to debug a custom web control" post
http://forums.asp.net/thread/1516665.aspx

with a few additional comments.
Second instance of VS (and custom control design-time debugging) really starts only if your   code with breakpoint is currently opened.

The breakpoint is hit when you switch in second VS2005 from source view to design view.
(if you insert your control manually to aspx)

</div>

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

Errata in 2) should be
<cc1:ContextMenuTest ID="ContextMenuTest1" runat="server" />
without style=

I am really angry why I cannot edit my own posts.
I am rejected any rights on my own contributions... thinking to abandon this forum

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

I'm not quite sure I'm following you...

Are you talking about displaying a context menu item while in Design View that, when activated, displays the design-time HTML?

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

I continued to respond to the original question,
i.e. that original version of code was throwing HTML markup on design surface without any connection/synchronization with control,
so it even did n''t have any place to persist coordinates for moving the design-time representation

Phlow presented solution of introducing
ContextMenuTest ctxMenu = this.Component as ContextMenuTest;
foreach (string strKey in ctxMenu.Attributes.CssStyle.Keys)
{
tbl.Attributes.CssStyle.Add(strKey, ctxMenu.Attributes.CssStyle[strKey]);
}
into GetDesignTimeHtml() of ContextMenuTestDesigner
after which the design-time representation of ContextMenuTest control got ability to move since it really already has been connected by this to real control

ContextMenuTest is the custom control class of original question. <div>
As I understood you call by "context menu" the smart tags of a custom control.
In this case there is no smart tags whatsoever, the names is due to the names of classes presented by PhLow
</div>

Re: Custom control can't be moved from the top left corner in the designer. (.NET 2.0 VC#2005)

I continued to respond to the original question,
i.e. that original version is throwing HTML amrkup on design surface without any connection/synchronization with control,
so it even doesn''t have any place to persist coordinates for moving

Phlow presented solution of introducing
ContextMenuTest ctxMenu = this.Component as ContextMenuTest;
foreach (string strKey in ctxMenu.Attributes.CssStyle.Keys)
{
tbl.Attributes.CssStyle.Add(strKey, ctxMenu.Attributes.CssStyle[strKey]);
}
into GetDesignTimeHtml() of ContextMenuTestDesigner
after which the ContextMenuTest control got ability to move since it really already has been connected by this to real control

ContextMenuTest is the custom control class of original question. <div>
As I understood you call by "context menu" the smart tags of a custom control.
In this case there is no smart tags whatsoever, the names are due to the names of classes in the code presented by PhLow
</div>