ASPxPageControl Class

A navigation control made up of multiple tabbed pages.

Assembly: DevExpress.Web.v19.1.dll

Declaration

C#
VB.NET

public class ASPxPageControl :
    ASPxTabControlBase,
    ICallbackEventHandler,
    IEndInitAccessorContainer

Public Class ASPxPageControl
    Inherits ASPxTabControlBase
    Implements ICallbackEventHandler,
               IEndInitAccessorContainer

The following members return ASPxPageControl objects:

Library	Related API Members
ASP.NET Controls and MVC Extensions	TabbedLayoutGroup.PageControl
ASP.NET Bootstrap Controls	BootstrapCardViewTabbedLayoutGroup.PageControl
	BootstrapGridViewTabbedLayoutGroup.PageControl
	BootstrapTabbedLayoutGroup.PageControl
eXpressApp Framework	RenderHelper.CreateASPxPageControl()

Remarks

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

Create a Page Control

Design Time

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

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

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.
Class name	ASPxClientPageControl
Access name	ClientInstanceName
Events	ASPxPageControl.ClientSideEvents

Features

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.