Tu portal de
formación online
United States

Infórmate
Inicio » Catálogo » Curso de Visual Basic.NET 2008 » 2. El IDE. Formularios

Curso de Visual Basic.NET 2008

2. El IDE. Formularios

Vamos a seguir practicando con el entorno de desarrollo integrado. Por ejemplo vamos a hacer que los controles que tengamos en un formulario se adapten de forma automática al nuevo tamaño de la ventana así como a los distintos tamaños de fuentes que el usuario de nuestras aplicaciones .NET prefiera usar, ya que no todo el mundo usa la misma resolución que nosotros ni los mismos tamaños de letras. Ya habréis visto en algunas aplicaciones cómo al maximizar la ventana se descolocan los controles o simplemente se quedan en una esquina de la ventana. Veamos como hacer esto.



2.1 Redimensionar los controles en un formulario

Si queremos realizar este ajuste de los controles de un formulario con las versiones anteriores de Visual Basic teníamos muchas dificultades por las limitaciones que tenía, era un trabajo duro y bastante engorroso, que requería bastante código y casi nunca se lograba el objetivo.

Veamos un caso típico: el tamaño de una ventana de Windows, (que al fin y al cabo es un formulario), se puede hacer redimensionable, es decir que el usuario puede cambiar de tamaño. Lo normal es que los controles que dicho formulario contiene se adapten al nuevo tamaño de la ventana, con la idea de que no queden huecos vacíos al cambiar el tamaño de la ventana.

Por ejemplo, si tenemos esta ventana (o formulario):


y la agrandamos, por ejemplo para que tenga este otro aspecto:

Comprobaremos que la ventana se ha agrandado, pero los controles que hay en ella siguen teniendo el mismo tamaño y la misma posición que en la ventana anterior, es decir, que cuando se diseñó el formulario.

Pues bien, la idea de lo que queremos hacer aquí es que al cambiar el tamaño de la ventana se ajusten los controles al nuevo tamaño, para que tuviesen este otro aspecto:

Para que esto sea posible de forma automática, hay que hacer unas cuantas asignaciones a los controles, de forma que podamos indicarle qué tienen que hacer cuando el tamaño de la ventana varíe. En este ejemplo, lo correcto sería que:

  • La caja de texto superior se agrandase hacia el lado derecho.
  • El botón Añadir se moviese hacia el extremo derecho del formulario.
  • La lista se ajustara al ancho y también al alto de la ventana.

Todo esto lo podemos hacer en tiempo de diseño, es decir cuando tenemos el formulario en el entorno integrado o bien lo podemos codificar dentro del propio formulario, dónde hacerlo queda a tu criterio, veamos cómo hacerlos en  los dos casos y queda a tu elección cual de los dos métodos quieres utilizar.

Antes de empezar vamos a crear un nuevo proyecto. Creamos un proyecto del tipo Windows, (aplicación Windows o Windows Application), y le ponemos como nombre WinApp3.

Añadimos una etiqueta (Label), un cuadro de texto (TextBox), un botón (Button) y un cuadro de lista (ListBox). Dejamos los nombres que el IDE ha puesto, salvo para el botón, el cual se llamará cmdAdd. Colócalos como hemos visto en la figura de arriba en el primer caso:



Ejemplo 1. Utilizando el IDE

Comenzamos: selecciona el cuadro de texto (TextBox1) y en la ventana de propiedades, selecciona Anchor, verás que por defecto estarán los valores Left y Top, esto quiere decir que la caja de textos estará "anclada" a la izquierda y arriba, pero ahora vamos a seleccionar también la derecha. Cuando pulses en la lista desplegable verás que se muestra una imagen con cuatro líneas:

Inicialmente sólo estaban marcadas la superior y la izquierda con color mas oscuro. Pulsa ahora la línea de la derecha, para que se ponga gris, de esta forma estaremos indicándole que también se "ancle" a la derecha.

Vamos a comprobar que esto funciona... Pulse en el botón de ejecución o en la tecla F5, cuando tengas el formulario amplia el tamaño de la ventana verás lo siguiente:

Perfecto, el cuadro de texto se ha adaptado al nuevo tamaño. Ahora encoje la ventana e  incluso haz que no se vea el botón, podremos comprobar que el cuadro de texto sigue estando proporcionalmente igual de separada de los extremos superior, derecho e izquierdo y se adapta al tamaño de la ventana.

Incluso si intentamos hacer la ventana muy pequeña, el ancho se quedará justo en la parte izquierda de la caja de texto, con el alto puedes hacer que casi desaparezca, (salvo el título de la ventana, la barra de arriba, que se mantiene).

Ahora vamos a "anclar" el botón. Selecciona el botón y en la ventana de propiedades selecciona la propiedad Anchor. En este caso, lo que nos interesa es que el botón se desplace a la derecha, pero que no se haga más grande. Para ello, debes seleccionar las líneas de la derecha y la de arriba.

Es decir: ánclate en la parte de arriba y en la derecha, de forma que si cambiamos el tamaño del formulario, el botón se desplazará a la derecha o a la izquierda, pero no cambiará de tamaño, como le ocurre al cuadro de texto:

Si pulsamos F5 veremos que el botón llegará casi a tocar el lado izquierdo del formulario y allí se quedará, no permitiendo que se haga más pequeño.

Por último vamos a anclar el cuadro de lista... en este caso debe hacerse grande tanto hacia la derecha como hacia la izquierda e incluso cuando se estira el formulario desde la parte inferior, pero en la parte superior debe mantenerse en la misma posición. Simplemente debemos marcar las cuatro posiciones y hará que se ajuste siempre en la parte inferior y derecha.

Ver el código del programa

Vamos a complicar un poco más la cosa y vamos a añadirle otro botón. En este caso, el botón estará en la parte inferior derecha del formulario, será el botón cerrar y al pulsarlo hay que cerrar el formulario.

Utilizaremos el método "close" del formulario en el evento clic del botón. Es decir Me.Close en el evento Clic de botón, que vamos a llamar cmdCerrar. Como decíamos antes, este botón se debería anclar en la parte inferior derecha, por tanto los valores que hay que asignar en Anchor son precisamente esos: Right y Botton (derecha y abajo).

Como habrás notado, con el Label1 no hay que hacer nada, ya que por defecto el tamaño se ajusta por la derecha y por abajo, por tanto se quedará en la misma posición... aunque realmente está anclada arriba y a la izquierda, que son los valores por defecto de la propiedad Anchor, por eso no es necesario asignarle nada.

Ver el código para incluir el botón

Los programadores de Visual Basic 6 verán que este entorno ha mejorado considerablemente y que merece la pena este reciclaje. El mismo código para hacer el caso anterior era realmente complicado y laborioso. Ahora vamos a ver cómo hacerlo mediante código. Siendo tan sencillo de forma gráfica... ¿para que complicarnos la vida haciéndolo por código?  La respuesta es sencilla: ¡para practicar!. La mejor forma de aprender es practicando así que veremos como utilizar estas propiedades desde el código así aprenderemos mas cosas...



Ejemplo 2. Por código

Volvamos a nuestro IDE y hacemos doble clic en el formulario, dentro de él. Ten cuidado en no hacerlo en algunos de los controles (botones, cuadro de lista, ..) debe ser en el formulario, se debe mostrar el evento Form_Load:

   Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
             Handles MyBase.Load
    
    End Sub

Este código es el que se va a ejecutar cuando se cargue el formulario. Vimos cuando hicimos doble clic en el botón que nos presentaba el código para ese evento. Si lo hacemos en el formulario se presenta el código que ejecutará al cargar (Load) el formulario Form1: Form1.Load, además aparecen una serie de parámetros que ye veremos mas adelante. Esto se ejecuta pues cuando el formulario "se carga" en la memoria, justo antes de mostrarse, por tanto aquí es un buen sitio para hacer algunas "inicializaciones" o asignaciones que nuestro formulario necesite. De hecho es muy utilizado para  podemos limpiar el contenido de la lista, el del cuadro de texto, etc. e incluso hacer las asignaciones para que los controles se queden "anclados" en la posición que nosotros le indiquemos.

Vamos a ver primero cómo se "declara" este evento, aunque el VB lo hace automáticamente por nosotros, es conveniente verlo para ir aclarando conceptos... que tal vez ahora no necesites, pero en un futuro casi seguro que te hubiese gustado haberlo sabido.

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _

     Handles MyBase.Load

        Me.TextBox1.Text = ""
        Me.ListBox1.Items.Clear()

    End Sub

Lo primero que hay que entender es que la palabra Handles es la palabra que le indica al compilador de Visual Basic .NET qué evento es el que "manipula" o maneja este procedimiento. Esto, (la declaración del Sub), se encarga de manejar el evento Load del objeto MyBase. Resumiendo: es el código que se va a ejecutar cuando (handles) se inicie el formulario (mybase.load).

El objeto Mybase se refiere al objeto base del que se deriva el formulario, recuerda que en .NET todo está basado en objetos y en programación orientada a objetos y todo objeto se deriva de un objeto básico o que está más bajo en la escala de las clases... es decir, un formulario se basa en la clase System.Windows.Forms.Form y a esa clase es a la que hace referencia el objeto MyBase, mientras que Me se refiere a la clase actual, la que se ha derivado de dicha clase Form o por extensión a cualquier clase, como veremos en futuras ocasiones. Tranquilo verás como mas adelante entenderás esto mejor...

Veamos ahora el código para que los controles se anclen al formulario de forma que se adapten al nuevo tamaño del mismo:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _ 

   Handles MyBase.Load



    Me.TextBox1.Text = ""
    Me.ListBox1.Items.Clear()

    ' Asignar los valores para "anclar" los controles al formulario
    ' El TextBox1 se anclará a Arriba, Izquierda y Derecha
    TextBox1.Anchor = AnchorStyles.Top Or AnchorStyles.Left Or AnchorStyles.Right

    ' El botón Añadir lo hará Arriba y a la derecha:
    cmdAdd.Anchor = AnchorStyles.Top Or AnchorStyles.Right

    ' El listbox lo hará en los cuatro vértices:
    ListBox1.Anchor = AnchorStyles.Top Or AnchorStyles.Left Or _
  AnchorStyles.Right Or AnchorStyles.Bottom

    ' El botón cerrar sólo lo hará a la derecha y abajo
    cmdCerrar.Anchor = AnchorStyles.Right Or AnchorStyles.Bottom
End Sub

Cuando se inicie el formulario se realizarán las siguientes operaciones: limpiamos el contenido del cuadro de texto, simplemente asignándole una cadena vacía a la propiedad que almacena el texto que se escribe en pantalla Text: Me.Textbox1.Text="". Muchas veces los objetos se leen al revés para interpretarlos mejor en este caso sería: asignamos una cadena vacía a la propiedad Text del cuadro de texto llamado Textbox1 del formulario actual Me.

Listbox es un cuadro de lista, es decir es una lista de elementos. Inicialmente cuando se ejecute el programa quiero borrar todos los elementos así que los borro llamando al método Clear de la colección de elementos, así la dejo en blanco (ya la veremos con mas detalle). El resto del código asigna a la propiedad Anchor (anclaje) los valores que queremos y que luego condicionarán su funcionamiento. Por ejemplo .

TextBox1.Anchor = AnchorStyles.Top Or AnchorStyles.Left Or AnchorStyles.Right

Hará que el cuadro de texto se ancle arriba a la izquierda y a la derecha. Los Ors que se están utilizando sirven para "sumar" y el resultado sería el mismo que si usáramos el signo de suma, pero la razón de usar Or es porque lo que queremos hacer es una suma de bits... realmente da lo mismo usar la suma que Or en este caso, pero dejemos el Or que es lo apropiado ya que no estamos sumando números sino concatenando propiedades. Luego le asociaremos estas tres características de anclaje al control Textbox.

Ver el código para anclar controles


2.2 Redimensionar el tipo de letra en un formulario

Sigamos ajustando nuestro formulario, esta vez que los controles se adapten también a otros tamaños de fuentes, no a los que nosotros tenemos en nuestro equipo... ya que hay gente que por necesidades tienen que poner tamaños de fuentes más grandes e incluso más pequeñas... que también hay quién tiene un monitor de 19 o 21 pulgadas y lo mismo tienen que usar letras de tamaños más pequeños...

La propiedad que hace eso posible es AutoScale, esta propiedad sólo está disponible en los formularios y por defecto tiene el valor True (verdadero), por tanto los formularios, sin necesidad de que hagamos nada, se auto ajustarán al tamaño de las fuentes.

Otro tema interesante que tienen los formularios es la propiedad AutoScroll. Si asignamos el valor True (verdadero) a esta propiedad, hacemos que cuando el formulario se haga muy pequeño o muy estrecho, se muestren unas barras de desplazamiento (scrolls) para que pulsando en ellas podamos ver el contenido del mismo.

Por ejemplo si no hubiésemos "anclado" nuestros controles, al hacer el formulario más estrecho se mostrarían unas barras de desplazamiento para que podamos ver los controles que están contenidos en el formulario como en esta figura:

Sigamos escribiendo algunos ejemplos de código para seguir familiarizándonos con el IDE de .NET. Queremos hacer lo siguiente en nuestro programa:

  1. Al pulsar en el botón Añadir, se añadirá a la lista lo que hayas escrito en la caja de textos.
  2. Al pulsar Intro será como si hubieses pulsado en el botón Añadir.
  3. Al pulsar Esc es como si hubieses pulsado en el botón Cerrar.
  4. Al pulsar en uno de los elementos de la lista, éste se mostrará en la caja de textos.
  5. Al seleccionar un elemento de la lista y pulsar la tecla Supr (o Del si tu teclado está en inglés), dicho elemento se borrará de la lista, pero se quedará en la caja de textos, ya que al seleccionarlo para poder pulsar la tecla suprimir se habrá mostrado...

Veamos cómo hacer esto...

1. Lo de pulsar en Añadir y hacer algo, está claro: simplemente codificamos lo que haya que codificar en el evento Clic del botón cmdAdd. Para que nos muestre ese evento, simplemente haz doble-click en el botón y el VB te mostrará el evento en cuestión y añadimos este código:

Private Sub cmdAdd_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _ 

   Handles cmdAdd.Click

    ListBox1.Items.Add(TextBox1.Text)

End Sub

Veamos que hace este código en ejecución:

Veamos que hay en esta instrucción del procedimiento que se va a ejecutar cuando se haga clic (evento clic) del botón. Si recuerdas el código que vimos en el evento Form_Load, teníamos:

Me.ListBox1.Items.Clear()

  • Me hace referencia a la clase actual, es decir al formulario.
  • Items son los elementos que tiene el objeto ListBox
  • Clear es un método de Items que se encarga de limpiar los elementos de la lista, es decir: los borra.

Por tanto esa línea lo que hace es borrar los elementos del listbox.

Ahora lo que necesitamos no es borrarlos, sino añadir nuevos elementos a la lista, por tanto, como ya sabemos que Items es el sitio en el que se guardan los elementos de la lista, lo único que tenemos que saber es ¿cómo se añaden nuevos elementos a dicha lista? La respuesta es el método  Add que añade elementos a la lista de un ListBox: Para añadir elementos a un listbox, se usa el método Add de Items.
 

Nota: Por ahora estamos viendo algunos elementos de los controles: propiedades, métodos y eventos para ilustrar unos ejemplos de introducción. Mas adelante veremos una referencia completa de cada uno de los controles y cómo utilizarlos.

En la colección Items se puede añadir lo que queramos, cualquier objeto, en este caso lo que añadimos es el contenido (el texto) del TextBox, por eso es por lo que hacemos:

Items.Add(TextBox1.Text)

Añadimos a Items el contenido del cuadro de texto, con lo que nos aparece reflejado inmediatamente en el cuadro de lista.



Si desea obtener un acceso sin restricciones a los contenidos del curso de Visual Basic.NET 2008 y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.