Styling GTKSharp with CSS is a great way to customize

I am in the process of converting an existing C/GTK+ GUI application to C# using GTKSharp in Visual Studio 2017. To facilitate this, I have installed the following package https://www.nuget.org/packages/GtkSharp/3.1.3 via NuGet.

Below is how I am loading the CSS (the application utilizes a Glade file to define the interface):

    static void Main(string[] args)
    {
        new Program(args);
    }

    public Program(string[] args)
    {
        Application.Init();

        builder = new Builder();
        Gtk.CssProvider provider = new CssProvider();
        builder.AddFromFile("interface.glade");
        provider.LoadFromPath("style.css");
        builder.Autoconnect(this);

        Gtk.Window window = (Gtk.Window)builder.GetObject("start"); 
        Gtk.StyleContext.AddProviderForScreen(Gdk.Screen.Default, provider, 800); // couldn't find the equivalent to GTK_STYLE_PROVIDER_PRIORITY_USER so I set the priority to a random number
        window.Show();

        Application.Run();
    }

The naming conventions for selectors appear to vary between GTK+ and C#. For instance,

    window {
     ...
    }

is effective in C/GTK+ but not in C#, whereas

    GtkWindow {
     ...
    }

works in C# but not in C/GTK+. Furthermore, there are certain widgets that I am unable to style at all. For example,

    button {
     ...
    }

can be styled in GTK+, however,

    GtkButton {
     ...
    }

does not yield the desired results in C#. My attempt to find documentation on how GTK# handles CSS styling has been unsuccessful, as I initially assumed it would mirror GTK+. Any advice or guidance on this matter?

Answer №1

It appears that GTKSharp behaves more in line with the expectations of GTK3.

Here is a helpful reference manual from docs.gtk.org

The Table 1. Selector syntax section should prove to be particularly valuable.

In essence, elements are named after their respective GTK class names: GtkButton, GtkLabel, and so forth.

To view a list of default GTK3 widgets, refer to the documentation table of contents..

The GTK button serves as a container widget that does not display its background. Without seeing the specific CSS properties applied using that selector, it's challenging to determine why it may not be working. You might need to style its content separately.

GtkButton GtkLabel {
    color: lime;
}

The selector GtkButton itself should be accurate.

Answer №2

The issue at hand was due to a compatibility problem with different versions.

Specifically, version 3.22 of GTK# had the correct detection for GtkButton selectors. However, I mistakenly used GTK 3.14's native libraries which led to the error. Fortunately, I found an unlisted NuGet package that provided win32 libraries for the 3.22 version. Interestingly, this alternative version recognized the outdated "button", "window" tags instead of the newer "GtkButton", "GtkWindow" ones.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

Challenges with implementing emotion in Material UI 5

Recently, I upgraded my react app from Material UI 4 to 5 Beta. After consulting the documentation on the docs style library, I learned that the new version allows the use of emotion. However, when I attempted to implement it, I encountered an issue with t ...

Is the Application_Start method executed before the transformation of the Web.config file takes place?

After creating a transformation file to modify the appconfig section of Web.config by adding a key, I encountered an issue. In the Application_Start method where I attempted to access the added key, it was not present. Even after previewing the transform w ...

Achieve a seamless alignment of text/icons at the bottom of a row in BootStrap 4

Looking at this screenshot showing red and blue lines from a Firefox add-on called Pesticide: https://i.sstatic.net/h3Dmy.png Here is the code from the screenshot: <div class="row my-auto"> <p class="h6"> < ...

Upgrade from NServiceBus 5.x to 6.x is causing issues with NServiceBus.Host 7.0.1 and NServiceBus.Wcf as it is resulting in

In order to upgrade to NSB6, we need to upgrade the NSB host. However, directly referencing WcfService from the NServiceBus.Wcf namespace is not possible because the old WcfService class is still present in the NServiceBus.Host 7.0.1 assembly and marked as ...

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

Issue with margin spacing not desired on Internet Explorer 7

Encountering an unusual issue in Internet Explorer 7 where the heading appears with excessive space from the top. This issue is exclusive to IE 7 and not present in other browsers or newer IE versions. Any suggestions on how to resolve this? Chrome Versi ...

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

What is the procedure for displaying linked images in my web project on the local development web server?

After revisiting a web project I originally created in 2000 using ASP, I realized how complex it has become over the past 13 years. The technology stack has evolved from ASP to ASP.NET 1.1, 3.5, and now 4.0, with our current environment being VS 2010. The ...

Arranging my HTML text fields for optimal organization

I am struggling to format my text fields the way I envision. Here's what I want: - Username field at the top - First and last name underneath each other - Password and confirm password next to each other below names As a newcomer to HTML, I'm fi ...

Incorporating Bootstrap styling into a ReactJS project

I've been experimenting with integrating Bootstrap into my React project. While I have successfully implemented Bootstrap buttons and grids, I'm facing an issue where the CSS styles for Bootstrap are not being applied. Is there a way to manually ...

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

The functionality of dropdown menus in the Bootstrap 5 navbar is currently experiencing issues

I recently updated my Bootstrap from v5.2.2 to v5.2.3 and now the dropdown menus in my navbar are not working properly. They do not drop down as they should, instead, they remain stationary. Can someone please help me figure out what I am doing wrong? & ...

Understanding the compatibility of protocols with security measures in WCF: Exploring the nuances of Transport and Message security

According to my research on protocol security, I found some conflicting statements on MSDN. Statement 1 claims that transport security is available on all bindings except for wsDualHttpBinding, while Statement 2 states that it's not available on netNa ...

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

A guide on monitoring SASS files in all subdirectories with an npm script

Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

Browser and contexmenu intersecting halfway

I have successfully implemented a custom context menu in my HTML project. It functions well, but I am facing an issue where half of the menu appears off-screen to the right. Is there a way to detect this and reposition the menu above the mouse pointer? He ...

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

What is the best way to align this form perfectly in Bootstrap 4?

HTML <div class="container-fluid background"> <div class="row"> <!-- background effect --> <div id="particles-js"> <div class="login col-12"> <form class="login-form" method="post" action=""> ...