Tab
A newer version of this page is available. Switch to the current version.

ASPxPageControl Class

A navigation control made up of multiple tabbed pages.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll

Declaration

public class ASPxPageControl :
    ASPxTabControlBase,
    ICallbackEventHandler,
    IEndInitAccessorContainer

The following members accept/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.

<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>

Run Time

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);

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.

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