ASPxPageControl Class

A navigation control made up of multiple tabbed pages.

Assembly: DevExpress.Web.v24.2.dll

Declaration

C#
VB.NET

public class ASPxPageControl :
    ASPxTabControlBase,
    ICallbackEventHandler,
    IEndInitAccessorContainer

Public Class ASPxPageControl
    Inherits ASPxTabControlBase
    Implements ICallbackEventHandler,
               IEndInitAccessorContainer

Library	Related API Members
XAF: Cross-Platform .NET App UI & Web API	RenderHelper.CreateASPxPageControl()
ASP.NET Web Forms Controls	TabbedLayoutGroup.PageControl

Remarks

The ASPxPageControl allows you to display a set of tabbed pages with custom content.

PageControl Overview

View Example: Page Control for ASP.NET Web Forms - How to create a wizard interface

Create a Page Control

Design Time

The ASPxPageControl control is available on the DX.24.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

PageControl in Toolbox

Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.

Note

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

ASPX

<dx:ASPxPageControl ID="citiesTabPage" runat="server" >
    <TabPages>
        <dx:TabPage Text="London">
            <ContentCollection>
                <dx:ContentControl ID="ContentControl1" runat="server">
                    <dx:ASPxImage runat="server" ID="dxImage_London" ImageUrl="~/Content/TabControl/Images/Cities/TowerBridge.jpg" CssClass="dxtc-image-london"/>
                </dx:ContentControl>
            </ContentCollection>
        </dx:TabPage>
        <dx:TabPage Text="New-York">
            <ContentCollection>
                <dx:ContentControl ID="ContentControl2" runat="server">
                    <dx:ASPxImage runat="server" ID="dxImage_NewYork" ImageUrl="~/Content/TabControl/Images/Cities/BrooklynBridge.jpg" CssClass="dxtc-image-newyork" />
                </dx:ContentControl>
            </ContentCollection>
        </dx:TabPage>
    </TabPages>
</dx:ASPxPageControl>

using DevExpress.Web;
...
ASPxPageControl pc = new ASPxPageControl();
pc.ID = "ASPxPageControl1";
Page.Form.Controls.Add(pc);

ASPxImage image1 = new ASPxImage();
image1.ID = "image1";
image1.ImageUrl = "~/Content/TabControl/Images/Cities/TowerBridge.jpg";
image1.AlternateText = "text 1";

ASPxImage image2 = new ASPxImage();
image2.ID = "image2";
image2.ImageUrl = "~/Content/TabControl/Images/Cities/TowerBridge.jpg";
image2.AlternateText = "text 2";

TabPage tp1 = new TabPage("tab 1", "name 1");
TabPage tp2 = new TabPage("tab 2", "name 2");

tp1.Controls.Add(image1);
tp2.Controls.Add(image2);

pc.TabPages.Add(tp1);
pc.TabPages.Add(tp2);

Imports DevExpress.Web
...
Private Sub SurroundingSub()
    Dim pc As ASPxPageControl = New ASPxPageControl()
    pc.ID = "ASPxPageControl1"
    Page.Form.Controls.Add(pc)
    Dim image1 As ASPxImage = New ASPxImage()
    image1.ID = "image1"
    image1.ImageUrl = "~/Content/TabControl/Images/Cities/TowerBridge.jpg"
    image1.AlternateText = "text 1"
    Dim image2 As ASPxImage = New ASPxImage()
    image2.ID = "image2"
    image2.ImageUrl = "~/Content/TabControl/Images/Cities/TowerBridge.jpg"
    image2.AlternateText = "text 2"
    Dim tp1 As TabPage = New TabPage("tab 1", "name 1")
    Dim tp2 As TabPage = New TabPage("tab 2", "name 2")
    tp1.Controls.Add(image1)
    tp2.Controls.Add(image2)
    pc.TabPages.Add(tp1)
    pc.TabPages.Add(tp2)
End Sub

Client-Side API

The ASPxPageControl‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientPageControl object (See demo).

Availability	Available by default.
Client object type	ASPxClientPageControl
Access name	ASPxPageControl.ClientInstanceName
Events	ASPxPageControl.ClientSideEvents

Tab Position

Use the TabPosition property to specify tabs position in the control - top, bottom, left, right.

ASPX

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" TabPosition="Bottom" ...>
    <TabPages>
        ...
    </TabPages>
</dx:ASPxPageControl>

Learn more

Tab Alignment

The TabAlign property allows you to align tabs in the defined position.

ASPX

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" TabAlign="Center" ...>
    <TabPages>
        ...
    </TabPages>
</dx:ASPxPageControl>

Learn more

Tab Scrolling

The page control allows you to scroll tabs in the tab header (ASPxPageControl.EnableTabScrolling).

ASPX

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" EnableTabScrolling="true" ...>
    <TabPages>
    ...
    </TabPages>
</dx:ASPxPageControl>

See demo

Templates

You can provide custom content for the page control. The following templates are available:

Learn more | See demo

Customizable Appearance

The control’s appearance can be customized via specific style properties, or by assigning a CSS class.

ASPX

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ...>
    <TabStyle Paddings-PaddingLeft="50px" Paddings-PaddingRight="50px"/>
    <ContentStyle>
        <Paddings PaddingLeft="20px"/>
    </ContentStyle>
    <TabPages>
    ...
    </TabPages>
</dx:ASPxPageControl>

Callbacks Support

The page control allows you to use the AJAX-based callback technology to perform round-trips to the server.

Use the page control’s ASPxTabControlBase.AutoPostBack property to control whether any end-user manipulation with the control’s elements (page tabs) requires a round trip to the server side for further processing.

Round trips to the server can be performed in the following ways:

standard postbacks (the whole page is refreshed)
the AJAX-based callback technology.

Use the ASPxPageControl.EnableCallBacks property to define how to perform round trips to server via the value.

See demo

Note

If you want to use a navigation control which only provides a tabbed interface but doesn’t contain any pages with child controls, consider using the ASPxTabControl control.