Xojo Documentation Xojo Documentation

The Container Control is a special control that can contain any other control (including other Container Controls). A Container Control 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 Control 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 Control 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 Control.

You have two ways to add a Container Control 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 Control itself is invisible in built applications. Your application only see the controls on the Container Control and not the Container Control itself.

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

Using Container Controls in a Web App

Dynamically Adding Container Controls at Run-Time

Use the EmbedWithin method to add a Container Control 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 Control to the top-left corner of the page:

Var cc As New MyContainer
cc.EmbedWithin(Self, 0, 0)

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)

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

If MainContainer <> Nil Then
MainContainer.Close
End If

Managing Screen Layouts

Example Projects

These projects demonstrate ways to use Container Controls:

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

See Also

WebContainer class; UserGuide:Web UI topic