sábado, 23 de marzo de 2013

Organizando Controles en un Formulario


En esta publicación aprenderemos como organizar los controles agregados al formulario para diseñar una mejor interface. Primero aprenderemos como modificar el formato de los controles usando el menú de Visual Studio .NET, luego veremos como configurar el orden de tabulación y finalmente, enseñaré como ajustar el tamaño de los controles automáticamente ante cambios en el tamaño del formulario. 


1. Modificando el Formato de los Controles
 

Para realizar un mejor diseño es necesario usar el menú de Formato del Visual Studio .NET, el cual puede realizar las siguientes tareas con los controles:
  • Alinear: A cualquier posición de la derecha, izquierda, centro, arriba, mitad o abajo.
  • Hacer del mismo tamaño: Alto, ancho o ambos.
  • Espaciado horizontal y vertical: HacerIo igual, aumentar, disminuir o eliminar.
  • Centrar en el formulario: Horizontal o verticalmente.
  • Ordenar: Traer al frente o enviar atrás.
  • Bloquear controles: Para que no puedan desplazarse accidentalmente al momento de diseñar sobre el formulario.

Para poder usar todas estas opciones de formato debemos realizar los siguientes pasos:

a). Dependiendo de la tarea a realizar, seleccionar uno o más controles del formulario.

Sugerencia: Para seleccionar un grupo de controles que se encuentran continuos en una región arrastrar sostenidamente el mouse y soltar sobre el final de la región. Para seleccionar todos los controles del formulario, del menú "Editar" elegir "Seleccionar todo" o pulsar Ctrl + A.





b). Seleccionar del menú "Formato" la tarea a realizar (anteriormente descritas) y elegir uno de los valores u opciones de formato. 


Observación: Cada vez que se da formato a varios controles se toma el último cóntrol como referencia, por ejemplo, si deseamos dar el mismo ancho que uno de los controles tendríamos que seleccionar este de de último.


2. Configurando el Orden de Tabulación de los Controles

Cuando se tiene una ventana de ingreso de datos es común pasar de un campo a otro pulsando la tecla Tab sobre el control, e inmediatamente el foco pasa a otro control.

En Visual Basic .NET podemos aprovechar esta característica de habilitar la tecla Tab y especificar la secuencia u orden de tabulación de los controles de ingreso de datos o interacción con el usuario. Para esto debemos realizar los siguientes pasos:

a). Configurar la propiedad TabStop en True para que el control pueda recibir el foco y usar la tecla Tab para salir.

Nota: El valor por defecto de los controles que tienen la propiedad TabStop es True, así es que, generalmente no es necesario realizar su configuración.

b). Configurar la propiedad Tablndex en un número empezando en cero y en forma consecutiva para indicar el orden o secuencia en que pasará el foco sobre los controles al pulsar la tecla Tab.

Sugerencia: Anteriormente, esto solo se podía realizar configurando la propiedad Tablndex en la ventana de propiedades, pero ahora disponemos de una herramienta de selección del orden, eligiendo del menú "Ver" la opción ,"Orden de tabulación" y dando clic sobre los controles, al final nuevamente ir al menú "Ver" y elegir "Orden de tabulación" para que desaparezca el selector.



Por ejemplo, si deseamos configurar el orden de la tabulación en el formulario de inicio del Ejemplo08, el formulario se verá como sigue en tiempo de diseño: 

 Formulario en tiempo de diseño configurando el orden de tabulación



 

3. Ajustando el Tamaño de los Controles al Formulario

Uno de las preocupaciones en el desarrollo de aplicaciones Windows era controlar la apariencia de los controles al momento que se modifica el tamaño del formulario.

En versiones anteriores de Visual Basic, cada vez que el usuario cambiaba el tamaño de la ventana (evento Resize) había que estar programando la nueva posición y tamaño de los controles sobre el formulario. En Visual Basic .NET disponemos de 2 propiedades que configuran automáticamente el tamaño de los controles ajustándolos a un cierto borde del formulario.

La primera propiedad se llama Anchor y permite modificar el tamaño del control ajustándolo a cualquiera de los cuatro lados extremos, la segunda propiedad se llama Dock y permite acoplar el control a uno de los cuatro bordes o esquinas o también hace que el control sea del mismo tamaño que el formulario (opción FilI) . 



Ejenplo11

Esta demostración tiene por objetivo aprender a organizar los controles sobre el formulario.

El ejemplo trabaja con un simple formulario que muestra información del Libro, éste tiene 4 controles que se ajustan autornáticamente al cambiar de tamaño el formulario, tanto en tiempo de diseño como en ejecución. Para lo cual debemos realizar los siguientes pasos:


1. Crear una Aplicación Windows en Visual Basic .NET llamada Ejemplo11. El IDE que utilizaré es Microsoft Visual Studio 2012.



2. En la ventana del explorador de soluciones seleccionar el archivo Form1 y en la ventana de propiedades cambiar la propiedad FileName a frm Acerca.



3. En el disefiador de formularios Windows, arrastrar un control Label, un PictureBox y 2 Button de la Caja de Herramientas hacia el formulario y configurar las propiedades, tal como se muestra en la siguiente tabla:  
 


Objeto Propiedad Valor
Form1Name frmAcerca
Text Acerca del Libro
StartPosition CenterScreen
Size Width=300, Height=300
Label1Name IblTitulo
Text ingenieriasystems
TextAlign MiddleCenter
HorderStyle Fixed3D
Dock Top
AutoSize False
Font Size=12
ForeColor Blue
PictureBox1Name picFoto
Anchor Top, Bottom, Left, Right
BorderStyle Fixed3D
Cursor Hand
Image Foto.jpg (ó cualquiera)
SizeMode Stretchlmage
Location X=85, Y=60
Size Width=130, Height=160
Button1Name btnAutor
Anchor Bottom, Left
Cursor Hand
Location X=20, Y=236
Text Autor
Button2 Name btnUrl
Anchor Bottom, Right
Cursor Hand
Location X=196, Y=236
Text Dirección


4. Para indicar el orden de tabulación puede seleccionar del menú "Ver", la opción "Orden de tabulación" y luego seleccionar el orden en que pasará la tecla Tab sobre los controles. Luego para desaparecer el selector realice los mismo. 






Observación: El control PictureBox no es enfocable por lo que no tiene propiedades Tab, en cambio, note que en los demás controles se ha configurado la propiedad Tablndex en un número correlativo, empezando en cero.

5. Escribir dos manejadores de eventos "Click ""para los botones "Autor" y "Dirección" que permitan mostrar en un cuadro de mensaje ambas informaciones, tal como se muestra a continuación: 





6. Escribir un manejador de evento "Click" para el PictureBox que permita cerrar la aplicación: 




7. Configurar frmAcerca como el formulario de inicio. Por defecto lo está.

8. Grabar y ejecutar la aplicación pulsando F5. 



9. Clic al botón "Autor" y se mostrará un cuadro de mensaje con el nombre del autor del Sitio Web
 


10. Clic en "Aceptar" y seleccionar el botón "Dirección" y se mostrará un cuadro de mensaje con la dirección electronica del Sitio Web. 




11. Clic en "Aceptar" y luego trate de modificar el tamaño del formulario. 





  • Observación: Los controles Label y PictureBox se modifican de tamaño ajustándose al tamaño del formulario, en cambio, los dos Button siempre se mantienen del mismo tamaño pero su posición se mantiene constante respecto a las esquinas.

12. Clic sobre la imagen para finalizar la ejecución de la aplicación.

Observación: Modifique el tamaño del formulario en el diseñador de formularios Windows y note como los controles también se organizan amomáticamente en tiempo de diseño.



Espero haber ayudado en algo. Adjunto el ejemplo en el siguiente enlace:

Ejemplo11 - Descargar

Hasta la próxima oportunidad!  

4 comentarios:

  1. Respuestas
    1. Hola Simon Camacho, gracias por la visita y el aporte de tu comentario!
      Éxitos! Hasta cualquier momento!

      Eliminar
  2. Como puedo hacer para que un formulario y sus controles tengan la misma apariencia en cualquier resolución. Si hago un formulario ejm en 1024 X 768 se vea parecido en 800 X 600 ejemplo y no más grande.

    ResponderEliminar
    Respuestas
    1. Hola Simon Camacho, gracias por la visita y el aporte de tu comentario
      La verdad que nunca tuve esa duda o nunca lo intenté hacer. Esperemos a que algún usuario nos oriente a respecto.
      Los mejores deseos! Hasta cualquier momento!

      Eliminar

       

Etiquetas

Academy (23) Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (18) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (195) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (297) Cloud Computing (3) CNNA v5.0 Routing & Switching (216) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos (3) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (169) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google