Tile Control Tutorial. Step 1: Create the Main Page Layout
- 3 minutes to read
The demo application created over the course of this tutorial, consists of two forms/units: the main form containing a single Tile Control with four tiles and the detail page (created as an independent frame), whose area is occupied by the scrollable house preview gallery (created as an additional Tile Control with different settings), and the image slider demonstrating the respective house layouts.
The first step explains how to create the “main window” layout for a Windows 8 UI-inspired application. Start with creating a new VCL Forms Application:
For the sake of convenience, change the automatically generated form’s name to TileControlDemo. Then, change the form’s caption to ‘Simple Tile Control Demo’.
Drop the TdxTileControl component from the Tool Palette onto the form. By design, the tile control occupies the entire client area of its parent form:
Since there will be two Tile Controls in this demo application, rename the added control to MainTileControl.
Switch to the Object Inspector and fill the Tile Control’s background with a gradient using the Style.Gradient, Style.GradientBeginColor, and Style.GradientEndColor properties as follows:
The Tile Control’s appearance changes accordingly:
All individual tiles within the Tile Control are arranged into logical groups. To create a group at design time, invoke the Tile Control’s context menu and click the “Add Group” menu item. As a result, the control displays a blue dash-dot outline that marks an area currently occupied by the created tile group. Click within the Tile Control area surrounding a newly created group. By doing so, you cancel group selection, and its outline changes from the blue dash-dot line to the black dash line. Note that group outlines are visible only at design time.
Now, use the group’s context menu to consecutively populate it with one large, two regular, and one extra large tile. By default, tile groups are populated horizontally, from left to right if there is insufficient space to fit all tiles vertically without scrolling:
Select the Tile Control and change its group layout from horizontal to vertical by setting the OptionsView.GroupLayout property to glVertical.
Then, increase the form’s height to fit the Tile Control’s content without scrolling:
To improve the appearance of the main application window, center the populated tile group, both horizontally and vertically, by checking the control’s OptionsView.CenterContentHorz and OptionsView.CenterContentVert properties in the Object Inspector:
Finally, the main Tile Control’s layout in the demo application is prepared for the next steps, in which the actual functionality is added to individual tiles:
Before proceeding to the next steps of this tutorial, change the automatically generated names of the created tiles in accordance with their intended purpose:
The OpenDevExpressURL tile will open the DevExpress official site with the default system browser;
The LoanCalculator and SystemInformation tiles will activate the Loan Calculator and System Information detail pages, respectively;
Finally, the HouseDetailPage tile will display a set of animated frames and activate the Houses detail page with specific parameters corresponding to the currently displayed frame.
Later on, you can use these names in code in the same manner as the names of individual components.
Note that, like group outlines, the tile names are displayed only at design time.
Run the demo application to see how the created tile layout is displayed:
Tile appearance customization basics are covered in the next step.