Using Panel Containers in Figures -- UIPanels :: Handle Graphics Objects (Graphics)

Graphics

Using Panel Containers in Figures -- UIPanels

Figures can contain axes and user interface objects directly, or you can parent these objects to uipanels, which you then parent to a figure. Uipanels are useful for the design of GUIs because they enable you to define subregions in a figure in which you can lay out components.

MATLAB interprets the Position property of all objects parented to a uipanel relative to the uipanel's position. If you move the uipanel, the children automatically move with it.

Uipanels can also contain other uipanels, as well as axes, uicontrols, and uibuttongroups. See the uipanel reference page for more information on uipanels.

Figure Resize Functions

Containing various parts of a GUI in uipanels simplifies the process of programming figure resize behavior because you can write a separate resize function for each panel. The following example illustrates how to do this.

Example -- Using Figure Panels

This example uses three uipanel objects as containers for the GUI's components. All three uipanels are then parented to the figure, as shown in the following containment hierarchy.

Here is a picture of the GUI with some data plotted in the axes.

Complete Example Code

Note If you are using the MATLAB Help browser, you can run this example or open it in the MATLAB editor.

This GUI enables you to select workspace variables from a list box and select a plot type from a pop-up menu. You can add plots to the existing graph by clicking the Hold toggle button and initiate the plot by clicking the Create Plot button.

Use the link above to run the example and open the GUI code in the MATLAB editor.

Creating the Uipanels

The following code shows the definition of the figure and the bottom panel. Setting Units to characters ensures that your GUI is properly sized on different computer systems. The Position property specifies the location and size of each component in units set by the Units property.

% Create the figure
f = figure('Units','characters',...
        'Position',[30 30 120 35],...
        'Color',panelColor,...
        'HandleVisibility','callback',...
        'IntegerHandle','off',...
        'Renderer','painters',...
        'ResizeFcn',@figResize);
% Create the bottom uipanel
botPanel = uipanel('BorderType','etchedin',...
        'BackgroundColor',panelColor,...
        'Units','characters',...
        'Position',[1/20 1/20 119.9 8],...
        'Parent',f,... 
        'ResizeFcn',@botPanelResize);

Programming the Resize Functions

As you resize the figure, MATLAB calls the figure resize function (specified by the object's ResizeFcn property), which, in this example, computes a new size for each uipanel. Because the figure resize function resizes the uipanels, MATLAB automatically calls the resize function of each uipanel once the figure resize function completes execution. The uipanel resize functions then adjust the sizes and locations of the components they contain.

The following diagram illustrates the sequence of events that occurs when a user resizes the figure.

The following code shows the figure, bottom panel, and right panel resize functions. As each function is called, it sets the object's size and position to values that are proportional to the original layout.

See Nested Functions for more information.

% Figure resize function
function figResize(src,evt)
    fpos = get(f,'Position');
    set(botPanel,'Position',...
        [1/20 1/20 fpos(3)-.1 fpos(4)*8/35])
    set(rightPanel,'Position',...
      [fpos(3)*85/120 fpos(4)*8/35 fpos(3)*35/120 fpos(4)*27/35])
    set(centerPanel,'Position',...
        [1/20 fpos(4)*8/35 fpos(3)*85/120 fpos(4)*27/35]);
end
% Bottom panel resize function
function botPanelResize(src,evt)
    bpos = get(botPanel,'Position');
    set(plotButton,'Position',...
        [bpos(3)*10/120 bpos(4)*2/8 bpos(3)*24/120 2])
    set(holdToggle,'Position',...
        [bpos(3)*45/120 bpos(4)*2/8 bpos(3)*24/120 2])
    set(popUp,'Position',...
        [bpos(3)*80/120 bpos(4)*2/8 bpos(3)*24/120 2])
    set(popUpLabel,'Position',...
        [bpos(3)*80/120 bpos(4)*4/8 bpos(3)*24/120 2])
end
% Right panel resize function
function rightPanelResize(src,evt)
    rpos = get(rightPanel,'Position');
    set(listBox,'Position',...
        [rpos(3)*4/32 rpos(4)*2/27 rpos(3)*24/32 rpos(4)*20/27]);
    set(listBoxLabel,'Position',...
        [rpos(3)*4/32 rpos(4)*24/27 rpos(3)*24/32 rpos(4)*2/27]);
end

Note that the center panel does not need a resize function because the axes automatically resize to fit the container (either a figure or uipanel).

To see the complete code listing for this example, see Complete Example Code.

Objects That Can Contain Other Objects Grouping Objects Within Axes -- hgtransform