I added a gtk widget to the main window UI file, but it doesn't show up

Question

I am trying to add a GtkImage to my main window *.ui file, which was made using the GNOME Builder project template.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk+" version="3.20"/>
  <template class="PodiumWindow" parent="GtkApplicationWindow">
    <property name="default-width">600</property>
    <property name="default-height">300</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="headerBar">
        <property name="visible">True</property>
        <property name="show-close-button">True</property>
        <property name="title">Podium</property>
      </object>
    </child>
    <child>
    <object class="GtkImage">
          <property name="visible">True</property>
          <property name="icon-name">open-menu-symbolic</property>
          <property name="icon-size">1</property>
    </object>
    <object class="GtkLabel" id="label">
      <property name="label">Ready your pencils!</property>
      <property name="visible">True</property>
      <attributes>
        <attribute name="weight" value="bold"/>
        <attribute name="scale" value="2"/>
      </attributes>
    </object>
    </child>
  </template>
</interface>

But the image does not appear in the window:

I checked with GTK+ Inspector (Ctrl+Shift+D) and could not see the GtkImage in the hierachy. Anyone knows what I am missing?

Answer 1

Based on Florians answer, I have posted my working *.UI code below:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <template class="PodiumWindow" parent="GtkApplicationWindow">
    <property name="can_focus">False</property>
    <property name="default_width">600</property>
    <property name="default_height">300</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="headerBar">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="title">Podium</property>
        <property name="show_close_button">True</property>
      </object>
    </child>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="valign">center</property>
        <property name="vexpand">True</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkImage">
            <property name="visible">True</property>
            <property name="icon-name">open-menu-symbolic</property>
            <property name="icon-size">1</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <placeholder/>
        </child>
        <child>
          <object class="GtkLabel" id="label">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label">Ready your pencils!</property>
            <attributes>
              <attribute name="weight" value="bold"/>
              <attribute name="scale" value="2"/>
            </attributes>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </template>
</interface>

Answer 2

GtkWindow is a subclass of GtkBin, which means it can only have one child at a time.

So the image is added first, but removed again when adding the label.

To fix your issue, you need to add an intermediate container (like GtkGrid or GtkBox).