Version

Setting Up WebResizingExtender to Work with a Panel

WebResizingExtender™ is a new type of extender control that is based on the Microsoft® ASP.NET 2.0 AJAX Extensions. The control has no run-time visual presence by itself; it must be attached to either a panel or container element. This topic will guide you through the process of setting up WebResizingExtender to work with a panel.

  1. Create a new ASP.NET AJAX CTP-Enabled Web site. Alternatively, you can follow Set Up an ASP.NET Web Site to Run ASP.NET AJAX to add the ASP.NET AJAX functionality to an existing ASP.NET Web Site that you have.

  2. Switch to the Design view. You will notice the ScriptManager component already on the form. This component must not be moved around, for it must be the first element on the form in order for ASP.NET AJAX to work properly.

  3. From the toolbox, drag a Microsoft Panel, and place it below the ScriptManager component on the form.

  4. To make the panel display better at run time, in the Properties window, change the BorderColor property to Black, and set the BorderWidth property to 1px.

  5. From the toolbox, drag a WebResizingExtender component and place it below the panel that is on the form.

  6. Select the newly created WebResizingExtender. In the Properties window set the TargetControlID property to value of "Panel1". This is the name of the panel that was created in step 3.

  7. Build and run the Web form. You will see the panel and in the lower-right corner, you will see the resize handle. When you mouse over this handle, your cursor changes from a normal arrow into the resize arrow. If you click and drag the handle, the panel will resize itself.

Additional Information

You can customize the resize handle by specifying a different color, or even placing an image in the handle. For more information, see Modify the Resize Handle.

Also, you can add an effect where the border of the resizing control is highlighted by setting the ResizeBorderColor property and specifying at minimum a value of 1 for the ResizeBorderWidth property.