]> git.saurik.com Git - wxWidgets.git/blame - docs/doxygen/overviews/sizer.h
Don't take the previous paragraph style when deleting paragraph marker
[wxWidgets.git] / docs / doxygen / overviews / sizer.h
CommitLineData
15b6757b
FM
1/////////////////////////////////////////////////////////////////////////////
2// Name: sizer
3// Purpose: topic overview
4// Author: wxWidgets team
5// RCS-ID: $Id$
6// Licence: wxWindows license
7/////////////////////////////////////////////////////////////////////////////
8
9/*!
36c9828f 10
15b6757b 11 @page sizer_overview Sizer overview
36c9828f
FM
12
13 Classes: #wxSizer, #wxGridSizer,
14 #wxFlexGridSizer, #wxBoxSizer,
15 #wxStaticBoxSizer,
15b6757b
FM
16 #CreateButtonSizer
17 Sizers, as represented by the wxSizer class and its descendants in
18 the wxWidgets class hierarchy, have become the method of choice to
19 define the layout of controls in dialogs in wxWidgets because of
20 their ability to create visually appealing dialogs independent of the
21 platform, taking into account the differences in size and style of
22 the individual controls. Unlike the original wxWidgets Dialog Editor,
23 editors such as wxDesigner, DialogBlocks, XRCed and wxWorkshop create dialogs based exclusively on sizers,
24 practically forcing the user to create platform independent layouts without compromises.
25 The next section describes and shows what can be done with sizers.
26 The following sections briefly describe how to program with individual sizer classes.
27 For information about the new wxWidgets resource system, which can describe
28 sizer-based dialogs, see the @ref xrc_overview.
29 @ref ideabehindsizers_overview
30 @ref boxsizerprogramming_overview
31 @ref gridsizerprogramming_overview
32 @ref flexgridsizerprogramming_overview
33 @ref staticboxsizerprogramming_overview
34 #CreateButtonSizer
36c9828f
FM
35
36
15b6757b 37 @section ideabehindsizers The idea behind sizers
36c9828f 38
15b6757b
FM
39 The layout algorithm used by sizers in wxWidgets is closely related to layout
40 systems in other GUI toolkits, such as Java's AWT, the GTK toolkit or the Qt toolkit. It is
41 based upon the idea of individual subwindows reporting their minimal required
42 size and their ability to get stretched if the size of the parent window has changed.
43 This will most often mean that the programmer does not set the start-up size of
44 a dialog, the dialog will rather be assigned a sizer and this sizer
45 will be queried about the recommended size. This sizer in turn will query its
46 children (which can be normal windows, empty space or other sizers) so that
47 a hierarchy of sizers can be constructed. Note that wxSizer does not derive from wxWindow
48 and thus does not interfere with tab ordering and requires very few resources compared
49 to a real window on screen.
50 What makes sizers so well fitted for use in wxWidgets is the fact that every control
51 reports its own minimal size and the algorithm can handle differences in font sizes
52 or different window (dialog item) sizes on different platforms without problems. For example, if
53 the standard font as well as the overall design of Linux/GTK widgets requires more space than
54 on Windows, the initial dialog size will automatically be bigger on Linux/GTK than on Windows.
55 There are currently five different kinds of sizers available in wxWidgets. Each represents
56 either a certain way to lay out dialog items in a dialog or it fulfills a special task
57 such as wrapping a static box around a dialog item (or another sizer). These sizers will
58 be discussed one by one in the text below. For more detailed information on how to use sizers
59 programmatically, please refer to the section @ref boxsizerprogramming_overview.
36c9828f 60
15b6757b 61 @section sizerscommonfeatures Common features
36c9828f 62
15b6757b
FM
63 All sizers are containers, that is, they are used to lay out one dialog item (or several
64 dialog items), which they contain. Such items are sometimes referred to as the children
65 of the sizer. Independent of how the individual sizers lay out their children, all children
66 have certain features in common:
67 @b A minimal size: This minimal size is usually identical to
68 the initial size of the controls and may either be set explicitly in the wxSize field
69 of the control constructor or may be calculated by wxWidgets, typically by setting
70 the height and/or the width of the item to -1. Note that only some controls can
71 calculate their size (such as a checkbox) whereas others (such as a listbox)
72 don't have any natural width or height and thus require an explicit size. Some controls
73 can calculate their height, but not their width (e.g. a single line text control):
36c9828f
FM
74
75
76
77
78
79
80
81
15b6757b
FM
82 @b A border: The border is just empty space and is used to separate dialog items
83 in a dialog. This border can either be all around, or at any combination of sides
84 such as only above and below the control. The thickness of this border must be set
85 explicitly, typically 5 points. The following samples show dialogs with only one
86 dialog item (a button) and a border of 0, 5, and 10 pixels around the button:
36c9828f
FM
87
88
89
90
91
92
93
15b6757b
FM
94 @b An alignment: Often, a dialog item is given more space than its minimal size
95 plus its border. Depending on what flags are used for the respective dialog
96 item, the dialog item can be made to fill out the available space entirely, i.e.
97 it will grow to a size larger than the minimal size, or it will be moved to either
98 the centre of the available space or to either side of the space. The following
99 sample shows a listbox and three buttons in a horizontal box sizer; one button
100 is centred, one is aligned at the top, one is aligned at the bottom:
36c9828f
FM
101
102
103
15b6757b
FM
104 @b A stretch factor: If a sizer contains more than one child and it is offered
105 more space than its children and their borders need, the question arises how to
106 distribute the surplus space among the children. For this purpose, a stretch
107 factor may be assigned to each child, where the default value of 0 indicates that the child
108 will not get more space than its requested minimum size. A value of more than zero
109 is interpreted in relation to the sum of all stretch factors in the children
110 of the respective sizer, i.e. if two children get a stretch factor of 1, they will
111 get half the extra space each @e independent of whether one control has a minimal
112 sizer inferior to the other or not. The following sample shows a dialog with
113 three buttons, the first one has a stretch factor of 1 and thus gets stretched,
114 whereas the other two buttons have a stretch factor of zero and keep their
115 initial width:
36c9828f
FM
116
117
118
15b6757b 119 Within wxDesigner, this stretch factor gets set from the @e Option menu.
36c9828f 120
15b6757b 121 @section sizershiding Hiding controls using sizers
36c9828f 122
15b6757b
FM
123 You can hide controls contained in sizers the same way you would hide any control,
124 using the wxWindow::Show method.
36c9828f 125 However, wxSizer also offers a separate method which can tell the sizer not to
15b6757b 126 consider that control in its size calculations. To hide a window using the sizer,
36c9828f 127 call wxSizer::Show. You must then call Layout on the sizer
15b6757b
FM
128 to force an update.
129 This is useful when hiding parts of the interface, since you can avoid removing
130 the controls from the sizer and having to add them back later.
131 Note: This is supported only by wxBoxSizer and wxFlexGridSizer.
132 @b wxBoxSizer
133 #wxBoxSizer can lay out its children either vertically
134 or horizontally, depending on what flag is being used in its constructor.
135 When using a vertical sizer, each child can be centered, aligned to the
136 right or aligned to the left. Correspondingly, when using a horizontal
137 sizer, each child can be centered, aligned at the bottom or aligned at
138 the top. The stretch factor described in the last paragraph is used
139 for the main orientation, i.e. when using a horizontal box sizer, the
140 stretch factor determines how much the child can be stretched horizontally.
141 The following sample shows the same dialog as in the last sample,
142 only the box sizer is a vertical box sizer now:
36c9828f
FM
143
144
145
15b6757b
FM
146 @b wxStaticBoxSizer
147 #wxStaticBoxSixer is the same as a wxBoxSizer, but surrounded by a
148 static box. Here is a sample:
36c9828f
FM
149
150
151
15b6757b
FM
152 @b wxGridSizer
153 #wxGridSizer is a two-dimensional sizer. All children are given the
154 same size, which is the minimal size required by the biggest child, in
155 this case the text control in the left bottom border. Either the number
156 of columns or the number or rows is fixed and the grid sizer will grow
157 in the respectively other orientation if new children are added:
36c9828f
FM
158
159
160
15b6757b
FM
161 For programming information, see #wxGridSizer.
162 @b wxFlexGridSizer
163 Another two-dimensional sizer derived from
164 wxGridSizer. The width of each column and the height of each row
165 are calculated individually according to the minimal requirements
166 from the respectively biggest child. Additionally, columns and
167 rows can be declared to be stretchable if the sizer is assigned
168 a size different from the one it requested. The following sample shows
169 the same dialog as the one above, but using a flex grid sizer:
36c9828f
FM
170
171
172
173
15b6757b 174 @section boxsizerprogramming Programming with wxBoxSizer
36c9828f 175
15b6757b
FM
176 The basic idea behind a #wxBoxSizer is that windows will most often be laid out in rather
177 simple basic geometry, typically in a row or a column or several hierarchies of either.
178 As an example, we will construct a dialog that will contain a text field at the top and
179 two buttons at the bottom. This can be seen as a top-hierarchy column with the text at
180 the top and buttons at the bottom and a low-hierarchy row with an OK button to the left
181 and a Cancel button to the right. In many cases (particularly dialogs under Unix and
182 normal frames) the main window will be resizable by the user and this change of size
183 will have to get propagated to its children. In our case, we want the text area to grow
184 with the dialog, whereas the button shall have a fixed size. In addition, there will be
185 a thin border around all controls to make the dialog look nice and - to make matter worse -
186 the buttons shall be centred as the width of the dialog changes.
187 It is the unique feature of a box sizer, that it can grow in both directions (height and
36c9828f 188 width) but can distribute its growth in the main direction (horizontal for a row) @e unevenly
15b6757b
FM
189 among its children. In our example case, the vertical sizer is supposed to propagate all its
190 height changes to only the text area, not to the button area. This is determined by the @e proportion parameter
191 when adding a window (or another sizer) to a sizer. It is interpreted
192 as a weight factor, i.e. it can be zero, indicating that the window may not be resized
193 at all, or above zero. If several windows have a value above zero, the value is interpreted
194 relative to the sum of all weight factors of the sizer, so when adding two windows with
195 a value of 1, they will both get resized equally much and each half as much as the sizer
196 owning them. Then what do we do when a column sizer changes its width? This behaviour is
197 controlled by @e flags (the second parameter of the Add() function): Zero or no flag
198 indicates that the window will preserve it is original size, wxGROW flag (same as wxEXPAND)
199 forces the window to grow with the sizer, and wxSHAPED flag tells the window to change it is
200 size proportionally, preserving original aspect ratio. When wxGROW flag is not used,
201 the item can be aligned within available space. wxALIGN_LEFT, wxALIGN_TOP, wxALIGN_RIGHT,
202 wxALIGN_BOTTOM, wxALIGN_CENTER_HORIZONTAL and wxALIGN_CENTER_VERTICAL do what they say.
203 wxALIGN_CENTRE (same as wxALIGN_CENTER) is defined as (wxALIGN_CENTER_HORIZONTAL |
204 wxALIGN_CENTER_VERTICAL). Default alignment is wxALIGN_LEFT | wxALIGN_TOP.
205 As mentioned above, any window belonging to a sizer may have a border, and it can be specified
206 which of the four sides may have this border, using the wxTOP, wxLEFT, wxRIGHT and wxBOTTOM
207 constants or wxALL for all directions (and you may also use wxNORTH, wxWEST etc instead). These
208 flags can be used in combination with the alignment flags above as the second parameter of the
209 Add() method using the binary or operator |. The sizer of the border also must be made known,
210 and it is the third parameter in the Add() method. This means, that the entire behaviour of
211 a sizer and its children can be controlled by the three parameters of the Add() method.
36c9828f 212
15b6757b
FM
213 @code
214 // we want to get a dialog that is stretchable because it
215 // has a text ctrl at the top and two buttons at the bottom
36c9828f 216
15b6757b
FM
217 MyDialog::MyDialog(wxFrame *parent, wxWindowID id, const wxString )
218 : wxDialog(parent, id, title, wxDefaultPosition, wxDefaultSize,
219 wxDEFAULT_DIALOG_STYLE | wxRESIZE_BORDER)
220 {
221 wxBoxSizer *topsizer = new wxBoxSizer( wxVERTICAL );
36c9828f 222
15b6757b
FM
223 // create text ctrl with minimal size 100x60
224 topsizer-Add(
225 new wxTextCtrl( this, -1, "My text.", wxDefaultPosition, wxSize(100,60), wxTE_MULTILINE),
226 1, // make vertically stretchable
227 wxEXPAND | // make horizontally stretchable
228 wxALL, // and make border all around
229 10 ); // set border width to 10
36c9828f
FM
230
231
15b6757b
FM
232 wxBoxSizer *button_sizer = new wxBoxSizer( wxHORIZONTAL );
233 button_sizer-Add(
234 new wxButton( this, wxID_OK, "OK" ),
235 0, // make horizontally unstretchable
236 wxALL, // make border all around (implicit top alignment)
237 10 ); // set border width to 10
238 button_sizer-Add(
239 new wxButton( this, wxID_CANCEL, "Cancel" ),
240 0, // make horizontally unstretchable
241 wxALL, // make border all around (implicit top alignment)
242 10 ); // set border width to 10
36c9828f 243
15b6757b
FM
244 topsizer-Add(
245 button_sizer,
246 0, // make vertically unstretchable
247 wxALIGN_CENTER ); // no border and centre horizontally
36c9828f 248
15b6757b
FM
249 SetSizerAndFit(topsizer); // use the sizer for layout and size window
250 // accordingly and prevent it from being resized
251 // to smaller size
252 }
253 @endcode
36c9828f 254
15b6757b
FM
255 Note that the new way of specifying flags to wxSizer is via #wxSizerFlags. This class greatly eases the burden of passing flags to a wxSizer.
256 Here's how you'd do the previous example with wxSizerFlags:
36c9828f 257
15b6757b
FM
258 @code
259 // we want to get a dialog that is stretchable because it
260 // has a text ctrl at the top and two buttons at the bottom
36c9828f 261
15b6757b
FM
262 MyDialog::MyDialog(wxFrame *parent, wxWindowID id, const wxString )
263 : wxDialog(parent, id, title, wxDefaultPosition, wxDefaultSize,
264 wxDEFAULT_DIALOG_STYLE | wxRESIZE_BORDER)
265 {
266 wxBoxSizer *topsizer = new wxBoxSizer( wxVERTICAL );
36c9828f
FM
267
268 // create text ctrl with minimal size 100x60 that is horizontally and
15b6757b
FM
269 // vertically stretchable with a border width of 10
270 topsizer-Add(
271 new wxTextCtrl( this, -1, "My text.", wxDefaultPosition, wxSize(100,60), wxTE_MULTILINE),
272 wxSizerFlags(1).Align().Expand().Border(wxALL, 10));
36c9828f 273
15b6757b 274 wxBoxSizer *button_sizer = new wxBoxSizer( wxHORIZONTAL );
36c9828f
FM
275
276 //create two buttons that are horizontally unstretchable,
15b6757b
FM
277 // with an all-around border with a width of 10 and implicit top alignment
278 button_sizer-Add(
279 new wxButton( this, wxID_OK, "OK" ),
36c9828f
FM
280 wxSizerFlags(0).Align().Border(wxALL, 10));
281
15b6757b
FM
282 button_sizer-Add(
283 new wxButton( this, wxID_CANCEL, "Cancel" ),
36c9828f
FM
284 wxSizerFlags(0).Align().Border(wxALL, 10));
285
15b6757b
FM
286 //create a sizer with no border and centered horizontally
287 topsizer-Add(
288 button_sizer,
36c9828f
FM
289 wxSizerFlags(0).Center() );
290
15b6757b
FM
291 SetSizerAndFit(topsizer); // use the sizer for layout and set size and hints
292 }
293 @endcode
36c9828f
FM
294
295
296
15b6757b 297 @section gridsizerprogramming Programming with wxGridSizer
36c9828f 298
15b6757b
FM
299 #wxGridSizer is a sizer which lays out its children in a two-dimensional
300 table with all table fields having the same size,
301 i.e. the width of each field is the width of the widest child,
302 the height of each field is the height of the tallest child.
36c9828f 303
15b6757b 304 @section flexgridsizerprogramming Programming with wxFlexGridSizer
36c9828f 305
15b6757b
FM
306 #wxFlexGridSizer is a sizer which lays out its children in a two-dimensional
307 table with all table fields in one row having the same
308 height and all fields in one column having the same width, but all
309 rows or all columns are not necessarily the same height or width as in
310 the #wxGridSizer.
36c9828f 311
15b6757b 312 @section staticboxsizerprogramming Programming with wxStaticBoxSizer
36c9828f 313
15b6757b 314 #wxStaticBoxSizer is a sizer derived from wxBoxSizer but adds a static
36c9828f 315 box around the sizer. Note that this static box has to be created
15b6757b 316 separately.
36c9828f 317
15b6757b 318 @section createbuttonsizer CreateButtonSizer
36c9828f 319
15b6757b
FM
320 As a convenience, CreateButtonSizer ( long flags ) can be used to create a standard button sizer
321 in which standard buttons are displayed. The following flags can be passed to this function:
36c9828f
FM
322
323
15b6757b
FM
324 @code
325 wxYES_NO // Add Yes/No subpanel
326 wxYES // return wxID_YES
327 wxNO // return wxID_NO
328 wxNO_DEFAULT // make the wxNO button the default, otherwise wxYES or wxOK button will be default
36c9828f 329
15b6757b
FM
330 wxOK // return wxID_OK
331 wxCANCEL // return wxID_CANCEL
332 wxHELP // return wxID_HELP
36c9828f
FM
333
334 wxFORWARD // return wxID_FORWARD
335 wxBACKWARD // return wxID_BACKWARD
336 wxSETUP // return wxID_SETUP
15b6757b
FM
337 wxMORE // return wxID_MORE
338 @endcode
36c9828f 339
15b6757b 340 */
36c9828f
FM
341
342