I Hope GtkToolbar back to GTK4.
In my app, I use GtkBox with many buttons at the beginning, it seems wired.
then I replace it with GtkToolbar, after done it, feels better, so I hope it back to GTK4.
Thanks in advance.
1 Like
The WinUI3 equivalent of a toolbar is the ApplicationBar, CommandBar, and the CommandBarFlyout.
Some toolbars in real world
Using toolbars is fine and entirely supported in GTK4.
Instead of special widgets like GtkToolbar and GtkToolItem, you simply use a regular GtkBox and apply the toolbar class:
<object class="GtkBox">
<child>
<object class="GtkButton">
<property name="icon-name">object-select-symbolic</property>
</object>
</child>
<child>
<object class="GtkSeparator"/>
</child>
<child>
<object class="GtkButton">
<property name="icon-name">edit-delete-symbolic</property>
</object>
</child>
<style>
<class name="toolbar"/>
</style>
</object>
You didn’t mention what language you were using, but I’m sure you get the idea.
1 Like
There are no plans to bring back a dedicated toolbar widget.
What do you find missing from a box with buttons, when compared to a traditional toolbar?
To migrate GtkToolbar to GTK4 box with buttons,
GtkButton missing some properties:
- icon_size: support large icon
- icon_position: left, top, right, bottom, center
- label: show or hide button’s label
- flat/ relief: set button as flat or relief
- image: always show icon while icon or image is set
GtkBox missing some features:
- Arrow to scroll hide buttons
- Style to switch small or large icon
I do hope GtkToolbar back to GTK4 and improve it, like the button with submenu, now it’s ugly
You can select the icon size when adding an image to a GtkButton. You can also change it at run time.
Position relative to what?
Icons and labels should not be mixed; in general, you either want text or you want icons for commonly known operations. Too many icons lead to complex icons that are hard to remember.
This is just a case of adding the flat class to the button.
If you mean moving buttons to a menu in case the toolbar is too small, then I’d probably suggest changing the UI; moving widgets around isn’t the greatest way to maintain positional memory, which is what people tend to rely on more than icons or text.
Again, this is mostly a case of styling your UI.
As Matthias said, there are no plans to bring back GtkToolbar.
GTK3 has these properties, but GTK4 still missing.
Yes, GTK3 was written in a different era, and was targeting a different style of application.
The traditional ‘menubar - toolbar - content - statusbar’ setup is not a primary focus for GTK4. If this the UI you are aiming for, and the simplified replacements we have in GTK4 aren’t covering your needs, then you may be better off sticking to GTK3 for the time being.
It would of course be possible to create a gtk4 version of a library like amtk to cater specifically to such use cases. But the GTK team is small, and doesn’t really have the bandwidth to do that ourselves.
1 Like
Thanks for your response, I have made an example, and it works fine,
just share the code:
public interface IToolbarFace : Object
{
public abstract IconSize icon_size { get; set; default = IconSize.LARGE_TOOLBAR; }
public abstract ToolbarStyle toolbar_style { get; set; default = ToolbarStyle.BOTH; }
}
[GtkTemplate(ui = "/app/glades/datagrid_navigation.ui")]
public class DataGridToolbar : Gtk.Box, IToolbarFace {
public IconSize icon_size {
get { return (IconSize)(btn_cell_mode.image as Image).icon_size; }
set {
this.@foreach((widget) => {
if (widget is Button) {
((widget as Button).image as Image).icon_size = value;
}
});
}
}
public ToolbarStyle toolbar_style {
get {
return (null != btn_cell_mode.label) ? ToolbarStyle.BOTH : ToolbarStyle.ICONS;
}
set {
this.@foreach((widget) => {
if (widget is Button) {
if (ToolbarStyle.BOTH == value) {
int position = -1;
this.child_get(widget, "position", ref position);
if (-1 != position) {
(widget as Button).label = m_button_name_map[position];
}
(widget as Button).always_show_image = true;
} else {
(widget as Button).label = null;
(widget as Button).always_show_image = true;
}
}
});
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
<requires lib="gtk+" version="3.24"/>
<object class="GtkImage" id="img_page_first">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="icon-name">go-first</property>
<property name="icon_size">3</property>
</object>
<object class="GtkImage" id="img_page_last">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="icon-name">go-last</property>
<property name="icon_size">3</property>
</object>
<object class="GtkImage" id="img_page_next">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="icon-name">go-next</property>
<property name="icon_size">3</property>
</object>
<object class="GtkImage" id="img_page_previous">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="icon-name">go-previous</property>
<property name="icon_size">3</property>
</object>
<template class="KangarooGuiDataGridDataGridToolbar" parent="GtkBox">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="spacing">2</property>
<child>
<object class="GtkButton" id="btn_page_last">
<property name="label" translatable="yes">Last</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="receives-default">True</property>
<property name="tooltip-text" translatable="yes">Go to last page</property>
<property name="image">img_page_last</property>
<property name="relief">none</property>
<property name="image-position">top</property>
<property name="always-show-image">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">16</property>
</packing>
</child>
<child>
<object class="GtkButton" id="btn_page_next">
<property name="label" translatable="yes">Next</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="receives-default">True</property>
<property name="tooltip-text" translatable="yes">Go to next page</property>
<property name="image">img_page_next</property>
<property name="relief">none</property>
<property name="image-position">top</property>
<property name="always-show-image">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">17</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="entry_page_number">
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="tooltip-text" translatable="yes">show and set page number</property>
<property name="max-length">11</property>
<property name="has-frame">False</property>
<property name="width-chars">11</property>
<property name="xalign">0.5</property>
<property name="input-purpose">number</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">18</property>
</packing>
</child>
<child>
<object class="GtkButton" id="btn_page_previous">
<property name="label" translatable="yes">Previous</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="receives-default">True</property>
<property name="tooltip-text" translatable="yes">Go to previous page</property>
<property name="image">img_page_previous</property>
<property name="relief">none</property>
<property name="image-position">top</property>
<property name="always-show-image">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">19</property>
</packing>
</child>
<child>
<object class="GtkButton" id="btn_page_first">
<property name="label" translatable="yes">First</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="receives-default">True</property>
<property name="tooltip-text" translatable="yes">Go to first page</property>
<property name="image">img_page_first</property>
<property name="relief">none</property>
<property name="image-position">top</property>
<property name="always-show-image">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">20</property>
</packing>
</child>
</template>
</interface>
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.