Tile Control Tutorial. Step 4: Create Multiple Tile Frames from a Dataset
- 5 minutes to read
In this step, you start with the fully decorated OpenDevExpressURL, LoanCalculator, and SystemInformation tiles on the main application form. OpenDevExpressURL opens the official DevExpress website if clicked.
This step discusses runtime creation of successively changing frames displayed by the HouseDetailPage tile. Alternatively, you can create frames for a tile at design time by using the Frames property in the Object Inspector. In this case, adjusting the appearance settings for individual frames is almost identical to the tile appearance customization discussed in the Step 2.
For the purpose of this demo there is a TClientDataSet component named Houses. This dataset has the Price, Beds, Baths, Appearance and Layout fields populated with the respective information and images of the multiple houses for sale. The Houses dataset automatically adds the HousesPrice, HousesBeds, HousesBaths, HousesAppearance, and HousesLayout objects corresponding to its respective fields. Creating and populating a dataset is outside the scope of this tutorial.
To create and decorate tile frames by using these dataset fields, handle the main form’s OnCreate event. Successively changing frames displayed by the HouseDetailPage tile are intended to show the appearance, the price, and the numbers of bathrooms and bedrooms in the respective house:
First, create a procedure that will handle the text visualization and positioning within the tile (or frame) area:
procedure TTileControlDemo.AssignTileText(ATileItemTextBlock: TdxTileControlItemText; AAlign: TdxTileItemInnerObjectAlignment; ABackgroundColor, AFontColor: TColor; AFontHeight: Integer; ATextValue: string);
begin
ATileItemTextBlock.Align := AAlign; // A text block position within the tile's area
ATileItemTextBlock.IndentHorz := 0; // A text block adjoins the tile's left or right border
ATileItemTextBlock.IndentVert := 0; // A text block adjoins the tile's top or bottom border
ATileItemTextBlock.Transparent := False; // A text block's background is visible
ATileItemTextBlock.Color := ABackgroundColor; // The text block's background color
ATileItemTextBlock.Font.Color := AFontColor;
ATileItemTextBlock.Font.Height := AFontHeight;
ATileItemTextBlock.Value := ATextValue; // A text string displayed by the text block
end;
The TileControlDemo form’s OnCreate handler is intended to cycle through all the House client dataset’s fields, creating and populating the HouseDetailPage tile’s frames one by one:
procedure TTileControlDemo.FormCreate(Sender: TObject);
var
AImage: TdxSmartImage;
ATileFrame: TdxTileControlItemFrame;
ATileText1, ATileText2: string;
begin
AImage := TdxSmartImage.Create; // Create a TdxSmartImage object to store an image extracted from the dataset
MainTileControl.BeginUpdate; // Stop control repainting before adding multiple frames to the tile
while not Houses.Eof do // Do while there are records in the dataset
begin
AImage.LoadFromFieldValue(HousesAppearance.Value); // Extract an image from a record to the TdxSmartImage object
ATileFrame := HouseDetailPage.Frames.Add; // Create a new tile frame
ATileFrame.ParentStyle := False; // Do not use the base tile's empty background
ATileFrame.Style.Texture := AImage; // Assign the loaded image to a frame
ATileFrame.Style.Stretch := smNoResize; // Do not change the image's height-to-width ratio
ATileText1 := ' ' + IntToStr(HousesBeds.Value) + ' Beds ' + #10 + IntToStr(HousesBaths.Value) + ' Baths ';
ATileText2 := ' ' + CurrToStrF(HousesPrice.Value, ffCurrency, 0) + ' ';
AssignTileText(ATileFrame.Text1, oaTopRight, clWebLimeGreen, clWhite, -18, ATileText1); // Set up the first (i.e., upper-right) text block
AssignTileText(ATileFrame.Text2, oaBottomLeft, clWebLimeGreen, clWhite, -18, ATileText2); // Set up the second (i.e., bottom-left) text block
Houses.Next; // Move to the next record within the dataset
end;
MainTileControl.EndUpdate; // Enable control repainting when complete
end;
In C++Builder, include DBTables.hpp to the main header file.
void __fastcall TTileControlDemo::FormCreate(TObject *Sender)
{
TdxSmartImage *AImage;
TdxTileControlItemFrame *ATileFrame;
TBlobStream *AImageStream; // A pointer to the intermediate image stream
UnicodeString ATileText1, ATileText2;
AImage = new TdxSmartImage; // Create a TdxSmartImage object to store an image extracted from the dataset
MainTileControl->BeginUpdate(); // Stop control repainting before adding multiple frames to the tile
do
{
AImageStream = static_cast<TBlobStream*>(Houses->CreateBlobStream(HousesAppearance, bmRead)); // Extract an image from a record
if(AImageStream != NULL)
AImage->LoadFromStream(AImageStream); // Load an image to a TdxSmartImage object
ATileFrame = HouseDetailPage->Frames->Add(); // Create a new tile frame
ATileFrame->ParentStyle = false; // Do not use the base tile's empty background
ATileFrame->Style->Texture = AImage; // Assign the loaded image to a frame
ATileFrame->Style->Stretch = smNoResize; // Do not change the image's height-to-width ratio
ATileText1 = " " + IntToStr(HousesBeds->Value) + " Beds \n " + IntToStr(HousesBaths->Value) + " Baths ";
ATileText2 = " " + CurrToStrF(HousesPrice->Value, ffCurrency, 0) + " ";
AssignTileText(ATileFrame->Text1, oaTopRight, (TColor)clWebLimeGreen, clWhite, -18, ATileText1); // Set up the first (i.e., upper-right) text block
AssignTileText(ATileFrame->Text2, oaBottomLeft, (TColor)clWebLimeGreen, clWhite, -18, ATileText2); // Set up the second (i.e., bottom-left) text block
Houses->Next(); // Move to the next record within the dataset
} while(!Houses->Eof); // Do while there are records in the dataset
MainTileControl->EndUpdate(); // Enable control repainting when complete
}
Run the demo application and see how the frames replace each other. Additionally, you may want to adjust the animation settings (including the AnimationInterval and AnimationMode properties) in the Object Inspector:
The Step 8 describes how to change the animation mode programmatically.
The next step explains how to add a detail page to the HouseDetailPage tile.