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

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

Answer 1

[Melissa Williams]

Hi,

Yes it's possible to alter the template. See this post for detailed instructions. https://www.mathworks.com/matlabcentral/answers/455598-in-appdesigner-is-there-any-way-to-control-which-panels-change-size-under-auto-reflow?s_tid=answers_rc1-1_p1_Topic

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