Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

gtkmmでのボタン色変更

引き続きgtkmmについて書いていきたいと思います!!

今回はgtkmmでのボタン色の変更です。
前回記事に記載したGladeではボタン色の変更までできなかったので、別の方法が必要になります。
こちらの方法についてまとめていきたいと思います!!



■ボタン色の変更

色を変更したいボタンへの色設定はこちらのようなコードになります。

    this->builder->get_widget("btnClick", this->btnClick);
	
    Glib::RefPtr<Gtk::CssProvider> css_provider = Gtk::CssProvider::create();
    css_provider->load_from_data(
    "button {background-image: image(black);}\
     button:hover {background-image: image(green);}\
     button:active {background-image: image(brown);}");

    this->btnClick->get_style_context()->add_provider(
    css_provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

    this->btnClick->override_color(Gdk::RGBA("white"), Gtk::STATE_FLAG_NORMAL);

ボタン色を変更させるためにはcssの変更が必要になります。
cssの設定は下記変数を用いて実施していきます。

Glib::RefPtr<Gtk::CssProvider> css_provider = Gtk::CssProvider::create();

buttonに対するcssはこちらのように設定すればOKです。

css_provider->load_from_data(
    "button {background-image: image(black);}\
     button:hover {background-image: image(green);}\
     button:active {background-image: image(brown);}");
);

そして、用意したcssを色変更したいボタンへ設定していきます。
今回はボタン名をbtnClickとしたので、

    this->btnClick->get_style_context()->add_provider(
    css_provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

となります。

今回はボタン色を黒色に設定したので、ボタンの文字色は白に設定してみました。

this->btnClick->override_color(Gdk::RGBA("white"), Gtk::STATE_FLAG_NORMAL);

■実際に動かしてみる

ボタン色がデフォルト設定の場合にはこちらのような色になっております。
f:id:Elsammit:20210108205252g:plain

では、今回の設定でアプリを動かしてみます!!
動作させるとこちらのようになります。
f:id:Elsammit:20210110192356g:plain

ボタン押下前は黒色、
マウスをボタン上に持っていくと緑、
押下中は茶色、
になっているのが分かるかと思います。
先ほどcssで定義した、

css_provider->load_from_data(
    "button {background-image: image(black);}\
     button:hover {background-image: image(green);}\
     button:active {background-image: image(brown);}");

■(おまけ)window色の変更

windowの背景色を変更する場合にはこちらのようにすればOKです。
cssを設定する必要はないです。

window名.override_background_color(Gdk::RGBA("black"));

■最後に

文字色やwindowの背景色などはoverrideで設定できるのですが、なぜかボタンだけ色変更するAPI用意されていなかったんですよね。
しかも情報があまりなかった。。。
ですので、後で困らないようにまとめてみました!!