GTK3使用CSSのベストプラクティス

比例ScaleButton

公式文書を読んだ後、私は二つの小さなデモプログラムのコンポーネントがあります
、GtkScaleButtonは同様に、スケールの制御を提供  GtkVolumeButton
あなたがすることもでき、私はちょうど私が2名を設定しているにもかかわらず、GtkScaleButtonスタイルを設定する必要があります。

注：我々は、CSSファイルや#IDによってCSSクラスのセットを指定する必要があります

次のコードは、自分の財産を示し、

gtk_widget_set_name（）

これは、プログラムの写真です：

コードの練習失望の書き込み

C言語コード

#include <GTK / gtk.h> 空隙 load_css（ボイド）。
GtkWidget *のcreateWindow（constの GINT幅、constの GINT高さ、のconst gchar * のconst タイトル）。int型メイン（無効）
{ 
    GtkWidget * ウィンドウを。
    GtkWidget * グリッド。
    GtkAdjustment * 調整。
    GtkWidget * スケール。
    GtkWidget * scaleButton。/// ***初期化GTKと負荷CSSの    gtk_init（NULL、NULL）;




    
    

    load_css（）; 

    /// ***ウィンドウ作成 
    ウィンドウ=のcreateWindow（300、300、" ScaleButton " ）。

    /// ***グリッド作成 
    グリッド= ）（gtk_grid_new。
    gtk_container_add（GTK_CONTAINER（ウィンドウ）、グリッド）。

    /// ***調整作成 
    gtk_adjustment_new調整=（0、0、10、1、2、0 ）; 

    /// ***スケール作成 
    スケール= gtk_scale_new（GTK_ORIENTATION_HORIZONTAL、調整）。 
    gtk_widget_set_name（規模、" myScaleを" ）;
    gtk_widget_set_size_request（スケール、150、40 ）。
    g_object_set（スケール、" マージン"、25 、NULL）; 

    /// *** ScaleButton作成 
    scaleButton = gtk_scale_button_new（GTK_ICON_SIZE_DIALOG、0、5、1 、NULL）; 
    gtk_widget_set_name（scaleButton、" myScaleButton " ）; 
    gtk_widget_set_size_request（scaleButton、50、50）。
    g_object_set（scaleButton、" マージン"、25 、NULL）; 

    /// ***添付... 
    gtk_grid_attach（GTK_GRID（グリッド）、スケール、        0、0、1、1 ）。
    gtk_grid_attach（GTK_GRID（グリッド）、scaleButton、0、1、1、1 ）。
    /// *** 
    gtk_widget_show_all（ウィンドウ）。
    gtk_main（）; 
} 

ボイド load_css（ボイド）
{ 
    GtkCssProvider * プロバイダ。
    GdkDisplay      * ディスプレイ。
    GdkScreen       * 画面。
    /// *** 
    のconst gchar * css_style_file = " style.cssに" ; 
    GFILE * css_fp = g_file_new_for_path（css_style_file）。
    GErrorを格納 *エラー= 0 ;
    /// *** 
    プロバイダ= gtk_css_provider_new（）。
    表示   = gdk_display_get_default（）。
    画面    = gdk_display_get_default_screen（表示）。
    /// ***
     gtk_style_context_add_provider_for_screen（スクリーン、GTK_STYLE_PROVIDER（プロバイダ）、GTK_STYLE_PROVIDER_PRIORITY_APPLICATION）。
    gtk_css_provider_load_from_file（プロバイダ、css_fp、 ＆エラー）;
    /// *** 
} 

GtkWidget *のcreateWindow（CONST GINT幅、CONST GINT高さ、CONST gchar * CONST タイトル）
{ 
    GtkWidget * 窓。
    ウィンドウ = gtk_window_new（GTK_WINDOW_TOPLEVEL）。
    gtk_window_set_title（GTK_WINDOW（ウィンドウ）、タイトル）。
    g_signal_connect（ウィンドウ、" 破壊" 、gtk_main_quit、ウィンドウ）。
    gtk_window_set_default_size（GTK_WINDOW（窓）、幅、高さ）。
    gtk_container_set_border_width（GTK_CONTAINER（窓）、25 ）。
    リターン・ウィンドウ。
}

CSSコード

#myScaleButton 
{ 
    背景 - 色：赤。
    ボーダー：2ピクセル黒一色。
} 

#myScaleButton：ホバー
{ 
    背景 - 色：緑。
    ボーダー：2ピクセル黒一色。
} 

規模
{ 
    背景 - 色：黒。
    色：黄色; 
} 

スケールスライダー
{ 
    背景 - 色：赤。
    色：黄色; 
} 

スケール >コンテンツ> トラフ
{ 
    背景 - 色：青。
} 

スケール>コンテンツ>トラフ> ハイライト
{ 
    背景 - 色：赤。
} 

.flat 
{ 
    背景 - 色：マゼンタ。
    色：黄色; 
} 

.image - ボタン
{ 
    背景 - 色：黄色。
    赤色; 
}