Gladeの編集画面に、ボーダとか色の指定とかが無いので、どうするのだろうかと思ったら、どうやらCSSを使うようだ。

CSSは外部ファイルから読むことも、テキストとして与えることも可能だが、一番簡単なのはソースに埋め込んでしまう方法だろう。src/resources/style.cssにファイルを配置して、コードからは以下で読み込める。include_str!()は、コンパイル時に指定ファイルを読んでソースの中に埋め込むマクロだ。

    let css_str = include_str!("resources/style.css");
    let css_provider = CssProvider::new();
    css_provider.load_from_data(css_str).unwrap();
    StyleContext::add_provider_for_screen(
        &Screen::get_default().unwrap(), &css_provider, 1
    );

CSSのセレクタだが、id指定の場合、Glade上のIDではなく「ウィジェット名」が使われるので注意が必要だ。

この場合、CSSでは以下のように指定できる。

#titleLabel {
    border: inset 2px;
    background-color: red;
}

GTKのウィジェットクラス名を使って全てのラベルに一律に適用することもできる。

GtkLabel {
    padding: 3px;
}

Glade上のスタイルクラスを使うこともできる。

この場合、CSSでは以下のように指定できる。

.name {
    border: solid 1px;
}

なお、上のリファレンスではラベルに背景色を付ける例が載っているが、試した限りラベルは透明コンポーネントのようで背景色の設定は効かなかった。

サンプルは、GitHubに置いておいた。