FierMonkeyのTStringGridのセルの描画をカスタマイズする

列ごとに右寄せ・中寄せ(1)

FireMonkeyのTStringGridのセルは、TEditを継承したTTextCellです。

TTextCellはTStringColumnのCreateCellControlメソッドで作成されるので、そのときにTextAlignプロパティを設定します。

このコードは、「TStringGrid の使い方」の記事をC++Builderに移植しました。

/**
 * セルの値を中寄せで表示する列
 */
class TStringColumn_Center : public Fmx::Grid::TStringColumn
{
public:
  __fastcall virtual TStringColumn_Center(System::Classes::TComponent* AOwner) : Fmx::Grid::TStringColumn(AOwner) { }
  __fastcall virtual ~TStringColumn_Center(void) { }
protected:
  virtual Fmx::Controls::TStyledControl* __fastcall CreateCellControl(void)
  {
    Fmx::Grid::TTextCell* textcell = dynamic_cast<Fmx::Grid::TTextCell*>(Fmx::Grid::TStringColumn::CreateCellControl());
    textcell->TextAlign = TTextAlign::taCenter;
    return textcell;
  }
};

/**
 * セルの値を右寄せで表示する列
 */
class TStringColumn_Right : public Fmx::Grid::TStringColumn
{
public:
  __fastcall virtual TStringColumn_Right(System::Classes::TComponent* AOwner) : Fmx::Grid::TStringColumn(AOwner) { }
  __fastcall virtual ~TStringColumn_Right(void) { }
protected:
  virtual Fmx::Controls::TStyledControl* __fastcall CreateCellControl(void)
  {
    Fmx::Grid::TTextCell* textcell = dynamic_cast<Fmx::Grid::TTextCell*>(Fmx::Grid::TStringColumn::CreateCellControl());
    textcell->TextAlign = TTextAlign::taTrailing;
    return textcell;
  }
};

使用例

//グリッドに中寄せの列を追加する
StringGrid1->AddObject(new TStringColumn_Center(StringGrid1));
//グリッドに右寄せの列を追加する
StringGrid1->AddObject(new TStringColumn_Right(StringGrid1));

サンプルプログラム

フォームにTStringGridを配置します。

コンストラクタでグリッドの設定を行います。

__fastcall TForm1::TForm1(TComponent* Owner)
  : TForm(Owner)
{
  // カラムを作成
  StringGrid1->AddObject(new TStringColumn_Center(StringGrid1));
  StringGrid1->AddObject(new TStringColumn_Right(StringGrid1));

  // カラムヘッダを設定
  StringGrid1->Columns[0]->Header = "中寄せ";
  StringGrid1->Columns[1]->Header = "右寄せ";

  // データ
  StringGrid1->Cells[0][0] = "A1";
  StringGrid1->Cells[1][0] = "B1";
  StringGrid1->Cells[0][1] = "A2";
  StringGrid1->Cells[1][1] = "B2";
}

列ごとに右寄せ・中寄せ(2)

もう一つの方法として、TTextCellを継承したクラスをCreateCellControlメソッドで作成する方法があります。

/**
 * セルの値を中寄せで表示するTTextCel
 */
class TTextCell_Center : public Fmx::Grid::TTextCell
{
public:
  __fastcall virtual TTextCell_Center(System::Classes::TComponent* AOwner) : Fmx::Grid::TTextCell(AOwner) {
    TextAlign = TTextAlign::taCenter;
  }
  __fastcall virtual ~TTextCell_Center(void) { }
};

/**
 * セルの値を中寄せで表示する列
 */
class TStringColumn_Center : public Fmx::Grid::TStringColumn
{
public:
  __fastcall virtual TStringColumn_Center(System::Classes::TComponent* AOwner) : Fmx::Grid::TStringColumn(AOwner) { }
  __fastcall virtual ~TStringColumn_Center(void) { }
protected:
  virtual Fmx::Controls::TStyledControl* __fastcall CreateCellControl(void)
  {
    // 中寄せで表示するセルを返す
    TTextCell_Center* cell = new TTextCell_Center(this);
    cell->OnTyping = DoTextChanged;
    cell->OnChange = DoTextChanged;
    cell->OnExit = DoTextExit;
    return cell;
  }
};

セル(Cell)の描画をカスタマイズする

OnPaintイベントをTCanvasに描画することで、セルの描画内容をカスタマイズできます。

サンプルプログラム

このコードは、Team Japan » FireMonkey – TStringGridのセル(Cell)の描画をカスタマイズするをC++Builderに移植しました。

/**
 * セルに楕円を描画する列
 */
class TStringColumn_Round : public Fmx::Grid::TStringColumn
{
public:
  __fastcall virtual TStringColumn_Round(System::Classes::TComponent* AOwner) : Fmx::Grid::TStringColumn(AOwner) { }
  __fastcall virtual ~TStringColumn_Round(void) { }
protected:
  virtual Fmx::Controls::TStyledControl* __fastcall CreateCellControl(void)
  {
    Fmx::Grid::TTextCell* textcell = dynamic_cast<Fmx::Grid::TTextCell*>(Fmx::Grid::TStringColumn::CreateCellControl());
    textcell->OnPaint = OnCellPaint;
    return textcell;
  }
private:
  void __fastcall OnCellPaint(System::TObject* Sender, Fmx::Graphics::TCanvas* Canvas, const System::Types::TRectF &ARect)
  {
    Canvas->Stroke->Kind = Fmx::Graphics::TBrushKind::bkSolid; //単色
    Canvas->Stroke->Color = claLime; //ライム色
    Canvas->StrokeThickness = 3; //ストロークアウトラインの幅
    Canvas->DrawRect(ARect, 20, 20, AllCorners, 1.0, TCornerType::ctRound); //楕円を描く
  };
};

__fastcall TForm1::TForm1(TComponent* Owner)
  : TForm(Owner)
{
  // カラムを作成
  StringGrid1->AddObject(new TStringColumn_Round(StringGrid1));

  // カラムヘッダを設定
  StringGrid1->Columns[0]->Header = "楕円";

  // データ
  StringGrid1->Cells[0][0] = "A1";
  StringGrid1->Cells[0][1] = "A2";
}