The proportion ScaleButton
After reading official documents, I have two small demonstration program components:
GtkScaleButton, provides control of scale, as well as GtkVolumeButton
I just need to set GtkScaleButton style, even though I have set up a name for the two, you can also:
Note: we need to specify the css class set by css file or #id
The following code indicates his property
gtk_widget_set_name()
This is a picture of the program:
Let's write down the code practice
C language Code
#include <gtk/gtk.h> void load_css ( void ); GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title ); int main ( void ) { GtkWidget *window; GtkWidget *grid; GtkAdjustment *adjustment; GtkWidget *scale; GtkWidget *scaleButton; /// *** Initialize GTK and load CSS gtk_init ( NULL, NULL ); load_css(); /// *** Create a Window window = createWindow ( 300, 300, "ScaleButton" ); /// *** Create a Grid grid = gtk_grid_new(); gtk_container_add ( GTK_CONTAINER ( window ), grid ); /// *** Create an Adjustment adjustment = gtk_adjustment_new ( 0, 0, 10, 1, 2, 0 ); /// *** Create a Scale scale = gtk_scale_new ( GTK_ORIENTATION_HORIZONTAL, adjustment ); gtk_widget_set_name ( scale, "myScale" ); gtk_widget_set_size_request ( scale, 150, 40 ); g_object_set ( scale, "margin", 25, NULL ); /// *** Create a 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, "margin", 25, NULL ); /// *** attach... gtk_grid_attach ( GTK_GRID ( grid ), scale, 0, 0, 1, 1 ); gtk_grid_attach ( GTK_GRID ( grid ), scaleButton, 0, 1, 1, 1 ); /// *** gtk_widget_show_all ( window ); gtk_main (); } void load_css ( void ) { GtkCssProvider *provider; GdkDisplay *display; GdkScreen *screen; /// *** const gchar *css_style_file = "style.css"; GFile *css_fp = g_file_new_for_path ( css_style_file ); GError *error = 0; /// *** provider = gtk_css_provider_new (); display = gdk_display_get_default (); screen = gdk_display_get_default_screen ( display ); /// *** gtk_style_context_add_provider_for_screen ( screen, GTK_STYLE_PROVIDER ( provider ), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION ); gtk_css_provider_load_from_file ( provider, css_fp, &error ); /// *** } GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title ) { GtkWidget *window; window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ); gtk_window_set_title ( GTK_WINDOW ( window ), title ); g_signal_connect ( window, "destroy", gtk_main_quit, window ); gtk_window_set_default_size ( GTK_WINDOW ( window ), width, height ); gtk_container_set_border_width ( GTK_CONTAINER ( window ), 25 ); return window; }
css code
#myScaleButton { background-color: red; border: 2px solid black; } #myScaleButton:hover { background-color: green; border: 2px solid black; } scale { background-color: black; color: yellow; } scale slider { background-color: red; color: yellow; } scale > contents > trough { background-color: blue; } scale > contents > trough > highlight { background-color: red; } .flat { background-color: magenta; color: yellow; } .image-button { background-color: yellow; color: red; }