Touch UI / Appearance
Page Header

Page headers are displayed at the top of every page to inform the user of which view or control they are currently working with. The picture below displays the page header of “Orders”, visible below the page title.

The "Orders" page header is displayed below the title bar.

In pages that display data views, the header is hidden on two conditions:

1. When the current view is the entry point to the page.

The "Customers" page header is hidden due to the fact that this view is the entry point to the page.

2. When the text of the page header matches the title of the page displayed on the menu bar at the top of the screen. For example, the child view of Employees on the Employees page in a sample Northwind app will not have a page header.

The child view does not show page header as it has the same text as the page title.

Hiding the Page Header

The header can also be hidden on a per-page basis.

Start the Project Designer. In the Project Explorer window, double-click on the Customers page.

Customers page in the Project Explorer.

Specify the following:

Property Value
Custom Style Tall

Save the page, and press Browse on the toolbar to generate the app and open the page in your default browser. Select a customer, and tap See All next to the list of orders. Note that the “Orders” page header is not displayed.

Customers page does not display any page headers.

Page Headers in Custom User Controls

The page header text for user controls is derived from the data-activator tag. By default, this tag is set to the name of the user control.

User controls show the control name as page header by default.

The header text can be specified using the data-page-header tag. For example, let’s specify the page header text for a freshly created user control. Open the user control file in Visual Studio and make the following highlighted addition:

...
<!-- 
    This section provides a sample markup for Touch UI user interface. 
-->
<div id="TestUserControl" data-app-role="page" data-activator="Button|TestUserControl" data-page-header="Custom Header">
    <div data-role="content">
        <p>
            Markup of <i>TestUserControl</i> custom user control for Touch UI.
        </p>
    </div>
</div>
...

Save the file and refresh the web page. Note that the page header text has been changed.

Custom header text has been specified for the user control page header.

The page header can be hidden by specifying “false” for the data-page-header tag. Make the following change:

...
<!-- 
    This section provides a sample markup for Touch UI user interface. 
-->
<div id="TestUserControl" data-app-role="page" data-activator="Button|TestUserControl" data-page-header="false">
    <div data-role="content">
        <p>
            Markup of <i>TestUserControl</i> custom user control for Touch UI.
        </p>
    </div>
</div>
...

Save the file and refresh. The page header will not be present.

The page header has been hidden on this user control page.