Why is a GTK application transparent?

help
1

Hello,
I'm taking my first steps with Rust + GTK4. (I have been a Java developer for many years).
I used Cambalache to “draw” a GTK-Window with GTK-Paned and Label and Flow-Panel and then tried to display the window with a little Rustcode.

Strangely enough, the window is transparent. You can see the white bar from Paned-Panel and the text from Label...

Does it have to be like this? What rookie mistake have I overlooked? Can't you just use the “default colors” from Ubuntu?

Thanks for the help Clemens

Ui-File

<?xml version='1.0' encoding='UTF-8'?>
<!-- Created with Cambalache 0.90.4 -->
<interface>
  <!-- interface-name pic2map.ui -->
  <requires lib="gtk" version="4.6"/>
  <object class="GtkApplicationWindow" id="window">
    <property name="css-classes">window</property>
    <property name="default-height">200</property>
    <property name="default-width">400</property>
    <child>
      <object class="GtkPaned">
        <child>
          <object class="GtkBox" id="panedLeft">
            <property name="css-classes">panedLeft</property>
            <property name="orientation">vertical</property>
            <child>
              <object class="GtkLabel" id="label">
                <property name="css-classes">label</property>
              </object>
            </child>
          </object>
        </child>
        <child>
          <object class="GtkFlowBox" id="demoFlow">
            <property name="css-classes">panedRight</property>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

main.rs:

use gdk4::Display;
use gtk4::prelude::*;
use gtk4::{glib, Application, ApplicationWindow, Builder, CssProvider, Label};
// use std::fs::File;

const APP_ID: &str = "net.cylancer.pic2map";

fn main() -> glib::ExitCode { 
    // Create a new application
    let app: Application = Application::builder().application_id(APP_ID).build();
    app.connect_startup(|_| load_css());
    // Connect to "activate" signal of `app`
    app.connect_activate(|app| {
        let glade_src = include_str!("ui/pic2map.ui");
        let builder: Builder = Builder::from_string(glade_src);
     //   let builder_file = File::create("ui/pic2map.ui").expect("msg");
      //  let builder: Builder = Builder::from_file("ui/pic2map.ui");
        let window: ApplicationWindow = builder.object("window").expect("msg");
        window.set_application(Some(app));

        let label: Label = builder.object("label").expect("msg");
        label.set_text("hallo welt");
        // let window = ApplicationWindow::builder()
        //     .application(app)
        //     .default_height(200)
        //     .default_width(400)
        //     .title("Pic2Map - Verorte Deine Bilder...")
        //     .build();
        // Present window
        window.present();
    });

    // Create a window and set the title

    // Run the application
    app.run()
}

fn load_css() {
    
   // let css_file = File::("ui/pic2map.css").expect("msg");
    
    let provider = CssProvider::new();

   // provider.lo();

    // Add the provider to the default screen
    gtk4::style_context_add_provider_for_display(
        &Display::default().expect("Could not connect to a display."),
        &provider,
        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
    );
}
2

I haven't had the time to test your code but I see you are adding a completely empty CSS provider. Try not adding it, just run the code that opens the window. Comment the line that calls load_css().

1 Like
3

Thank for your fast answer. but....

fn load_css() {
   let css_src = include_str!("ui/pic2map.css");
   let provider = CssProvider::new();

    provider.load_from_string(&css_src);
    gtk4::style_context_add_provider_for_display(
        &Display::default().expect("Could not connect to a display."),
        &provider,
        gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
    );
}

i have changed the load_css procedure. The css works (in my case: the label is red.) But the panels are still transparent.

Best regards Clemens

4

I see the following behaviour:

  1. If I comment load_css, I get a solid panel.
  2. If I leave it in place with an empty CssProvider, I get the transparency that you see.

I'm guessing that you'll need some advice from a GTK developer on how to set up your CSS to not make the panels transparent.

5

Can you show us the CSS file?

6

My css file is very simple:

.label {
  color: red; 
}
7

I would guess you defining a CSS provider overrides the default one and because you didn't include the default styles in your CSS, everything becomes unstyled. Unstyled panels are presumably transparent.

1 Like
8

If I comment out the line with load_css, I still have a transparent window.

// app.connect_startup(|_| load_css());

That speaks against your theory... Or have I misunderstood something?

9

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.