Tile Control Tutorial. Step 2: Customize Individual Tiles
- 2 minutes to read
In this step, you start with the prepared tile layout in the TdxTileControl component.
First, customize the appearance of the OpenDevExpressURL, LoanCalculator, and SystemInformation tiles. Since individual tiles provide the Style settings identical to those provided by the Tile Control, customize the OpenDevExpressURL tile’s gradient settings in the same manner as in the previous step:
Then, add a text block designating the URL opened by a click on the tile. To do so, assign “devexpress.com” to the Text1.Value property in the Object Inspector. Center the created inscription within the tile, both horizontally and vertically, by setting the Text1.Align property to oaMiddleCenter. Set the Text1.Font.Height property to -21 and add the fsBold attribute to the font’s Style to improve text readability.
To customize the tile’s appearance, click the ellipsis button to the right of the title’s Glyph.Image property in the Object Inspector. Select the required image in the Image Picker dialog:
Then, position the logo right above the centered text block by setting the Glyph.AlignWithText property to itaTop in the Object Inspector:
Finally, decrease the distance between the logo and text block by setting the Text1.IndentVert property to 0.
Then, customize the same visual settings of both the LoanCalculator and SystemInformation tiles in the same manner as you did with the OpenDevExpressURL tile. In this demo, the images used to decorate these two tiles, have transparent pixels, making them look like stencils on top of the tile base colors:
Giving a simple functionality to a tile is discussed in the next step.