Changing the resizing panel when working with APP Designer Auto-Reflow template

29 views (last 30 days)
So I've buit an APP using App Designer and its template for a 3-panel app with auto-reflow. However, now that I've finished most of the coding I have realized, I didn't want the middle panel too widen when widening the whole uifigure, but the right panel. Is there a way to change it?
I suspect it might be changeble with the code below (was auto-generated when choosing the template), you can't manipulated this part within App Designer though (is within the dark gray-background area) ...
% Changes arrangement of the app based on UIFigure width
function updateAppLayout(app, event)
currentFigureWidth = app.UIFigure.Position(3);
if(currentFigureWidth <= app.onePanelWidth)
% Change to a 3x1 grid
app.GridLayout.RowHeight = {425, 425, 425};
app.GridLayout.ColumnWidth = {'1x'};
app.CenterPanel.Layout.Row = 1;
app.CenterPanel.Layout.Column = 1;
app.LeftPanel.Layout.Row = 2;
app.LeftPanel.Layout.Column = 1;
app.RightPanel.Layout.Row = 3;
app.RightPanel.Layout.Column = 1;
elseif (currentFigureWidth > app.onePanelWidth && currentFigureWidth <= app.twoPanelWidth)
% Change to a 2x2 grid
app.GridLayout.RowHeight = {425, 425};
app.GridLayout.ColumnWidth = {'1x', '1x'};
app.CenterPanel.Layout.Row = 1;
app.CenterPanel.Layout.Column = [1,2];
app.LeftPanel.Layout.Row = 2;
app.LeftPanel.Layout.Column = 1;
app.RightPanel.Layout.Row = 2;
app.RightPanel.Layout.Column = 2;
else
% Change to a 1x3 grid
app.GridLayout.RowHeight = {'1x'};
app.GridLayout.ColumnWidth = {196, '1x', 579};
app.LeftPanel.Layout.Row = 1;
app.LeftPanel.Layout.Column = 1;
app.CenterPanel.Layout.Row = 1;
app.CenterPanel.Layout.Column = 2;
app.RightPanel.Layout.Row = 1;
app.RightPanel.Layout.Column = 3;
end
end
And:
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.AutoResizeChildren = 'off';
app.UIFigure.Position = [100 100 1146 425];
app.UIFigure.Name = 'UI Figure';
app.UIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);
% Create GridLayout
app.GridLayout = uigridlayout(app.UIFigure);
app.GridLayout.ColumnWidth = {196, '1x', 579};
app.GridLayout.RowHeight = {'1x'};
app.GridLayout.ColumnSpacing = 0;
app.GridLayout.RowSpacing = 0;
app.GridLayout.Padding = [0 0 0 0];
app.GridLayout.Scrollable = 'on';
% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end

Answers (1)

Melissa Williams
Melissa Williams on 3 Dec 2019
Hi,
If you want your center to be a fixed size and the right panel to change size with the uifigure, you will want to change
app.GridLayout.ColumnWidth = {196, '1x', 579};
to something like
app.GridLayout.ColumnWidth = {196, 579, '1x'}; %where 579 = the width you want your center panel to be

Categories

Find more on Develop Apps Using App Designer in Help Center and File Exchange

Products


Release

R2019b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!