I am trying to make a Gtk3 Application with vala.
I am using a ui-file for Interface design. I can find no information on how to do this GMenu(?) with a ui file. There are lots of examples for coding this in vala.
How can I add this Menu Button in my ui file?
You can find the full code on github.com
I want this type of Menu for my app: The only thing I can do is this:
This is my ui-file:
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkPopoverMenu" id="popovermenu1">
<property name="can_focus">False</property>
<child>
<placeholder />
</child>
</object>
<template class="ZeiterfassunggtkWindow" parent="GtkApplicationWindow">
<property name="default-width">600</property>
<property name="default-height">300</property>
<child type="titlebar">
<object class="GtkHeaderBar" id="header_bar">
<property name="visible">True</property>
<property name="show-close-button">True</property>
<property name="title">Zeiterfassung</property>
<property name="subtitle">Precisma GmbH</property>
<child>
<object class="GtkMenuButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="popover">popovermenu1</property>
<child>
<placeholder />
</child>
</object>
<packing>
<property name="pack_type">end</property>
</packing>
</child>
</object>
</child>
<child>
<object class="GtkLabel" id="label">
<property name="label">Hello, World!</property>
<property name="visible">True</property>
<attributes>
<attribute name="weight" value="bold"/>
<attribute name="scale" value="2"/>
</attributes>
</object>
</child>
</template>
</interface>
Solution: Found the answer with the help of Jens:
I had to add a icon als GtkImage at the bottom of the template after </template>
<object class="GtkImage" id="menu_image">
<property name="visible">True</property>
<property name="icon_name">open-menu-symbolic</property>
</object>
Then use this GtkImage for the Button:
<object class="GtkMenuButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="popover">popovermenu1</property>
<property name="image">menu_image</property>
<child>
<placeholder />
</child>
</object>
It's a Gtk.MenuButton
with use_popover = True
, see the gedit source code here:
https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/ui/gedit-window.ui#L93
<object class="GtkMenuButton" id="gear_button">
<property name="visible">True</property>
<property name="valign">center</property>
<property name="use_popover">True</property>
<property name="image">menu_image</property>
</object>
<packing>
<property name="pack_type">end</property>
</packing>
Also note that the button is inside a Gtk.HeaderBar
component.