Getting Started with the DevExpress VCL TileControl

In my previous posts I discussed the new “Server Mode” feature for the VCL grid from DevExpress found in version 12.1 of their VCL controls. Another great new feature found in version 12.1 is the new TileControl. This control lets any VCL developer start creating Metro-inspired UI’s in very little time with little-or-no code. Let’s see how!

Start off by creating a new VCL Forms Application. Afterward, create two new VCL forms by clicking File > New > VCL Form. Ensure all three forms will be automatically created by clicking Project>Options>Forms.

Switch to the Form2 and Form3 designers, setting their BorderStyle property to bsNone and Visible property to True. I also added a TShape to Form2 and Form3 with unique colors to make them easier to discern.

After customizing Form2 and Form3, switch back to the main form of the example, Form1. Under the “Dev Express” section of the Tool Palette, location the TdxTileControl and add it to the Form1 designer.

Right-click the TdxTileControl to display its context menu and use the Add Item menu item to add three tiles.

Select the first item in the TdxTileControl and inspect its properties. Expand the DetailOptions node. For DetailControl, select Form2. Note that you may need to add Unit2 and Unit3 to the uses clause of Unit1. Also, add a value for DetailOptions.Caption. Finally, set ShowTab to True.

Configure the second tile item in nearly the same way, only using Form3 instead of Form2.

For the third tile item, I’ll illustrate how to use a TFrame. Add a new TFrame to the project by clicking File>New>Other and selecting VCL Frame.

Switch to the designer for Frame1 and add another TShape with a unique color. Set the Align property on the TShape to alClient.

With the frame configured, switch back to the designer for Form1 and select the third tile item. Expand DetailOptions in the Object Inspector. This time leave DetailControl blank and set ShowTab to False. In the compiled example you’ll see the affect that the ShowTab property has.

Finally, click on the Events tab in the Object Inspector and add an event handler for OnClick.

In the event handler, use this small bit of code to check to see if DetailControl is assigned and, if not, create and assign an instance of TFrame4.

procedure TForm1.dxTileControl1dxTileControlItem3Click(
  Sender: TdxTileControlItem);
  if Sender.DetailOptions.DetailControl = nil then
    Sender.DetailOptions.DetailControl := TFrame4.Create(Self);

You’ll also need to add Unit4 to the uses clause of Unit1.

And that’s it! Run the sample and you’ll see your three tiles. You can rearrange them using drag-and-drop. Clicking any of the three tiles will animate in either Form2, Form3, or Frame4, depending on the tile. You’ll also see a nice set of tabs in the upper right. Here you’ll see that the third tile item did not get a tab due to setting ShowTab to false.

You can download the Delphi source code for this example here.

2 thoughts on “Getting Started with the DevExpress VCL TileControl

  1. Pingback: Adding Some Style to the VCL TileControl « Development Technobabble

  2. Stephen Aberle

    Thanks for the demo. I found that trying to play around with TdxTileControl and embedded forms like this led to all kinds of trouble in Delphi XE7. DevExpress notes that “the Tile Control is not supposed to work with forms as detail controls because it is unsafe in VCL to place forms into other controls” and recommends using frames instead. (See question and response here: Am I missing something?

    I’d love to incorporate TdxTileControl as the main form for an existing application but moving from forms to frames is not an option at this point — there are just too many to make converting feasible.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>