Layout Samples
| Tabbed Pane Samples | Layout Sample 3 |
| Split Pane Samples | Layout Sample 4 |
| Layout Sample 1 | Layout Sample 5 |
| Layout Sample 2 |
It is perhaps easiest to see when to use certain layout elements by visually illustrating how they each combine to create a resizable dialog. Here are a number of further examples that combine some of the previous layout features and common interface layout design patterns.
Tabbed Pane Samples
Here is an example that generates content within a set of tabbed panes.
| In[6]:= |
| Out[6]= |
| In[7]:= |
| Out[7]= | ![]() |
Each element of the tabbed WidgetGroup can be a list of widgets to populate one tab panel or a single widget whose contents will be placed within one pane.
| In[8]:= |
| Out[8]= |
| In[9]:= |
Split Pane Samples
Here is an example that uses a split pane and shows how you can optionally name the split pane so it can be manipulated using its properties at runtime.
| In[6]:= |
| Out[6]= |
| In[7]:= |
| Out[7]= | ![]() |
| In[8]:= |
| Out[8]= |
If you resize the panel a little larger, you can see that you can programmatically move the divider position.
| In[9]:= |
| In[10]:= |
| Out[10]= | ![]() |
You can also use a method with percentage value instead of using the integer property value.
| In[11]:= |
Layout Sample 1
| In[12]:= |
| Out[12]= |
| In[13]:= |
| Out[13]= | ![]() |
| In[14]:= |
| Out[14]= | ![]() |
Layout Sample 2
| In[15]:= |
| Out[15]= |
| In[16]:= |
| Out[16]= | ![]() |
| In[18]:= |
| Out[18]= | ![]() |
Layout Sample 3
| In[19]:= |
| Out[19]= |
| In[20]:= |
| Out[20]= | ![]() |
| In[21]:= |
| Out[21]= | ![]() |
Layout Sample 4
| In[22]:= |
| Out[22]= |
| In[23]:= |
| Out[23]= | ![]() |
| In[24]:= |
| Out[24]= | ![]() |
Layout Sample 5
| In[25]:= |
| Out[25]= |
| In[26]:= |
| Out[26]= | ![]() |
| In[27]:= |
| Out[27]= | ![]() |





















