Tile Detail Pages
- 3 minutes to read
With the Tile Control, you can add any custom functionality for your tiles, allowing end-users to invoke it with clicks or taps (also called tile activation). You can visualize a tile activation result and show relevant information within an additional page called detail page. This page unfolds automatically in response to a tile activation event. You can associate a tile item with a detail control (a TWinControl descendant), which will be automatically embedded into the item’s detail page on display, occupying this page entirely. You can have as many detail controls per tile item as required, and associate them dynamically. In addition to a detail control, you can specify the caption of a tab that will identify the page and provide access to page contents.
Tile Control Specifics
Tabs are displayed between the text and glyph of the Tile Control title. End-users can click tabs to navigate to the corresponding detail pages, or click the Back button (displayed either in the detail page title or the top action bar) to return to the main page that displays tiles. Detail page tabs always reside in one row.
If the Tile Control is too narrow to display all tabs, the title displays the arrow buttons. To scroll tabs into view, either pan them or click these buttons.
Tile Bar Control Specifics
The Tile Bar Control displays a detail page below, to the left of, to the right of, or above the scrollable row of tiles, depending on the control’s positioning specified by the OptionsView.Position property. The currently active page is visible as long as there is at least one detail page associated with a tile.
The table below lists members that affect the main characteristics of detail pages.
| Characteristic | Description |
|---|---|
| Visibility | Handle a tile item’s OnActivateDetail and OnDeactivateDetail events to respond to showing or closing the detail page. To programmatically show or close this page, call the item’s ActivateDetail and DeactivateDetail methods or use the Tile Control’s ActiveDetail property. Use the item’s DetailOptions.ShowTab property to control the visibility of the detail page’s tab caption. |
| Contents | Use a tile item’s DetailOptions.DetailControl property to associate a detail control with the item’s detail page or dynamically change the property value. For instance, you can associate individual tile frames with various detail controls. To accomplish this, handle the OnActiveFrameChanged event to modify the DetailOptions.DetailControl property value correspondingly. |
| Appearance | Use the Tile Control’s Title.Font, Title.TabsFontSize, Title.TabsTextColor, Title.TabsActiveTextColor, and Title.TabsHotTextColor properties to customize the appearance of tab captions. |
| Animation | The Tile Control’s OptionsDetailAnimate property. |