FMXグラデーションボタンを作成

  • 2
    いいね
  • 0
    コメント

FireMonkeyのスタイルについては
http://edn.embarcadero.com/article/44759
http://edn.embarcadero.com/article/44761
もしくはpikさんのスライド(下記URL)で詳しく説明があります。
https://www.slideshare.net/pik256/vcl-firemonkey-59356366
上記の方法を使ってコード実装する方法を試してみました。

新規プロジェクトで[マルチデバイス アプリジェーション C++Builder]を選択し

メインフォームにはTButtonを1つ配置します。
2017-05-221852.png

FormCreateでTRectangleTGradientAnimationを作成し
Button1->FindStyleResource("background")->AddObject()に作成したTRectangleを設定します。

Unit1.cpp
//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
    f_recta_        = new TRectangle(this);
    f_recta_->Name  = "Rectangle1";
    f_graani_       = new TGradientAnimation(this);
    f_graani_->Duration = 0.2;
    f_graani_->StartValue->Color    = TAlphaColorRec::Yellow;
    f_graani_->StartValue->Color1   = TAlphaColorRec::Red;
    f_graani_->StopValue->Color     = TAlphaColorRec::White;
    f_graani_->StopValue->Color1    = TAlphaColorRec::Blue;
    f_recta_->AddObject(f_graani_);
    f_graani_->Inverse          = false;
    f_graani_->PropertyName     = "Fill.Gradient";
    f_graani_->Trigger          = "IsMouseOver=true";
    f_graani_->TriggerInverse   = "IsMouseOver=false";
    f_recta_->OnClick = Button1Click;
    f_recta_->Fill->Kind    = TBrushKind::Gradient;
    f_recta_->Align         = TAlignLayout::Client;
    f_recta_->HitTest       = true;
    f_recta_->Fill->Gradient->Color = TAlphaColorRec::Yellow;
    f_recta_->Fill->Gradient->Color1 = TAlphaColorRec::Red;
    TThread::CreateAnonymousThread([this](){
        TThread::Synchronize(TThread::CurrentThread, [this]()
        {
            Button1->FindStyleResource("background")->AddObject(f_recta_);
        });
    })->Start();
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
    ShowMessage("Press the Gradation button");
}
//---------------------------------------------------------------------------

TGradientAnimationのTriggerをIsMouseOver指定していますので

ボタンの上をマウスオーバーした時に TGradientAnimationのTriggerが動き出します。58P3vA.gif

参考URL

https://community.embarcadero.com/blogs/entry/firemonkey
https://www.embarcadero.com/jp/products/rad-studio/start-for-free