FireMonkey Gradient, GradientPoint and GradientPoints C++ Code Examples

By: Tim DelChiaro

Abstract: This example demonstrates the usage of several properties of TGradient, TGradientPoint, and TGradientPoints in FireMonkey in C++Builder








This example demonstrates the usage of several properties of TGradientTGradientPoint, and TGradientPoints.

To replicate this example, create a new FireMonkey HD application and place the following components on your form:

Use the Object Inspector to:

  • Set the Fill.Kind property of all the rectangles and ellipses to bkGradient.
  • Set the names and the text for the labels to contain relevant information. For example, the name of the label in front of the track bar should be LBL_Offset and the text should be set to Offset.
  • Set the Enabled property to False for all the TRectangle and TEllipse objects.
  • Set the Fill kind and color for the form.
  • Set the Min and Max properties of the TTrackBar to 0 and 1, respectively.

The form should look like in the following image.

File:TGradientPoint2 new.JPG


Create two TGradient variables and initialize them in the OnCreate event handler of your Form. Destroy them in the OnDestroy event handler.

// ---------------------------------------------------------------------------
void __fastcall TForm2::InitShape(TShape* Shape, TGradient* Gradient, int Index,
	float Offset) {
	Shape->Fill->Gradient->Points->Points[Index]->Offset = Offset;
// ---------------------------------------------------------------------------
void __fastcall TForm2::FormCreate(TObject *Sender) {
	this->Caption = "FMX GradientPoints";
	MyLinearGradient = new TGradient;
	MyRadialGradient = new TGradient;
	MyLinearGradient->Style = TGradientStyle::gsLinear;
	MyRadialGradient->Style = TGradientStyle::gsRadial;
	MyLinearGradient->Color = claRed;
	MyLinearGradient->Color1 = claGreen;
	MyRadialGradient->Color = claRed;
	MyRadialGradient->Color1 = claGreen;
	InitShape(Ellipse1, MyRadialGradient, 0, 0.00);
	InitShape(Ellipse2, MyRadialGradient, 0, 0.25);
	InitShape(Ellipse3, MyRadialGradient, 0, 0.50);
	InitShape(Ellipse4, MyRadialGradient, 0, 0.75);
	InitShape(Ellipse5, MyRadialGradient, 0, 1.00);
	InitShape(Ellipse6, MyRadialGradient, 1, 0.00);
	InitShape(Ellipse7, MyRadialGradient, 1, 0.25);
	InitShape(Ellipse8, MyRadialGradient, 1, 0.50);
	InitShape(Ellipse9, MyRadialGradient, 1, 0.75);
	InitShape(Ellipse10, MyRadialGradient, 1, 1.00);
	InitShape(Rectangle1, MyLinearGradient, 0, 0.00);
	InitShape(Rectangle2, MyLinearGradient, 0, 0.25);
	InitShape(Rectangle3, MyLinearGradient, 0, 0.50);
	InitShape(Rectangle4, MyLinearGradient, 0, 0.75);
	InitShape(Rectangle5, MyLinearGradient, 0, 1.00);
	InitShape(Rectangle6, MyLinearGradient, 1, 0.00);
	InitShape(Rectangle7, MyLinearGradient, 1, 0.25);
	InitShape(Rectangle8, MyLinearGradient, 1, 0.50);
	InitShape(Rectangle9, MyLinearGradient, 1, 0.75);
	InitShape(Rectangle10, MyLinearGradient, 1, 1.00);
// ---------------------------------------------------------------------------
void __fastcall TForm2::FormDestroy(TObject *Sender) {
	delete MyLinearGradient;
	delete MyRadialGradient;
// ---------------------------------------------------------------------------

At this point, the form should look like in the following image.


Write event handlers for the first rectangle's OnMouseEnter and OnMouseLeave events. Use these handlers for all the other shapes by selecting, from the Object Inspector,Rectangle1MouseEnter and Rectangle1MouseLeave for their TRectangle.OnMouseEnter and TRectangle.OnMouseLeave events, respectively.

// ---------------------------------------------------------------------------
void __fastcall TForm2::Rectangle1MouseEnter(TObject *Sender) {
	TGradientPoints* Points;
	TShape* MyShape;
	MyShape = (TShape*)Sender;
	MyShape->Enabled = true;
	Points = MyShape->Fill->Gradient->Points;
	Edit1->Text = AlphaColorToString(Points->Points[0]->Color);
	Edit2->Text = AlphaColorToString(Points->Points[1]->Color);
	TrackBar1->Value = Points->Points[0]->Offset;
	TrackBar2->Value = Points->Points[1]->Offset;
	LBL_Offset1->Text = FloatToStrF(Points->Points[0]->Offset, ffFixed, 6, 2);
	LBL_Offset2->Text = FloatToStrF(Points->Points[1]->Offset, ffFixed, 6, 2);
// ---------------------------------------------------------------------------
void __fastcall TForm2::Rectangle1MouseLeave(TObject *Sender) {
	TShape* MyShape;
	MyShape = (TShape*)Sender;
	MyShape->Enabled = false;
	Edit1->Text = "\0";
	Edit2->Text = "\0";
	LBL_Offset1->Text = "\0";
	LBL_Offset2->Text = "\0";
// ---------------------------------------------------------------------------

The result is an application that shows the colors of a gradient by accessing its Points property and the offset of the gradient's starting or ending point. When the mouse cursor hovers over an object, the first TEdit shows the name of the starting color and the second TEdit shows the name of the ending color of the gradient. The TTrackBar objects have the same value as the Offset of a specific gradient point.

The second Ellipse is enabled: File:GradientPoint3_new.JPG

The eighth Rectangle is enabled: File:GradientPoint4_new.JPG


Server Response from: ETNASC01