How to resize layout containers when the parent window resizes? - gtk3

Question

I am developing a music player application in Vala 0.14. The main toolbar of this application contains nested Box Layouts and all of them have the hexpand property set to true.
While packing the widgets/layouts I made sure that the expand and fill arguments were true, however the toolbar fails to resize when the size of parent window changes.
Here are the screenshots.
[NORMAL]
[RESIZE -- SIZE INCREASED]
[RESIZE -- SIZE DECREASED]
Is it enough to set the hexpand property to true or do I need to make some adjustments to the box layouts when the parent window's size_allocate signal is emitted ?
CODE:
using Gtk;
namespace Conjure.Widget
{
public class MainToolBar : Object
{
/* Declare reference variables */
private Toolbar tlbMain;
private ToolItem tiMain;
public Scale sclProgress;
private Label lblSongName;
private Label lblArtistName;
private Label lblAlbumName;
private Box hboxMain;
private Box vboxControls;
private Box hboxControls;
private Box hboxButtons;
private Box hboxMetaData;
private Box vboxMetaData;
private Box vboxPreferences;
private Box hboxPreferences;
private Image imgArt;
private Image icnPrevious;
public Image icnPlay;
public Image icnPause;
private Image icnNext;
private Image icnRepeat;
private Image icnVolume;
private Image icnPhone;
private Image icnSuperMenu;
private Image icnEqualizer;
public Button btnPrevious;
public Button btnTogglePlay;
public Button btnNext;
public Button btnVolume;
public Button btnSuperMenu;
public Button btnEqualizer;
private ToggleButton btnPhone;
private ToggleButton btnRepeat;
private Separator sep1;
private Separator sep2;
construct
{
/* Create the parent box */
hboxMain = new Box(Orientation.HORIZONTAL, 0);
hboxMain.hexpand = true;
hboxMain.homogeneous = true; //
/* Create boxes to hold meta data */
hboxMetaData = new Box(Orientation.HORIZONTAL, 5);
vboxMetaData = new Box(Orientation.VERTICAL, 0);
vboxMetaData.homogeneous = true;
hboxMetaData.hexpand = true;
vboxMetaData.hexpand = true;
/* Create boxes for control elements */
vboxControls = new Box(Orientation.VERTICAL, 0);
hboxControls = new Box(Orientation.HORIZONTAL, 0);
hboxButtons = new Box(Orientation.HORIZONTAL, 0);
vboxControls.homogeneous = true;
vboxControls.hexpand = true;
hboxButtons.homogeneous = false;
hboxButtons.hexpand = true;
hboxButtons.halign = Align.CENTER;
hboxControls.hexpand = true;
/* Create boxes for preference control */
vboxPreferences = new Box(Orientation.VERTICAL, 0);
hboxPreferences = new Box(Orientation.HORIZONTAL, 0);
vboxPreferences.hexpand = true;
hboxPreferences.hexpand = true;
/* Create and load image mockup */
imgArt = new Image();
//imgArt.set_from_file("/home/utsav/jmrfs.png");
imgArt.halign = Align.START;
/* Make labels for meta data */
lblSongName = new Label(null);
lblArtistName = new Label(null);
lblAlbumName = new Label(null);
lblSongName.set_markup_with_mnemonic("<b>Down</b>");
lblArtistName.set_markup_with_mnemonic("Jay Sean ft. Lil' Wayne");
lblAlbumName.set_markup_with_mnemonic("All or Nothing");
lblSongName.halign = Align.START;
lblArtistName.halign = Align.START;
lblAlbumName.halign = Align.START;
lblSongName.hexpand = true;
lblAlbumName.hexpand = true;
lblArtistName.hexpand = true;
/* Create audio progress bar */
sclProgress = new Scale(Gtk.Orientation.HORIZONTAL, new Adjustment(0.0, 0.0, 10.0, 0.1, 1.0, 1.0));
sclProgress.draw_value = false;
sclProgress.width_request = 300;
// Stylize control
/*StyleContext style_context = sclProgress.get_style_context();
CssProvider css_provider = new CssProvider();
try
{
css_provider.load_from_path(Conjure.Utility.path_to_assets () + "/css/style.css");
}
catch(Error e)
{
stderr.puts("Unable to load specified style sheet.");
}
style_context.add_provider(css_provider, STYLE_PROVIDER_PRIORITY_THEME);*/
/* Create toolbar buttons */
btnPrevious = new Button();
btnTogglePlay = new Button();
btnNext = new Button();
btnVolume = new Button();
btnSuperMenu = new Button();
btnEqualizer = new Button();
btnRepeat = new ToggleButton();
btnPhone = new ToggleButton();
btnPrevious.hexpand = false;
icnPrevious = new Image();
icnPause = new Image();
icnPlay = new Image();
icnNext = new Image();
icnPhone = new Image();
icnRepeat = new Image();
icnVolume = new Image();
icnSuperMenu = new Image();
icnEqualizer = new Image();
/*icnPrevious.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-skip-backward.png");
icnPlay.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-playback-start.png");
icnPause.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-playback-pause.png");
icnNext.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-skip-forward.png");
icnPhone.set_from_file(Conjure.Utility.path_to_assets () + "/icons/phone.png");
icnRepeat.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-playlist-repeat.png");
icnVolume.set_from_file(Conjure.Utility.path_to_assets () + "/icons/audio-volume-high.png");
icnSuperMenu.set_from_file(Conjure.Utility.path_to_assets () + "/icons/document-properties.png");
icnEqualizer.set_from_file(Conjure.Utility.path_to_assets () + "/icons/media-graphic-equalizer.png");
btnPrevious.image = icnPrevious;
btnNext.image = icnNext;
btnTogglePlay.image = icnPlay;
btnPhone.image = icnPhone;
btnRepeat.image = icnRepeat;
btnVolume.image = icnVolume;
btnSuperMenu.image = icnSuperMenu;
btnEqualizer.image = icnEqualizer;*/
sep1 = new Separator(Orientation.VERTICAL);
sep2 = new Separator(Orientation.VERTICAL);
/* Start packing widgets */
// Pack Meta Data Box
vboxMetaData.pack_start(lblSongName, true, true, 0);
vboxMetaData.pack_start(lblAlbumName, true, true, 0);
vboxMetaData.pack_start(lblArtistName, true, true, 0);
hboxMetaData.pack_start(imgArt, false, true, 0);
hboxMetaData.pack_start(vboxMetaData, true, true, 0);
// Pack controls box
vboxControls.pack_start(sclProgress, true, true, 0);
hboxButtons.pack_start(btnPrevious, false, false, 0);
hboxButtons.pack_start(btnTogglePlay, false, false, 0);
hboxButtons.pack_start(btnNext, false, false, 0);
hboxButtons.pack_start(sep1, false, false, 0);
hboxButtons.pack_start(btnRepeat, false, false, 0);
hboxButtons.pack_start(btnVolume, false, false, 0);
hboxButtons.pack_start(sep2, false, false, 0);
hboxButtons.pack_start(btnPhone, false, false, 0);
vboxControls.pack_start(hboxButtons, true, true, 0);
// Pack preference box
hboxPreferences.pack_end(btnSuperMenu, false, false, 0);
hboxPreferences.pack_end(btnEqualizer, false, false, 0);
vboxPreferences.pack_end(hboxPreferences, false, false, 0);
vboxPreferences.halign = Align.END;
// Pack main box
hboxMain.pack_start(hboxMetaData, true, true, 0);
hboxMain.pack_start(vboxControls, true, true, 0);
hboxMain.pack_start(vboxPreferences, true, true, 0);
/* Create ToolItem */
tiMain = new ToolItem();
tiMain.add(hboxMain);
tiMain.hexpand = true;
/* Create Toolbar */
tlbMain = new Toolbar();
tlbMain.add(tiMain);
tlbMain.hexpand = true;
tlbMain.vexpand = false;
}
public void resize_main_layout()
{
}
public Gtk.Widget toolbar
{
get
{
return tlbMain;
}
}
}
}
[Main Module]
using Gtk;
using Conjure.Widget;
namespace Conjure.App
{
public class MainWindow : Window
{
private Box vboxMain;
private Box hboxPlaylists;
private MainToolBar maintoolbar;
/*private Conjure.Library.MusicPlayer player;
private SyncThread t;
public Cancellable c;
private unowned Thread<void*> t_a;
// dummy variable
bool track_selected;*/
construct
{
this.title = "Conjure";
this.set_default_size(905, 600);
this.window_position = WindowPosition.CENTER;
//t = null;
//c = null;
//track_selected = true;
vboxMain = new Box(Orientation.VERTICAL, 0);
hboxPlaylists = new Box(Orientation.HORIZONTAL, 0);
maintoolbar = new MainToolBar();
//player = Conjure.Library.MusicPlayer.get();
vboxMain.homogeneous = false;
vboxMain.pack_start(maintoolbar.toolbar, false, true, 0);
//maintoolbar.btnTogglePlay.clicked.connect(toggle_play_clicked);
maintoolbar.sclProgress.set_state (Gtk.StateType.INSENSITIVE);
/*player.state_changed.connect(() =>
{
if(player.get_state() == Conjure.Library.States.READY)
{
track_selected = true;
update_metaphors ();
}
});*/
/*maintoolbar.sclProgress.change_value.connect((s, d) =>
{
stderr.printf("Moved\n");
player.toggle_play ();
player.seek_player((int64) d);
player.toggle_play ();
});
this.size_allocate.connect((allocation) =>
{
stderr.printf("Resized\n");
maintoolbar.resize_main_layout ();
vboxMain.resize_children ();
});*/
vboxMain.hexpand = true;
add(vboxMain);
}
/*void toggle_play_clicked(Gtk.Widget w)
{
w.set_sensitive (false);
if (new_track_selected () && player.get_state() != Conjure.Library.States.PLAYING)
{
stderr.puts("A\n");
kill_thread ();
player.set_track("/home/utsav/abc.mp3");
player.toggle_play ();
make_and_run_thread ();
}
else if (player.get_state() == Conjure.Library.States.PLAYING)
{
stderr.puts("B\n");
kill_thread ();
player.toggle_play ();
}
else if (!(new_track_selected ()) && player.get_state() == Conjure.Library.States.PAUSED)
{
stderr.puts("C\n");
player.toggle_play();
make_and_run_thread ();
}
update_metaphors ();
w.set_sensitive (true);
}*/
/*bool new_track_selected()
{
// method stub
bool p;
p = track_selected;
track_selected = false;
return p;
}*/
/*void kill_thread ()
{
try
{
if(c!=null)
{
c.cancel ();
t_a.join();
}
}
catch(ThreadError err)
{
stderr.printf ("Error: %s", err.message);
}
}
void make_and_run_thread()
{
try
{
c = new Cancellable();
t = new SyncThread(maintoolbar.sclProgress, player.audio_player (), c);
t_a = Thread.create<void*> (t.thread_func, true);
}
catch(ThreadError err)
{
stderr.printf ("Error: %s", err.message);
}
}*/
/*void update_metaphors()
{
if(player.get_state()== Conjure.Library.States.PLAYING)
{
maintoolbar.btnTogglePlay.image = maintoolbar.icnPause;
}
else
{
maintoolbar.btnTogglePlay.image = maintoolbar.icnPlay;
}
}*/
}
}

Answer 1

Without seeing the code it's hard to tell for sure, but my guess is that it does expand. Assuming you have a horizontal box with three children (one for each section) you probably want to set only the middle child to expand. Right now, that third child is also expanding and allocating whitespace.
My advice is to try to create your UI in Glade first. Even if you don't want to use Glade for the final product, it makes it easy to see what different configurations do and will make diagnosing issues like this much easier.