Tile Control Tutorial. Step 5: Create a Detail Page

Dec 28, 2020
2 minutes to read

In this step, you start with the fully configured and decorated tiles on the main application form. A click on the OpenDevExpressURL tile opens the official DevExpress site, and the HouseDetailPage tile displays a number of successive frames whose content is loaded from the provided Houses dataset.

Since the Tile Control allows you to use any TWinControl descendant as a Detail Page, add a new frame to the demo application project. Change the frame’s automatically generated name to HousesDetailPage in the Object Inspector and save the source file as HousesDetailFrame.pas (or HousesDetailFrame.cpp in C++Builder).

In the Delphi project, insert the following line to the ‘var’ clause of the HousesDetailFrame unit:

delphi

ADetailPage: THousesDetailPage;

In the C++Builder project, make sure that the pointer to a frame instance is declared in the HousesDetailFrame.h header file:

cpp

extern PACKAGE THousesDetailPage *ADetailPage;

To be able to access the newly created frame from code, add the HousesDetailFrame unit to the MainForm unit’s uses section (or include the HousesDetailFrame.h file to the MainForm.h header in C++Builder).

Then, assign the HousesDetailPage frame as the HouseDetailPage tile’s Detail Page by using the DetailOptions.DetailControl property in the Object Inspector :

Then, handle the HouseDetailPage tile’s OnActivateDetail event:

Delphi
C++

delphi

procedure TTileControlDemo.HouseDetailPageActivateDetail(Sender: TdxTileControlItem);
begin
  if(Sender.DetailOptions.DetailControl = nil) then
    Sender.DetailOptions.DetailControl := ADetailPage;
end;

cpp

void __fastcall TTileControlDemo::HouseDetailPageActivateDetail(TdxTileControlItem *Sender)
{
  if(Sender->DetailOptions->DetailControl == NULL)
    Sender->DetailOptions->DetailControl = ADetailPage;
}

Run the demo application. A blank detail page unfolds in response to a click on the HouseDetailPage tile:

Population of the detail page is discussed in the next step.