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);
begin
  if Sender.DetailOptions.DetailControl = nil then
    Sender.DetailOptions.DetailControl := TFrame4.Create(Self);
end;

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.

Advertisements

One thought on “Getting Started with the DevExpress VCL TileControl

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s