Organización de widgets en wxPython (Parte V)

Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la quinta parte de un tutorial que empieza AQUI.

En esta oportunidad hablaremos de dos Sizers: el StaticBoxSizer y el FlexGridSizer. Si ya entendiste el BoxSizer, el StaticBoxSizer no te traerá ningún problema, ya que son prácticamente iguales; y el FlexGridSizer es como el GridSizer, pero con algunas novedades que lo hacen mas flexible (de ahí su nombre).

El StaticBoxSizer

El StaticBoxSizer deriva del BoxSizer que ya hemos visto en la entrega anterior. Todo lo visto para el BoxSizer, vale para el StaticBoxSizer, es decir, tiene una versión Vertical y otra Horizontal, utiliza la propiedad Proportion para determinar que hacer con el espacio libre, etc.. La diferencia radica en que el StaticBoxSizer muestra un borde que delimita el área correspondiente al Sizer, y le podemos poner una etiqueta para informar de que se trata este área. Creo que en este caso, no hay duda que una imagen vale mas que mil palabras:

En la imágen puedes ver el recuadro del que te hablaba, y la etiqueta en la parte superior izquierda con el texto “Ejemplo de StaticBoxSizer”. Para crear este tipo de Sizer, procedemos del mismo modo que con el BoxSizer, excepto que pulsamos el botón “wxStaticBoxSizer” en la solapa “Layout” del panel de componentes de wxFormBuilder.

Por último, decirles que para cambiar la etiqueta que se muestra en el recuadro del StaticBoxSizer, debemos escribir lo que queremos en la propiedad “label”:

Como ves, este Sizer no presenta ninguna complicación si ya entendiste el BoxSizer. Ahora hablaremos del FlexGridSizer.

El FlexGridsizer

El FlexGridSizer es una variación del GridSizer que ya hemos visto. Al igual que el GridSizer, podemos pensar el FlexGridSizer como una grilla, donde en cada celda podemos ubicar un widget. En el caso del GridSizer, vimos que todas las celdas tenían el mismo tamaño, siendo que el ancho de las columnas estaba determinado por el widget mas ancho que existiera en cualquier columna, y el alto de las filas era igual al widget mas alto que hubiera dentro del Sizer. A diferencia del GridSizer, el FlexGridSizer nos permite tener filas y columnas de distinto tamaño, y en esto radica la flexibilidad de la que nos habla el nombre del Sizer. Si bien cada fila y cada columna pueden tener tamaños distintos, todas las celdas de una misma fila deben tener un mismo alto, y todas las celdas de una misma columna deben tener un mismo ancho. Veamos una imagen de ejemplo con un FlexGridSizer:

En esta imagen se puede apreciar lo que te decía en el párrafo anterior. Si te fijas bien, puedes ver que la primera fila tiene un alto distinto al de la segunda, y que la segunda columna tiene un ancho distinto al de la primera y la tercera. Pero como te decía antes, puedes ver que todas las celdas de cada fila son del mismo alto y las celdas de cada columna son del mismo ancho. Esta distribución, no lo hubiéramos podido lograr con el GridSizer “tradicional”.

Veamos como crear el ejemplo de la imagen con wxFormBuilder. Esta vez, voy a obviar el paso de crear el Frame y agregar los botones al Sizer, ya que asumo que si has llegado hasta aquí, y vienes siguiendo el tutorial desde el principio, ya sabes como hacerlo. Para crear el FlexGridSizer, vamos a la solapa "Layout" y pulsamos el botón “wxFlexGridSizer”:

Con esto ya tenemos el FlexGridSizer creado. Ahora le agregamos 6 botones y el resultado que deberías ver en el Editor de wxFormBuilder es el siguiente:

En la imagen podemos ver que si bien el FlexGridSizer ocupa todo el área del Frame, las filas y las columnas no crecen mas allá del alto y el ancho por defecto de los widgets que tienen en su interior. Recuerda que si esto fuera una GridSizer, las celdas si hubieran crecido hasta ocupar el 100% del espacio del Sizer.

Como dije antes, la idea es crear el ejemplo de la imagen que vimos al principio. Para ir aproximándonos un poco mas, debemos cambiar la cantidad de columnas de “2” a “3”, y así lograr dos filas de tres botones cada una. Esto lo hacemos del mismo modo que lo hacíamos con el GridSizer, por lo que sólo editamos los valores de las propiedades “Rows” y “Cols”:


Para lograr que las filas y las columnas "crezcan", tenemos las propiedades growablesrows y growablescols respectivamente. Aquí es importante aclarar que los índices de las filas y las columnas comienzan desde cero, es decir que la primera celda se encuentra en la fila 0 de la columna 0. En el ejemplo que estamos creando, la columna que crece es la “1” (la del medio) y la fila que crece es la “0” (la primera). Es por esto, que el valor de growablesrows será “0” y el de growablescols sera “1”:

En este momento el Editor se vería así:


Una vez mas, les remarque en rojo las celdas “virtuales” para mayor claridad. Aquí pueden ver como realmente la fila 0 ha crecido y la columna 1 también. Lo único que nos queda para terminar el ejemplo es que el botón de la fila 0 de la columna 1, ocupe todo el espacio de esta, y lo mismo para el botón de la fila 0 de la columna 2. Para lograr esto, activamos el Flag wxEXPAND de estos dos widgets, y listo:

En este ejemplo solo hicimos que crezcan la fila 0 y la columna 1, pero podríamos necesitar hacerlo con mas filas y/o columnas al mismo tiempo. Para esto puedes escribir en las propiedades growablesrows y growablescols según corresponda, los índices de las filas o las columnas separados por coma (,). Si quisiéramos que en el ejemplo también crezca la fila 1 y la columna 2, haríamos lo siguiente:

El resultado seria este:

Para terminar con el FlexGridSizer, vamos a ver dos propiedades mas: flexibledirection y non_flexible_grow_mode.

“flexibledirection” y “non_flexible_grow_mode”

La propiedad flexibledirection tiene tres valores posibles:

wxVERTICAL: las filas que especifiquemos en la propiedad growablesrows seran flexibles.

wxHORIZONTAL: las columnas especificadas en la propiedad growablescols seran flexibles.

wxBOTH: Tanto las filas que especifiquemos en la propiedad growablesrows, como las columnas especificadas en la propiedad growablescols serán flexibles

Si establecemos la propiedad flexibledirection con el valor wxVERTICAL o wxHORIZONTAL, debemos especificar como se deberá tratar la dirección que no es flexible, utilizando la propiedad non_flexible_grow_mode. Si hemos especificado wxHORIZONTAL (columnas flexibles), debemos decir que queremos que pase con el crecimiento de las filas, y si especificamos wxVERTICAL (filas flexibles), debemos decir como tratar el crecimiento de las columnas. Aquí entra en juego la propiedad non_flexible_grow_mode.

Dependiendo de que valor pongamos en la propiedad flexibledirection, tenemos tres escenarios posibles:

Escenario 1: La propiedad flexibledirection tiene el valor wxHORIZONTAL

En este caso debemos especificar en la propiedad growablecols las columnas que crecerán. Veamos que pasaría con las filas dependiendo de que valor pongamos en la propiedad non_flexible_grow_mode:

wxFLEX_GROWMODE_NONE: ninguna de las filas crecería. Se ignora el valor de la propiedad growablerows.

En la imagen puedes ver que especifique que crezcan las columnas 0 y 2, y que no crezca ninguna de las filas.

wxFLEX_GROWMODE_ALL: todas las filas crecerían. Se ignora el valor de la propiedad growablerows.

En este ejemplo especifique que crezcan las columnas 0 y 2, y todas las filas.

wxFLEX_GROWMODE_SPECIFIED: crecerían las filas que especifiquemos en la propiedad growablerows.

Aquí especifique que crezcan las columnas 0 y 2, y la fila 0.

Escenario 2: La propiedad flexibledirection tiene el valor wxVERTICAL

En este caso debemos especificar las filas que crecerán, en la propiedad growablerows. Veamos que pasaría con las columnas dependiendo de que valor pongamos en la propiedad non_flexible_grow_mode:

wxFLEX_GROWMODE_NONE: ninguna de las columnas crecería. Se ignora el valor de la propiedad growablecols.

Aquí especifique que crezcan las filas 0 y 2, y que no crezca ninguna de las columnas.

wxFLEX_GROWMODE_ALL: todas las columnas crecerían. Se ignora el valor de la propiedad growablecols.

En este ejemplo crecen las filas 0 y 2, y todas las columnas.

wxFLEX_GROWMODE_SPECIFIED: crecerían las columnas que especifiquemos en la propiedad growablecols.

Aquí crecen las filas 0 y 2, y la columna 1.

Escenario 3: La propiedad flexibledirection tiene el valor wxBOTH

Aquí deberemos especificar tanto las filas como las columnas que crecerán, haciendo uso de las propiedades growablerows y growablecols. En este escenario, el único valor válido para non_flexible_grow_mode es "wxFLEX_GROWMODE_SPECIFIED”, ya que no hay una dirección que no crezca; por este motivo debemos informar las filas y las columnas flexibles de forma explicita. Vale aclarar que este es el escenario por defecto.

wxFLEX_GROWMODE_SPECIFIED: crecerían las filas y las columnas que especifiquemos en la propiedad growablerows y growablecols.

Aquí crecen las filas 0 y 2, y la columna 1.

Y así llegamos al final de esta parte. Te invito a que comentes si algo no quedo del todo claro, si encuentras algún error, o quieres hacer alguna sugerencia.

Practica todo lo que puedas.

Hasta la próxima!

Editado:
Ya esta disponible la parte VI

Organización de widgets en wxPython (Parte IV)

Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la cuarta parte de un tutorial que empieza AQUI.

Como ya les había anticipado, en esta oportunidad seguiremos hablando de Sizers. Hasta ahora sólo hemos visto el GridSizer. En esta oportunidad veremos el BoxSizer (Vertical y Horizontal).

BoxSizer (Vertical y Horizontal)

El BoxSizer es uno de los Sizers más simples (y mas usados). La verdadera potencia de este Sizer, se basa en la posibilidad de agregar un BoxSizer dentro de otro BoxSizer.

Este tipo de Sizer, se puede imaginar como una simple fila donde los widgets se ubican uno al lado del otro (en el caso del BoxSizer Horizontal), o como una columna donde los widgets se ubican uno debajo del otro (en el caso del BoxSizer Vertical).

BoxSizer Horizontal

BoxSizer Vertical

En las dos imágenes de arriba, se ven las dos variantes de un BoxSizer. En realidad, el BoxSizer Vertical y Horizontal son el mismo Sizer, pero tiene una propiedad que define su orientación.

Al igual que en el GridSizer, en cada celda del BoxSizer, solo podemos ubicar un solo Widget. Como ya lo había hecho con el GridSizer, en las imágenes les remarque en color rojo, lo que serían las “celdas virtuales” donde se ubican los Widgets.

En este caso, no podemos especificar la cantidad de filas o columnas como hacíamos en el GridSizer; sino que aquí se van creando en forma automática cada vez que agregamos un Widget al BoxSizer. Si agregamos un Widget, y el BoxSizer es Horizontal, este se agrega a la derecha de los Widgets que ya existan en el Sizer; y si el BoxSizer es Vertical, el Widget se agregará abajo de todos los que se encuentren ya contenidos en el Sizer.

Crear un BoxSizer con wxFormBuilder, es tan simple como crear el GridSizer. Si estas siguiendo las distintas partes de este tutorial, ya casi sabes como hacerlo. De todos modos, lo veremos rápidamente en 3 pasos:

1- Creamos un Frame:

Veremos en el Editor, que el Frame se ha creado :

2- Hacemos click en la solapa "Layout", y luego clickeamos el botón correspondiente para la creación del BoxSizer:


3- Ahora agregamos algunos botones, del mismo modo que lo hicimos antes con el GridSizer. Para esto íbamos a la solapa "Common", y pulsabamos el botón para agregar un "wx.button" al Sizer:


Con estos pasos, ya tenemos el BoxSizer dentro de un Frame, con algunos botones (wx.button) adentro.

Cuando creamos el BoxSizer con wxFormBuilder, la orientación por defecto será “Vertical” (wx.VERTICAL); por lo tanto cada vez que pulses el botón para crear un “wx.button” (o cualquier otro widget), cada uno de estos se ubicará uno debajo de otro:

Si quisieramos que la orientacion sea Horizontal (wx.HORIZONTAL), seleccionamos el BoxSizer en el “Object Tree” (bSizer1), y luego en el panel de propiedades, elegimos la opción wx.HORIZONTAL en la lista desplegable de la propiedad Orient.


El Editor con el BoxSizer (Horizontal) se veria asi:


ACLARACION: Los numeros (1, 2, 3, 4) que vez en las imágenes, fueron agregados por mi, para representar en que orden fueron apareciendo los botones a medida que eran añadidos al Sizer.

Al redimensionar un BoxSizer, este toma el tamaño total disponible de su contenedor (del Frame en este caso), pero los widgets contenidos en cada una de las celdas, mantienen su tamaño original, y quedan “anclados” a la esquina superior izquierda de la celda en la que se encuentran, tal como sucedía con el GridSizer. Por suerte, aquí también podemos “jugar” con los Flags, y asi lograr adaptar la interface a nuestra necesidad. El modo de trabajo es exactamente igual que antes, elegimos el widget en cuestion y editamos sus Flags en el panel de propiedades, veamos un ejemplo de lo que podemos lograr:


Las opciones aplicadas a cada widget que ves en la imagen son las siguientes:

1- border=0 + wx.ALL

2- border=5 + wx.ALL + wx.ALIGN_CENTER_VERTICAL

3- border=5 + wx.ALL + wx.EXPAND

4- border=30 + wx.BOTTOM + wx.ALIGN_BOTTOM

5- border=20 + wx.ALL + wx.EXPAND

Este mismo ejemplo, pero en su versión “Vertical”, quedaría así:

Una propiedad muy importante en este tipo de Sizer es la llamada “Proportion”. Esta característica, nos permite determinar que hacer cuando al agregar un Widget al Sizer, nos queda “espacio en blanco” dentro de este. Como base para explicar este concepto (y como ya es costumbre) veamos una imagen:


Como ya hemos dicho antes, al agregar el BoxSizer dentro del Frame, el BoxSizer ocupa la totalidad del espacio del Frame. Como se ve en la imagen, puede ser que al agregar algunos widgets al BoxSizer, estos no ocupen el 100% del espacio disponible. En el ejemplo de la imagen anterior, vemos que al agregar sólo 3 botones, nos queda mucho espacio libre. En algunas circunstancias puede ser que es lo que queramos, pero también podría darse el caso en que deseamos otro comportamiento.

Por dar un ejemplo, podríamos querer que el último botón ocupe el total del espacio libre. Para este tipo de situaciones, tenemos la propiedad “Proportion”. Esta propiedad esta definida mediante un valor entero, que por defecto es “0”. Si la dejamos en "0", los widgets tomarán su tamaño por defecto.

Si establecemos la propiedad “Proportion” de un solo widget en “1”, este ocupara el 100% del espacio disponible que quede dentro del sizer. Si establecemos la propiedad “proportion” de dos widget en “1” dentro del mismo BoxSizer, significa que cada uno ocupara el 50% de lugar libre, y asi podemos ir combinando distintos valores, por ej: un widget en “1”, otro en “2”, otro en “3”, etc.. En definitiva, esta propiedad especifica como se distribuye el espacio libre del Sizer. Cuanto mayor sea el valor de la propiedad “proportion” de un widget, mas espacio ocupara este. Veamos el caso en que el ultimo botón ocupe el total del espacio libre:

Para lograr el comportamiento que ves en la imagen, tienes dos maneras.

1- Seleccionar el último botón en el Editor de wxFormBuilder, ir al panel de propiedades, y establecer el valor de Proportion en “1”.


2- Seleccionar el último botón en el Editor de wxFormBuilder y pulsar el botón “Strech” de la barra de herramientas (o pulsar ALT + S):

Al pulsar el boton “Strech”, lo unico que hace el IDE , es poner el valor “1” en la propiedad Proportion por nosotros.

Si sobre este mismo ejemplo, establecemos también la propiedad “Proportion” del segundo botón a “1”, el espacio libre se repartiría dando un 50% a cada widget. El ejemplo se vería así:

Si también establecemos la propiedad“Proportion” del primer botón a "1", el espacio libre quedaría dividido equitativamente, dándole a cada uno de los widgets, la misma cantidad de espacio. En este caso, cada botón tendrá un 1/3 del espacio total del sizer:

Veamos un ejemplo donde el primer botón tenga la propiedad “Proportion” en “0”, el segundo en “1” y el tercero en “2”. Se veria asi:

En esta imagen se puede apreciar que el primer botón (proportion="0") tiene su tamaño por defecto, el segundo botón (proportion="1") ocupa 1/3 del espacio libre que quedaria en el Sizer y el tercer botón (proportion="3") ocupa 2/3 del espacio libre.

Esta propiedad suele ser un tanto difícil de entender al principio, pero realmente no es tan compleja como parece. Sólo es cuestión de hacer unas cuantas pruebas, para ir viendo que resultado se obtienen al variar su valor.

En las ultimas imágenes, siempre vimos BoxSizer's verticales, pero lo dicho vale también si la orientación es horizontal:

En esta imagen vemos un BoxSizer con orientación Horizontal. Los dos primeros botones tienen su propiedad “Proportion” establecida en “0”, y el último en “1”; es por eso que el ultimo botón ocupa todo el espacio que quedaría libre dentro del Sizer.

IMPORTANTE:
Una diferencia importante, referida al espacio libre en un BoxSizer, es que si este tiene una orientacion Vertical, el espacio libre se encuentra abajo de todo, y si la orientacion es Horizontal, el espacio libre se encuentra a la derecha.

Entendiendo mejor wxEXPAND y Proportion

Es muy importante entender como funcionan estas dos caracteristicas dependiendo de si el BoxSizer es Vertical u Horizontal.

Si el BoxSizer es VERTICAL:

1- El Flag wx.EXPAND expande el widget para que ocupe el ancho total del Sizer, pero no afecta la altura del widget:

En la imagen el primer botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió a lo ancho, pero el alto esta igual que en el primer botón.


2- La propiedad “Proportion” modifica al widget en su altura, pero no afecta la el ancho del widget:


En esta imagen, el primer botón tiene “proportion” en “0” y NO esta activo el Flag wx.EXPAND. El segundo botón tiene “proportion” en “1”, y tampoco tiene activado el Flag wx.EXPAND. Se puede ver que el segundo botón se expandió a lo alto, pero el ancho es el mismo que en el primer botón.

3- Si activamos wx.EXPAND y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):


Podemos ver en la imagen, que al combinar las 2 opciones, el botón ocupa la totalidad del espacio libre. En realidad, lo que esta sucediendo, es que al activar el Flag wx.EXPAND, el widget se expande hasta ocupar todo el ancho, y luego, al establecer la propiedad “Proportion” a “1”, el widget crece hasta ocupar todo el alto.

Si el BoxSizer es HORIZONTAL:

Si la orientación del BoxSizer es Horizontal, todo se invierte. Veamos los 3 casos anteriores, pero con un BoxSizer Horizontal:

1- El Flag wx.EXPAND expande el widget para que ocupe el alto total del BoxSizer, pero no afecta al ancho del widget:


En la imagen, el primer botón tiene la propiedad “proportion” en “0” y NO esta activado el Flag wx.EXPAND. El segundo botón también tiene “proportion” en “0”, pero SI tiene activado el Flag wx.EXPAND. Se puede observar claramente que el segundo botón se expandió en el alto, pero su ancho esta igual que en el primer botón.

2- La propiedad Proportion modifica al widget en su ancho, pero no afecta el alto del widget:

3- Si activamos el Flag wx.EXPAND, y establecemos el valor de la propiedad Proportion en un valor distinto de “0”, logramos que el widget crezca en ambos sentidos (Alto y ancho):


En la imagen podemos ver que combinando las 2 opciones, el botón ocupa la totalidad del espacio libre del Sizer. En realidad, lo que esta sucediendo, es que al activar el Flag wx.EXPAND, el widget se expande hasta ocupar todo el alto, y luego, al establecer la propiedad “Proportion” a “1”, el widget crece hasta ocupar todo el alto.

Por el momento, dejaremos aquí, pero hemos visto bastante acerca del BoxSizer en su version Horizontal y Vertical. Hablamos de sus caracteristicas y como crearlos en wxFormBuilder. Hablamos tambien sobre la propiedad “Proportion” y seguimos utilizando los Flags que habiamos visto antes.

Creo que hemos avanzado bastante, asi que te invito nuevamente a practicar de modo que vayas manejando con fluidez los conceptos vistos (Flags, Proportion, GridSizer, BoxSizer, etc.), y te sientas comodo utilizando wxFormBuilder. En la proxima entrega, vamos a ver una variación del BoxSizer: el StaticBoxSizer y hablaremos tambien del FlexGridSizer.

Ya estamos muy cerca de comenzar con ejemplos de interfaces mas “reales” y útiles.

Suerte!

Editado:
Ya esta disponible la parte V

Organización de widgets en wxPython (Parte III)

Si has llegado aquí mediante un buscador o por simple casualidad, te cuento que estas en la tercera parte de un tutorial que empieza AQUI.

... continuando con los Flags

En la segunda parte de este tutorial, les había prometido continuar con el tema de los Flags, y esto es lo que trataremos justamente ahora.

El primer caso que veremos, será sobre el Flag de alineación wx.ALIGN_CENTER:


En la imagen podemos apreciar el Editor (Arriba) y el panel de propiedades (Abajo) de wxFormBuilder. En el Editor dibuje una grilla de color rojo, para que tengas de referencia el tamaño de cada celda. Como ya habíamos dicho, en un GridSizer todas las celdas son iguales, y de echo esto lo puedes apreciar en la imagen, pero como puedes ver, en la primera celda (Fila 0, Col. 0) el widget se encuentra con una alineación distinta a la del resto. Para lograr esto, en el Editor debes seleccionar el widget con el que quieres trabajar, y luego en el panel de propiedades desplegar la sección Flags (lo puedes ver en la parte de abajo de la imagen), y activar la opción wxALIGN_CENTER.

En la captura de pantalla, se pueden ver desplegados todos los Flags. Si quisiéramos cambiar alguno de ellos, simplemente la activamos o desactivamos desde el checkbox que tienen a la derecha.

En el siguiente ejemplo vamos a combinar algunos de ellos:


En este ejemplo vemos que cada una de los widgets posee una alineación distinta. Las opciones aplicadas en cada caso son las siguientes:

1- wx.ALIGN_CENTER

2- wx.ALIGN_BOTTOM + wx.ALIGN_RIGHT

3- wx.ALIGN_CENTER_VERTICAL

4- wx.ALIGN_CENTER_HORIZONTAL + wx.ALIGN_CENTER_BOTTOM

5- wx.ALIGN_CENTER_VERTICAL + wx.ALIGN_RIGHT

6- wx.ALIGN_BOTTOM

Si miras con detenimiento en la imagen, te puedes dar cuenta que los widgets nunca llegan hasta el borde de las “celdas virtuales” (que por claridad, yo las dibuje en rojo). Esto se debe a que el valor de la propiedad “border” esta en 5, y esta aplicado a los cuatro lados de los widgets (wx.ALL). En el ejemplo siguiente, variaremos los bordes (además de la alineación):

Las opciones de cada widget de la imagen son los siguientes:

1- border=0 + wx.ALIGN_RIGHT + wx.ALL

2- border=30 + wx.ALIGN_RIGHT + wx.RIGHT

3- border=40 + wx.LEFT + wx.TOP

4- border=30 + wx.ALIGN_LEFT

Ahora veremos un ejemplo donde usaremos los Flags wx.EXPAND, wx.SHAPED y wx.GROW.

Los Flags utilizados en cada widget de la imagen, son los siguientes:

1- border=0 + wx.ALL + wx.EXPAND

2- border=5 + wx.ALL + wx.SHAPED

3- border=20 + wx.ALL + wx.EXPAND

4- No hay widget en esta celda.

Si bien en las celdas 1 y 3 estamos usando el Flag wx.EXPAND, y por lo tanto los widgets deben ocupar la totalidad del espacio de la celda en la que estén, pareciera que en la celda 3 no se cumple, pero en realidad si. La diferencia entre las dos celdas, es que la primera tiene un borde de 0px en todos sus lados, y la celda 3 tiene un borde de 20px en todos sus lados, por lo que puedes deducir que con el Flag wx.EXPAND, el widget se expande, pero contempla los bordes especificados en la propiedad “border”.
En el caso de la celda 2, es difícil entender como funciona el Flag wx.SHAPED, así que te voy a mostrar dos imágenes donde se encuentra la misma ventana, pero en dos tamaños distintos:

En estas ultimas 2 capturas, vemos que la celda 2, al utilizar el Flag wx.SHAPED, hace que al agrandarse o achicarse la ventana, el widget lo haga también en forma proporcional. Para que lo veas aun mejor, aislé el botón de la celda 2, de las dos imágenes y aquí los tienes uno debajo del otro:

En este punto seria bueno que experimentes tu mismo combinando los distintos Flags que hemos visto. El Flag wx.GROW no se encuentra disponible en wxFormsBuilder, y esto es así porque en realidad (como dijimos antes) es lo mismo que wx.EXPAND.

Por ahora llegaremos hasta aquí. A partir de la próxima parte del tutorial, seguiremos viendo el resto de los Sizers. Si bien esta parte no fue muy extensa, era necesaria para que podamos continuar.

Recuerda que puedes dejar tus dudas, sugerencias, experiencias o lo que quieras para que todos podamos aprender de ti también.

Editado:
Ya esta disponible la parte IV.