1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<title>wxWidgets: Sizers Overview</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<link href="extra_stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="page_container">
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tbody>
<tr>
<td id="projectlogo">
<a href="http://www.wxwidgets.org/" target="_new">
<img alt="wxWidgets" src="logo.png"/>
</a>
</td>
<td style="padding-left: 0.5em; text-align: right;">
<span id="projectnumber">Version: 3.0.2</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Generated by Doxygen 1.8.2 -->
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="modules.html"><span>Categories</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
<div id="nav-path" class="navpath">
<ul>
<li class="navelem"><a class="el" href="index.html">Documentation</a></li><li class="navelem"><a class="el" href="page_topics.html">Programming Guides</a></li> </ul>
</div>
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Sizers Overview </div> </div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul><li class="level1"><a href="#overview_sizer_idea">The Idea Behind Sizers</a></li>
<li class="level1"><a href="#overview_sizer_features">Common Features</a></li>
<li class="level1"><a href="#overview_sizer_hiding">Hiding Controls Using Sizers</a><ul><li class="level2"><a href="#overview_sizer_hiding_box">wxBoxSizer</a></li>
<li class="level2"><a href="#overview_sizer_hiding_static">wxStaticBoxSizer</a></li>
<li class="level2"><a href="#overview_sizer_hiding_grid">wxGridSizer</a></li>
<li class="level2"><a href="#overview_sizer_hiding_flexgrid">wxFlexGridSizer</a></li>
</ul>
</li>
<li class="level1"><a href="#overview_sizer_box">Programming with wxBoxSizer</a></li>
<li class="level1"><a href="#overview_sizer_types">Other Types of Sizers</a></li>
<li class="level1"><a href="#overview_sizer_button">CreateButtonSizer</a></li>
</ul>
</div>
<div class="textblock"><p>Sizers, as represented by the <a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a> class and its descendants in the wxWidgets class hierarchy, have become the method of choice to define the layout of controls in dialogs in wxWidgets because of their ability to create visually appealing dialogs independent of the platform, taking into account the differences in size and style of the individual controls.</p>
<p>Unlike the original wxWidgets Dialog Editor, editors such as wxDesigner, DialogBlocks, XRCed and wxWorkshop create dialogs based exclusively on sizers, practically forcing the user to create platform independent layouts without compromises.</p>
<p>The next section describes and shows what can be done with sizers. The following sections briefly describe how to program with individual sizer classes.</p>
<p>For information about the wxWidgets resource system, which can describe sizer-based dialogs, see the <a class="el" href="overview_xrc.html">XML Based Resource System (XRC)</a>.</p>
<dl class="section see"><dt>See Also</dt><dd><a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a>, <a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>, <a class="el" href="classwx_static_box_sizer.html" title="wxStaticBoxSizer is a sizer derived from wxBoxSizer but adds a static box around the sizer...">wxStaticBoxSizer</a>, <a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a>, <a class="el" href="classwx_flex_grid_sizer.html" title="A flex grid sizer is a sizer which lays out its children in a two-dimensional table with all table fi...">wxFlexGridSizer</a>, <a class="el" href="classwx_grid_bag_sizer.html" title="A wxSizer that can lay out items in a virtual grid like a wxFlexGridSizer but in this case explicit p...">wxGridBagSizer</a></dd></dl>
<h1><a class="anchor" id="overview_sizer_idea"></a>
The Idea Behind Sizers</h1>
<p>The layout algorithm used by sizers in wxWidgets is closely related to layout systems in other GUI toolkits, such as Java's AWT, the GTK toolkit or the Qt toolkit. It is based upon the idea of individual subwindows reporting their minimal required size and their ability to get stretched if the size of the parent window has changed. This will most often mean that the programmer does not set the start-up size of a dialog, the dialog will rather be assigned a sizer and this sizer will be queried about the recommended size. This sizer in turn will query its children (which can be normal windows, empty space or other sizers) so that a hierarchy of sizers can be constructed. Note that <a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a> does not derive from <a class="el" href="classwx_window.html" title="wxWindow is the base class for all windows and represents any visible object on screen.">wxWindow</a> and thus does not interfere with tab ordering and requires very few resources compared to a real window on screen.</p>
<p>What makes sizers so well fitted for use in wxWidgets is the fact that every control reports its own minimal size and the algorithm can handle differences in font sizes or different window (dialog item) sizes on different platforms without problems. For example, if the standard font as well as the overall design of Linux/GTK widgets requires more space than on Windows, the initial dialog size will automatically be bigger on Linux/GTK than on Windows.</p>
<p>There are currently five different kinds of sizers available in wxWidgets. Each represents either a certain way to lay out dialog items in a dialog or it fulfills a special task such as wrapping a static box around a dialog item (or another sizer). These sizers will be discussed one by one in the text below. For more detailed information on how to use sizers programmatically, please refer to the section <a class="el" href="overview_sizer.html#overview_sizer_box">Programming with wxBoxSizer</a>.</p>
<h1><a class="anchor" id="overview_sizer_features"></a>
Common Features</h1>
<p>All sizers are containers, that is, they are used to lay out one dialog item (or several dialog items), which they contain. Such items are sometimes referred to as the children of the sizer. Independent of how the individual sizers lay out their children, all children have certain features in common:</p>
<p><b>A minimal size</b>: This minimal size is usually identical to the initial size of the controls and may either be set explicitly in the <a class="el" href="classwx_size.html" title="A wxSize is a useful data structure for graphics operations.">wxSize</a> field of the control constructor or may be calculated by wxWidgets, typically by setting the height and/or the width of the item to -1. Note that only some controls can calculate their size (such as a checkbox) whereas others (such as a listbox) don't have any natural width or height and thus require an explicit size. Some controls can calculate their height, but not their width (e.g. a single line text control):</p>
<div class="image">
<img src="overview_sizer_03.png" alt="overview_sizer_03.png"/>
</div>
<div class="image">
<img src="overview_sizer_04.png" alt="overview_sizer_04.png"/>
</div>
<div class="image">
<img src="overview_sizer_05.png" alt="overview_sizer_05.png"/>
</div>
<p><b>A border</b>: The border is just empty space and is used to separate dialog items in a dialog. This border can either be all around, or at any combination of sides such as only above and below the control. The thickness of this border must be set explicitly, typically 5 points. The following samples show dialogs with only one dialog item (a button) and a border of 0, 5, and 10 pixels around the button:</p>
<div class="image">
<img src="overview_sizer_00.png" alt="overview_sizer_00.png"/>
</div>
<div class="image">
<img src="overview_sizer_01.png" alt="overview_sizer_01.png"/>
</div>
<div class="image">
<img src="overview_sizer_02.png" alt="overview_sizer_02.png"/>
</div>
<p><b>An alignment</b>: Often, a dialog item is given more space than its minimal size plus its border. Depending on what flags are used for the respective dialog item, the dialog item can be made to fill out the available space entirely, i.e. it will grow to a size larger than the minimal size, or it will be moved to either the centre of the available space or to either side of the space. The following sample shows a listbox and three buttons in a horizontal box sizer; one button is centred, one is aligned at the top, one is aligned at the bottom:</p>
<div class="image">
<img src="overview_sizer_06.png" alt="overview_sizer_06.png"/>
</div>
<p><b>A stretch factor</b>: If a sizer contains more than one child and it is offered more space than its children and their borders need, the question arises how to distribute the surplus space among the children. For this purpose, a stretch factor may be assigned to each child, where the default value of 0 indicates that the child will not get more space than its requested minimum size. A value of more than zero is interpreted in relation to the sum of all stretch factors in the children of the respective sizer, i.e. if two children get a stretch factor of 1, they will get half the extra space each <em>independent of whether one control has a minimal sizer inferior to the other or not</em>. The following sample shows a dialog with three buttons, the first one has a stretch factor of 1 and thus gets stretched, whereas the other two buttons have a stretch factor of zero and keep their initial width:</p>
<div class="image">
<img src="overview_sizer_07.png" alt="overview_sizer_07.png"/>
</div>
<p>Within wxDesigner, this stretch factor gets set from the <em>Option</em> menu.</p>
<h1><a class="anchor" id="overview_sizer_hiding"></a>
Hiding Controls Using Sizers</h1>
<p>You can hide controls contained in sizers the same way you would hide any control, using the <a class="el" href="classwx_window.html#a7fbc92ce240a8d4f6956b6e0276ef07f" title="Shows or hides the window.">wxWindow::Show</a> method. However, <a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a> also offers a separate method which can tell the sizer not to consider that control in its size calculations. To hide a window using the sizer, call <a class="el" href="classwx_sizer.html#afb6638468fe2253d1870b4d387c57a0b" title="Shows or hides the window.">wxSizer::Show</a>. You must then call Layout on the sizer to force an update.</p>
<p>This is useful when hiding parts of the interface, since you can avoid removing the controls from the sizer and having to add them back later.</p>
<dl class="section note"><dt>Note</dt><dd>This is supported only by <a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> and <a class="el" href="classwx_flex_grid_sizer.html" title="A flex grid sizer is a sizer which lays out its children in a two-dimensional table with all table fi...">wxFlexGridSizer</a>.</dd></dl>
<h2><a class="anchor" id="overview_sizer_hiding_box"></a>
wxBoxSizer</h2>
<p><a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> can lay out its children either vertically or horizontally, depending on what flag is being used in its constructor. When using a vertical sizer, each child can be centered, aligned to the right or aligned to the left. Correspondingly, when using a horizontal sizer, each child can be centered, aligned at the bottom or aligned at the top. The stretch factor described in the last paragraph is used for the main orientation, i.e. when using a horizontal box sizer, the stretch factor determines how much the child can be stretched horizontally. The following sample shows the same dialog as in the last sample, only the box sizer is a vertical box sizer now:</p>
<div class="image">
<img src="overview_sizer_08.png" alt="overview_sizer_08.png"/>
</div>
<h2><a class="anchor" id="overview_sizer_hiding_static"></a>
wxStaticBoxSizer</h2>
<p>wxStaticBoxSixer is the same as a <a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>, but surrounded by a static box. Here is a sample:</p>
<div class="image">
<img src="overview_sizer_09.png" alt="overview_sizer_09.png"/>
</div>
<h2><a class="anchor" id="overview_sizer_hiding_grid"></a>
wxGridSizer</h2>
<p><a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a> is a two-dimensional sizer. All children are given the same size, which is the minimal size required by the biggest child, in this case the text control in the left bottom border. Either the number of columns or the number or rows is fixed and the grid sizer will grow in the respectively other orientation if new children are added:</p>
<div class="image">
<img src="overview_sizer_10.png" alt="overview_sizer_10.png"/>
</div>
<p>For programming information, see <a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a>.</p>
<h2><a class="anchor" id="overview_sizer_hiding_flexgrid"></a>
wxFlexGridSizer</h2>
<p>Another two-dimensional sizer derived from <a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a>. The width of each column and the height of each row are calculated individually according to the minimal requirements from the respectively biggest child. Additionally, columns and rows can be declared to be stretchable if the sizer is assigned a size different from the one it requested. The following sample shows the same dialog as the one above, but using a flex grid sizer:</p>
<div class="image">
<img src="overview_sizer_11.png" alt="overview_sizer_11.png"/>
</div>
<h1><a class="anchor" id="overview_sizer_box"></a>
Programming with wxBoxSizer</h1>
<p>The basic idea behind a <a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> is that windows will most often be laid out in rather simple basic geometry, typically in a row or a column or several hierarchies of either.</p>
<p>As an example, we will construct a dialog that will contain a text field at the top and two buttons at the bottom. This can be seen as a top-hierarchy column with the text at the top and buttons at the bottom and a low-hierarchy row with an OK button to the left and a Cancel button to the right. In many cases (particularly dialogs under Unix and normal frames) the main window will be resizable by the user and this change of size will have to get propagated to its children. In our case, we want the text area to grow with the dialog, whereas the button shall have a fixed size. In addition, there will be a thin border around all controls to make the dialog look nice and - to make matter worse - the buttons shall be centred as the width of the dialog changes.</p>
<p>It is the unique feature of a box sizer, that it can grow in both directions (height and width) but can distribute its growth in the main direction (horizontal for a row) <em>unevenly</em> among its children. In our example case, the vertical sizer is supposed to propagate all its height changes to only the text area, not to the button area. This is determined by the <em>proportion</em> parameter when adding a window (or another sizer) to a sizer. It is interpreted as a weight factor, i.e. it can be zero, indicating that the window may not be resized at all, or above zero. If several windows have a value above zero, the value is interpreted relative to the sum of all weight factors of the sizer, so when adding two windows with a value of 1, they will both get resized equally much and each half as much as the sizer owning them. Then what do we do when a column sizer changes its width? This behaviour is controlled by <em>flags</em> (the second parameter of the Add() function): Zero or no flag indicates that the window will preserve it is original size, wxGROW flag (same as wxEXPAND) forces the window to grow with the sizer, and wxSHAPED flag tells the window to change it is size proportionally, preserving original aspect ratio. When wxGROW flag is not used, the item can be aligned within available space. wxALIGN_LEFT, wxALIGN_TOP, wxALIGN_RIGHT, wxALIGN_BOTTOM, wxALIGN_CENTER_HORIZONTAL and wxALIGN_CENTER_VERTICAL do what they say. wxALIGN_CENTRE (same as wxALIGN_CENTER) is defined as (wxALIGN_CENTER_HORIZONTAL | wxALIGN_CENTER_VERTICAL). Default alignment is wxALIGN_LEFT | wxALIGN_TOP.</p>
<p>As mentioned above, any window belonging to a sizer may have a border, and it can be specified which of the four sides may have this border, using the wxTOP, wxLEFT, wxRIGHT and wxBOTTOM constants or wxALL for all directions (and you may also use wxNORTH, wxWEST etc instead). These flags can be used in combination with the alignment flags above as the second parameter of the Add() method using the binary or operator |. The sizer of the border also must be made known, and it is the third parameter in the Add() method. This means, that the entire behaviour of a sizer and its children can be controlled by the three parameters of the Add() method.</p>
<div class="fragment"><div class="line"><span class="comment">// We want to get a dialog that is stretchable because it</span></div>
<div class="line"><span class="comment">// has a text ctrl at the top and two buttons at the bottom.</span></div>
<div class="line"></div>
<div class="line">MyDialog::MyDialog(<a class="code" href="classwx_frame.html" title="A frame is a window whose size and position can (usually) be changed by the user.">wxFrame</a> *parent, <a class="code" href="windowid_8h.html#ae8091432cc2cb2485d45f2302fb51133" title="The type of unique identifiers (ID) used for wxWindow-derived classes.">wxWindowID</a> <span class="keywordtype">id</span>, <span class="keyword">const</span> <a class="code" href="classwx_string.html" title="String class for passing textual data to or receiving it from wxWidgets.">wxString</a> &title )</div>
<div class="line">: <a class="code" href="classwx_dialog.html" title="A dialog box is a window with a title bar and sometimes a system menu, which can be moved around the ...">wxDialog</a>(parent, id, title, <a class="code" href="gdicmn_8h.html#af5a90c753eaf3d3e3e5068a19ec3c1d0" title="Global instance of a wxPoint initialized with values (-1,-1).">wxDefaultPosition</a>, <a class="code" href="gdicmn_8h.html#a33a012cdb075e9f78c93f63bec2dc27b" title="Global instance of a wxSize object initialized to (-1,-1).">wxDefaultSize</a>,</div>
<div class="line"> <a class="code" href="interface_2wx_2dialog_8h.html#a05926442fcb63ec70f4389a62729027a">wxDEFAULT_DIALOG_STYLE</a> | <a class="code" href="defs_8h.html#ab2e7b3533b073e1df781c5b60ccc92d5">wxRESIZE_BORDER</a>)</div>
<div class="line">{</div>
<div class="line"> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> *topsizer = <span class="keyword">new</span> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>( <a class="code" href="defs_8h.html#a1e6994f40bd9cb140e292afb165af971a2134d1cb8cf605532880c118190695b5">wxVERTICAL</a> );</div>
<div class="line"></div>
<div class="line"> <span class="comment">// create text ctrl with minimal size 100x60</span></div>
<div class="line"> topsizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_text_ctrl.html" title="A text control allows text to be displayed and edited.">wxTextCtrl</a>( <span class="keyword">this</span>, -1, <span class="stringliteral">"My text."</span>, <a class="code" href="gdicmn_8h.html#af5a90c753eaf3d3e3e5068a19ec3c1d0" title="Global instance of a wxPoint initialized with values (-1,-1).">wxDefaultPosition</a>, <a class="code" href="classwx_size.html" title="A wxSize is a useful data structure for graphics operations.">wxSize</a>(100,60), <a class="code" href="textctrl_8h.html#af988f6550f22c211df70544355aed667">wxTE_MULTILINE</a>),</div>
<div class="line"> 1, <span class="comment">// make vertically stretchable</span></div>
<div class="line"> <a class="code" href="defs_8h.html#a27b6b668631a5f79f24d474af7d9b388a0d831bd6985c81f9bbc4830cc0c2e7df">wxEXPAND</a> | <span class="comment">// make horizontally stretchable</span></div>
<div class="line"> <a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, <span class="comment">// and make border all around</span></div>
<div class="line"> 10 ); <span class="comment">// set border width to 10</span></div>
<div class="line"></div>
<div class="line"> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> *button_sizer = <span class="keyword">new</span> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>( <a class="code" href="defs_8h.html#a1e6994f40bd9cb140e292afb165af971ab96154c324ed87cc17e9b227f9248c77">wxHORIZONTAL</a> );</div>
<div class="line"> button_sizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_button.html" title="A button is a control that contains a text string, and is one of the most common elements of a GUI...">wxButton</a>( <span class="keyword">this</span>, <a class="code" href="defs_8h.html#ac66d0a09761e7d86b2ac0b2e0c6a8cbbaeeb1bdf97306d7f0fdffb62c8af3d02f" title="Standard button and menu IDs.">wxID_OK</a>, <span class="stringliteral">"OK"</span> ),</div>
<div class="line"> 0, <span class="comment">// make horizontally unstretchable</span></div>
<div class="line"> <a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, <span class="comment">// make border all around (implicit top alignment)</span></div>
<div class="line"> 10 ); <span class="comment">// set border width to 10</span></div>
<div class="line"> button_sizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_button.html" title="A button is a control that contains a text string, and is one of the most common elements of a GUI...">wxButton</a>( <span class="keyword">this</span>, <a class="code" href="defs_8h.html#ac66d0a09761e7d86b2ac0b2e0c6a8cbba27aec3f2d4b5cf0e36c028bbab048206">wxID_CANCEL</a>, <span class="stringliteral">"Cancel"</span> ),</div>
<div class="line"> 0, <span class="comment">// make horizontally unstretchable</span></div>
<div class="line"> <a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, <span class="comment">// make border all around (implicit top alignment)</span></div>
<div class="line"> 10 ); <span class="comment">// set border width to 10</span></div>
<div class="line"></div>
<div class="line"> topsizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> button_sizer,</div>
<div class="line"> 0, <span class="comment">// make vertically unstretchable</span></div>
<div class="line"> <a class="code" href="defs_8h.html#a543dd017a172dc316253a8a1f351dde9aea58cfe429cf1512d3b026dea8c1b044">wxALIGN_CENTER</a> ); <span class="comment">// no border and centre horizontally</span></div>
<div class="line"></div>
<div class="line"> SetSizerAndFit(topsizer); <span class="comment">// use the sizer for layout and size window</span></div>
<div class="line"> <span class="comment">// accordingly and prevent it from being resized</span></div>
<div class="line"> <span class="comment">// to smaller size</span></div>
<div class="line">}</div>
</div><!-- fragment --><p>Note that the new way of specifying flags to <a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a> is via <a class="el" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>. This class greatly eases the burden of passing flags to a <a class="el" href="classwx_sizer.html" title="wxSizer is the abstract base class used for laying out subwindows in a window.">wxSizer</a>.</p>
<p>Here's how you'd do the previous example with <a class="el" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>:</p>
<div class="fragment"><div class="line"><span class="comment">// We want to get a dialog that is stretchable because it</span></div>
<div class="line"><span class="comment">// has a text ctrl at the top and two buttons at the bottom.</span></div>
<div class="line"></div>
<div class="line">MyDialog::MyDialog(<a class="code" href="classwx_frame.html" title="A frame is a window whose size and position can (usually) be changed by the user.">wxFrame</a> *parent, <a class="code" href="windowid_8h.html#ae8091432cc2cb2485d45f2302fb51133" title="The type of unique identifiers (ID) used for wxWindow-derived classes.">wxWindowID</a> <span class="keywordtype">id</span>, <span class="keyword">const</span> <a class="code" href="classwx_string.html" title="String class for passing textual data to or receiving it from wxWidgets.">wxString</a> &title )</div>
<div class="line">: <a class="code" href="classwx_dialog.html" title="A dialog box is a window with a title bar and sometimes a system menu, which can be moved around the ...">wxDialog</a>(parent, id, title, <a class="code" href="gdicmn_8h.html#af5a90c753eaf3d3e3e5068a19ec3c1d0" title="Global instance of a wxPoint initialized with values (-1,-1).">wxDefaultPosition</a>, <a class="code" href="gdicmn_8h.html#a33a012cdb075e9f78c93f63bec2dc27b" title="Global instance of a wxSize object initialized to (-1,-1).">wxDefaultSize</a>,</div>
<div class="line"> <a class="code" href="interface_2wx_2dialog_8h.html#a05926442fcb63ec70f4389a62729027a">wxDEFAULT_DIALOG_STYLE</a> | <a class="code" href="defs_8h.html#ab2e7b3533b073e1df781c5b60ccc92d5">wxRESIZE_BORDER</a>)</div>
<div class="line">{</div>
<div class="line"> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> *topsizer = <span class="keyword">new</span> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>( <a class="code" href="defs_8h.html#a1e6994f40bd9cb140e292afb165af971a2134d1cb8cf605532880c118190695b5">wxVERTICAL</a> );</div>
<div class="line"></div>
<div class="line"> <span class="comment">// create text ctrl with minimal size 100x60 that is horizontally and</span></div>
<div class="line"> <span class="comment">// vertically stretchable with a border width of 10</span></div>
<div class="line"> topsizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_text_ctrl.html" title="A text control allows text to be displayed and edited.">wxTextCtrl</a>( <span class="keyword">this</span>, -1, <span class="stringliteral">"My text."</span>, <a class="code" href="gdicmn_8h.html#af5a90c753eaf3d3e3e5068a19ec3c1d0" title="Global instance of a wxPoint initialized with values (-1,-1).">wxDefaultPosition</a>, <a class="code" href="classwx_size.html" title="A wxSize is a useful data structure for graphics operations.">wxSize</a>(100,60), <a class="code" href="textctrl_8h.html#af988f6550f22c211df70544355aed667">wxTE_MULTILINE</a>),</div>
<div class="line"> <a class="code" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>(1).Align().Expand().Border(<a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, 10));</div>
<div class="line"></div>
<div class="line"> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> *button_sizer = <span class="keyword">new</span> <a class="code" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a>( <a class="code" href="defs_8h.html#a1e6994f40bd9cb140e292afb165af971ab96154c324ed87cc17e9b227f9248c77">wxHORIZONTAL</a> );</div>
<div class="line"></div>
<div class="line"> <span class="comment">//create two buttons that are horizontally unstretchable,</span></div>
<div class="line"> <span class="comment">// with an all-around border with a width of 10 and implicit top alignment</span></div>
<div class="line"> button_sizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_button.html" title="A button is a control that contains a text string, and is one of the most common elements of a GUI...">wxButton</a>( <span class="keyword">this</span>, <a class="code" href="defs_8h.html#ac66d0a09761e7d86b2ac0b2e0c6a8cbbaeeb1bdf97306d7f0fdffb62c8af3d02f" title="Standard button and menu IDs.">wxID_OK</a>, <span class="stringliteral">"OK"</span> ),</div>
<div class="line"> <a class="code" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>(0).Align().Border(<a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, 10));</div>
<div class="line"></div>
<div class="line"> button_sizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> <span class="keyword">new</span> <a class="code" href="classwx_button.html" title="A button is a control that contains a text string, and is one of the most common elements of a GUI...">wxButton</a>( <span class="keyword">this</span>, <a class="code" href="defs_8h.html#ac66d0a09761e7d86b2ac0b2e0c6a8cbba27aec3f2d4b5cf0e36c028bbab048206">wxID_CANCEL</a>, <span class="stringliteral">"Cancel"</span> ),</div>
<div class="line"> <a class="code" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>(0).Align().Border(<a class="code" href="defs_8h.html#ac0f30319732dcceda470516918ff3556a066863c82a2c08f6f53b663de87c60b6">wxALL</a>, 10));</div>
<div class="line"></div>
<div class="line"> <span class="comment">//create a sizer with no border and centered horizontally</span></div>
<div class="line"> topsizer-><a class="code" href="classwx_sizer.html#a4e2122f2749261473c21cb192d00709f" title="Appends a child to the sizer.">Add</a>(</div>
<div class="line"> button_sizer,</div>
<div class="line"> <a class="code" href="classwx_sizer_flags.html" title="Container for sizer items flags providing readable names for them.">wxSizerFlags</a>(0).Center() );</div>
<div class="line"></div>
<div class="line"> SetSizerAndFit(topsizer); <span class="comment">// use the sizer for layout and set size and hints</span></div>
<div class="line">}</div>
</div><!-- fragment --><h1><a class="anchor" id="overview_sizer_types"></a>
Other Types of Sizers</h1>
<p><a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a> is a sizer which lays out its children in a two-dimensional table with all table fields having the same size, i.e. the width of each field is the width of the widest child, the height of each field is the height of the tallest child.</p>
<p><a class="el" href="classwx_flex_grid_sizer.html" title="A flex grid sizer is a sizer which lays out its children in a two-dimensional table with all table fi...">wxFlexGridSizer</a> is a sizer which lays out its children in a two-dimensional table with all table fields in one row having the same height and all fields in one column having the same width, but all rows or all columns are not necessarily the same height or width as in the <a class="el" href="classwx_grid_sizer.html" title="A grid sizer is a sizer which lays out its children in a two-dimensional table with all table fields ...">wxGridSizer</a>.</p>
<p><a class="el" href="classwx_static_box_sizer.html" title="wxStaticBoxSizer is a sizer derived from wxBoxSizer but adds a static box around the sizer...">wxStaticBoxSizer</a> is a sizer derived from <a class="el" href="classwx_box_sizer.html" title="The basic idea behind a box sizer is that windows will most often be laid out in rather simple basic ...">wxBoxSizer</a> but adds a static box around the sizer. Note that this static box has to be created separately.</p>
<p><a class="el" href="classwx_grid_bag_sizer.html" title="A wxSizer that can lay out items in a virtual grid like a wxFlexGridSizer but in this case explicit p...">wxGridBagSizer</a> is a rather special kind of sizer which, unlike the other classes, allows to directly put the elements at the given position in the sizer. Please see its documentation for more details.</p>
<h1><a class="anchor" id="overview_sizer_button"></a>
CreateButtonSizer</h1>
<p>As a convenience, <a class="el" href="classwx_dialog.html#ae362b7c61430593ef8ac5034f1bd92c8" title="Creates a sizer with standard buttons.">wxDialog::CreateButtonSizer(long flags)</a> can be used to create a standard button sizer in which standard buttons are displayed. The following flags can be passed to this function:</p>
<div class="fragment"><div class="line"><a class="code" href="defs_8h.html#a5ba00a09cea0417a2ef7c4a4c2b0012c">wxYES_NO</a> <span class="comment">// Add Yes/No subpanel</span></div>
<div class="line"><a class="code" href="defs_8h.html#ab38ccd9aa8aa47f9df32a75c96bb3000">wxYES</a> <span class="comment">// return wxID_YES</span></div>
<div class="line"><a class="code" href="defs_8h.html#ab1e324ba2871ccdef2d95fb718c8d479">wxNO</a> <span class="comment">// return wxID_NO</span></div>
<div class="line"><a class="code" href="defs_8h.html#ab4d4aadda843596c418ee4e9aca8582e">wxNO_DEFAULT</a> <span class="comment">// make the wxNO button the default,</span></div>
<div class="line"> <span class="comment">// otherwise wxYES or wxOK button will be default</span></div>
<div class="line"></div>
<div class="line"><a class="code" href="defs_8h.html#a9c40266b61a27f0124a69a699753889a">wxOK</a> <span class="comment">// return wxID_OK</span></div>
<div class="line"><a class="code" href="defs_8h.html#a5580412e224117ac127aacaafd49dc2e">wxCANCEL</a> <span class="comment">// return wxID_CANCEL</span></div>
<div class="line"><a class="code" href="defs_8h.html#a111c2b7b06972d742f4708983337825a">wxHELP</a> <span class="comment">// return wxID_HELP</span></div>
<div class="line"></div>
<div class="line"><a class="code" href="defs_8h.html#a377404cd3089fa8d10dadc683d00e4ce">wxFORWARD</a> <span class="comment">// return wxID_FORWARD</span></div>
<div class="line"><a class="code" href="defs_8h.html#ab0c64a1e5db9084bddfba2cf2817275d">wxBACKWARD</a> <span class="comment">// return wxID_BACKWARD</span></div>
<div class="line"><a class="code" href="defs_8h.html#a6771addb384bfe3ff47876507c8f7129">wxSETUP</a> <span class="comment">// return wxID_SETUP</span></div>
<div class="line"><a class="code" href="defs_8h.html#aaee38b3b3ceee5886cd2b9ca8a7ae3a9">wxMORE</a> <span class="comment">// return wxID_MORE</span></div>
</div><!-- fragment --> </div></div><!-- contents -->
<address class="footer">
<small>
Generated on Thu Nov 27 2014 13:46:42 for wxWidgets by <a href="http://www.doxygen.org/index.html" target="_new">Doxygen</a> 1.8.2
</small>
</address>
<script src="wxwidgets.js" type="text/javascript"></script>
</div><!-- #page_container -->
</body>
</html>
|
