Web Container

The Container is a special control that can contain other controls (including other Containers). A Container can be used to:

• Organize groups of controls into reusable interface components
• Create custom controls made up of other controls
• Increase encapsulation and simplify complex web page layouts
• Create dynamic web page layouts

To use a Container on a web page, you first have to add one to your project using the Insert ↠ Container Control menu from the Insert button or menu.

When you click on a Container in the Navigator, a Layout Editor very similar to the Web Page Layout Editor appears. In this Layout Editor, you can add controls to the Container.

You have two ways to add a Container to your web page layout. First, you can drag it from the Navigator onto the Web Page Layout Editor. Or you can find it in the Library in the Project Controls section and drag it from there to the Web Page Layout Editor.

A Container itself is invisible in built applications. Your application only see the controls on the Container and not the Container itself.

Containers are commonly used to simplify web page layouts. In addition to adding a Container directly to your layout, you can also add Containers dynamically at run-time.

Dynamically Adding Containers at Run-Time

Use the EmbedWithin method to add a Container that you've added to your project to a Web Page at runtime. This code in the Shown event handler of a Web Page adds a Container to the top-left corner of the page:

Var cc As New MyContainer
cc.EmbedWithin(Self, 100, 100, cc.Width, cc.Height)

To remove a container, you call its Close method. This means you'll need to keep a reference to the container so rather than declaring a variable to it in a method (which won't exist in other methods), so you should instead use a property. This code adds a container to a page using an existing properfy of the page (MainContainer As MyContainer):

MainContainer = New MyContainer
MainContainer.EmbedWithin(Self, 0, 0, MainContainer.Width, MainContainer.Height)

This code in a button's Presssed event handler can now remove the container:

If MainContainer <> Nil Then
MainContainer.Close
End If

Example Projects

These projects demonstrate ways to use Container Controls:

• Examples/Web/Containers/ContainerControlDynamicExample
• Examples/Web/Containers/ContainerControlExample
• Examples/Web/Containers/ScrollingContainer
• Examples/Web/Containers/WebGridContainer

See Also

WebContainer class