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, place the company logo above the created text block. Select the required image by using the Image Picker invoked by clicking the ellipsis button to the right of the tile’s Glyph.Image property in the Object Inspector:
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.