Managing Resizable Apps in App Designer

Apps you create in App Designer are resizable by default. The components reposition and resize automatically as the user changes the size of the window at run-time. This automatic resize behavior is controlled by the AutoResizeChildren property. By default, this property is enabled for the figure and child containers such as panels and tabs.

When the AutoResizeChildren property is enabled for a container, MATLAB® manages the size and position of only the immediate children in the container. Components in nested containers are managed by the AutoResizeChildren property of their immediate parent. To ensure that the alignment of components relative to one another (like a grouping of buttons) is preserved when your app is resized, parent the grouping of components to a panel, instead of directly to the figure.

Resizing Components with Normalized Position Units

When a child component of a resizable container has normalized position units, certain properties of the component are affected after the parent container is resized. For example,

If axes or charts use a value of 'normalized' for the Units property and are parented to a container with the AutoResizeChildren property set to 'on', then

  • The value of the OuterPosition property for the axes or chart will change when the app is resized.

  • The axes or chart will not shrink smaller than a minimum size when the app is resized.

If you want to avoid either of these behaviors, set the AutoResizeChildren property of the container to 'off'.

Disabling Automatic Resizing

You can disable the automatic resize behavior of a container by disabling the property. To disable the property in App Designer, select the container and clear the AutoResizeChildren check box in the Inspector tab of the Component Browser.

Whenever you select or clear this check box, App Designer sets the property to the same value on all its child containers. To set the AutoResizeChildren property of a child container to a different value, set the value for the child container after setting the value for the parent.

You can also set the property programmatically by setting the value to 'on' or 'off'. When you set the property programmatically, the value does not change for the child containers.

app.UIFigure.AutoResizeChildren = 'off';

To completely disable resizing, set the Resize property of the figure to 'off'.

Customizing Resize Behavior Using a SizeChangedFcn Callback

If the automatic resize behavior is not the behavior that you want, disable the AutoResizeChildren property and write a SizeChangedFcn callback for the container. In this callback, you write code to adjust the Position property of the child components. The callback executes when the size of the container changes.

For example, a SizeChangedFcn might contain code that keeps the width of an edit field at one quarter of the width of the figure.

figwidth = app.UIFigure.Position(3);
app.EditField.Position(3) = .25 * figwidth;

Note

Starting in R2017a, you must disable the AutoResizeChildren property to allow the SizeChangedFcn callback to execute. For more information, see App Designer: Disable automatic resize behavior when writing SizeChangedFcn callbacks.

See Also

Related Topics