How can I control the stacking order of objects in appdesigner?

How can I control the stacking order of objects in appdesigner? It seems to be determined by the order in which the panels or axes are created. What if I want an object created later to slide underneath earlier objects?

Answer 1

[Sean de Wolski]

You can control the order of the 'Children' of a graphics object directly:

fig = uifigure;
panel1 = uipanel(fig, 'BackgroundColor', 'b');
panel2 = uipanel(fig, 'BackgroundColor', 'r');
fig.Children = flip(fig.Children)

[Kevin J. Delaney]

Spectacular! Just what I needed. Thanks, Kevin

[Trevor Kemp]

I am also trying to figure out how to reorder the stacking of components and I can't figure out how implement this solution. In appdesigner, any component I create automatically has the main figure as its parent (as shown in example), but all of that is in the greyed out automatically generated createComponents function that I can't edit. I don't see anywhere in appdesigner that I can utilize this... what am I missing?

   % Create main_figure
            app.main_figure = uifigure;
   % Create Panel
            app.Panel = uipanel(app.main_figure);
   % then if I stick this up in the startupFcn(app) space, 
   % I get an error that the main figure doesn't have the property 'Children'
            app.main_figure.Children=flip(app.main_figure.Children)

[Sean de Wolski]

Putting this as the first couple lines of the startup function works fine for me:

            uipanel(app.UIFigure)
            app.UIFigure.Children = flip(app.UIFigure.Children);

Why are you creating a separate uifigure? Just use the one that app designer creates unless you want a second window?

[Trevor Kemp]

Thanks for the replies. I wasn't really clear about what I was posting there, but I was just trying to show that app.main_figure=uifigure and app.Panel=uipanel(app.main_figure) are the creations of those components that are already happening down in createComponents, that text is completely uneditable. Only the app.main_figure.Children= flip(app.main_figure.Children) portion was being put into startupFcn

To that end, I'm confused as to why you you are suggesting calling the uipanel function again within startupFcn. I already have a panel created, but anyway, if I try what you suggest, it gives me an error of "reference to a cleared variable app"

Anyway, I'm not really trying to programmatically rearrange the components, I just wanted to lay it out correctly once, having already created components. I found a workaround for this, which is to graphically load up components into new panels, and then unload them in the order you want them to be stacked (from back to front).

I'm pretty new to appdesigner, but I'll say it's maddening trying to figure out the simplest things, compared to normal matlab scripting.

[Sean de Wolski]

I was just copying what you had to show that it works, they were adjacent in the question so assumed it was all in your startup. I wouldn't recommend calling uipanel in startup!

It's definitely a fair enhancement request to have them be adjustable in the component browser on the right.

[paul harder]

Yes, intuitively I should be able to drag panels up and down the component browser to order the stacking. It seems like the stack order is tied to the order of creation, which is super inflexible.

Answer 2

[Kevin J. Delaney]

Inspired by Sean's answer, I wrote the attached utility for use in the startupFcn:

move_to_bottom(app.UIFigure, app.Axes);

Answer 3

[Wouter]

You could also keep a list of handles; e.g. in the variable background and than move all of these to the background.

hfig = uifigure; % create figure
hax = uiaxes(hfig); % create axis 
foreground = plot(hax,rand(1,100),'r'); % create red line
hold(hax,'on');
for ind = 1:10
   % this moves the foreground plot to the background...
   background(ind) = plot(hax,rand(1,100),'k'); % create 10 ack lines (on top of red line)
end

% move the background lines to the background!
ch = get(hax,'children'); % get all plots from hax
[~,neworder] = sort(ismember(ch,background)); % reorder the handles to move the background lines to the background
set(hax,'children',ch(neworder)); % set the new order of all lines

Answer 4

[Adam Danz]

Starting in MATLAB R2023a you can use uistack to control the stacking order of ui components in a uifigure such as in App Designer.

See release notes.