Cómo: Crear una aplicación de formularios Windows Forms en C#

Actualización: noviembre 2007

El propósito de este tema es familiarizarse con los elementos del entorno de desarrollo integrado (IDE) de Visual C# Express según se va creando un programa de C# relativamente sencillo utilizando los formularios Windows Forms. Los formularios Windows Forms proporcionan los componentes que conforman una interfaz de usuario de aplicación para Windows estándar, tales como cuadros de diálogo, menús, botones y otros muchos controles. Fundamentalmente, estos controles son sólo clases de la biblioteca de clases de .NET Framework. La vista Diseñador de Visual C# Express permite arrastrar los controles hasta el formulario principal de la aplicación, así como ajustar su tamaño y posición. Cuando se realiza esta acción, el IDE agrega automáticamente el código fuente para crear una instancia de la clase apropiada e inicializarla.

En este ejemplo se muestra la forma de crear una aplicación de explorador web propia, que se puede personalizar con accesos directos a los sitios Web favoritos.

En esta sección, aprenderá a realizar las siguientes tareas:

  • Cree una nueva aplicación para formularios Windows Forms.

  • Alternar entre la vista Código y la vista Diseñador.

  • Cambiar las propiedades del formulario Windows Forms.

  • Agregar un control MenuStrip.

  • Agregar un control Button.

  • Crear y rellenar un control ComboBox.

  • Usar un control WebBrowser.

  • Crear controladores de eventos para controles.

vínculo a vídeo Para ver una demostración en vídeo, visite Video How to: Create a C# Windows Forms Application.

Para crear una aplicación para Windows en C#

  1. En el menú Archivo, haga clic en Nuevo proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto. En este cuadro de diálogo se muestra la lista de los diferentes tipos de aplicación predeterminados que puede crear Visual C# Express.

  2. Seleccione Aplicación de Windows Forms como tipo de proyecto.

  3. Cambie el nombre de la aplicación a Explorador web.

  4. Haga clic en Aceptar.

    Visual C# Express crea una nueva carpeta para el proyecto con el nombre del título del proyecto y, a continuación, muestra el nuevo formulario Windows Forms titulado Form1 en la vista Diseñador. Puede alternar entre esta vista y la vista Código en cualquier momento si hace clic con el botón secundario del mouse en la superficie de diseño o en la ventana de código y selecciona Ver código o Ver diseñador.

    Captura de pantalla de ExpressForm1cs

    El formulario Windows Forms que se ve en la vista Diseñador es una representación visual de la ventana que se abrirá al abrir la aplicación. En la vista Diseñador, puede arrastrar diversos controles desde el Cuadro de herramientas hasta el formulario. Estos controles no están realmente "activos"; son sólo imágenes que se pueden mover sin problemas por el formulario hasta ocupar un lugar preciso.

    Una vez colocado un control en el formulario, Visual C# funciona en segundo plano para crear el código que hará que el control real ocupe la posición correcta cuando se ejecute el programa. Este código fuente se encuentra en un archivo que, generalmente, permanece anidado fuera de la vista. Puede ver este archivo, denominado Form1.designer.cs, en el Explorador de soluciones si expande Form1.cs.

  5. Si está en la vista Código, cambie a la vista Diseñador haciendo clic con el botón secundario del mouse en la ventana de código y, a continuación, haciendo clic en Ver diseñador. Ahora, cambie el tamaño del formulario Windows Forms.

    1. Haga clic en la esquina inferior derecha del formulario Windows Forms.

    2. Cuando el puntero se convierta una flecha de dos puntas, arrastre la esquina del formulario hasta que sea por lo menos tan ancho y profundo como un cuarto de su pantalla.

      Puesto que ésta es la ventana en la que aparecerán las páginas web, será mejor que no quede demasiado reducida.

  6. Asegúrese de que se muestra la ventana Propiedades. Su ubicación predeterminada es la sección inferior derecha del IDE, pero puede moverla a otra ubicación si lo desea. La ilustración siguiente la muestra en la esquina superior derecha. Si la ventana Propiedades no está visible, en el menú Ver haga clic en Ventana Propiedades. Esta ventana muestra las propiedades del control o formulario Windows Forms seleccionado y en ella se pueden cambiar los valores existentes.

  7. Cambie el título del formulario Windows Forms.

    1. Haga clic en el formulario para seleccionarlo.

    2. En la ventana Propiedades, desplácese hacia abajo hasta Text, seleccione el texto "Form1" y escriba Explorador web.

    3. Presione ENTRAR o TAB para desplazar el foco del cuadro de texto "Text".

    Ahora verá que el texto situado en la parte superior del formulario Windows Forms (en el área denominada barra de título) ha cambiado.

    Captura de pantalla de ExpressTextWebBrowser

    Para cambiar rápidamente el nombre de un control, haga clic con el botón secundario del mouse en el control y haga clic en Propiedades. Puede escribir el nuevo nombre para el control en la propiedad Name.

  8. Haga clic en el botón Cuadro de herramientas de la barra de herramientas, o bien, haga clic en Cuadro de herramientas en el menú Ver. Desplácese hacia abajo por la lista de controles y expanda Menús y barras de herramientas hasta que vea MenuStrip. Arrastre este control a cualquier lugar del formulario Windows Forms.

    Captura de pantalla de ExpressMainmenuForm

    Este control crea un menú predeterminado en la parte superior del formulario.

  9. En el cuadro que dice Escriba aquí, escriba el nombre del menú, en este caso Navegar. Cuando presione ENTRAR, aparecerán nuevos cuadros vacíos para crear otros menús y elementos de menú. En el cuadro inferior, escriba Inicio. Presione ENTRAR y aparecerán más cuadros. Escriba Hacia atrás. Presione ENTRAR y escriba Hacia delante.

    Captura de pantalla de ExpressTypeHere

    Estos elementos de menú forman los controles de navegación básicos del sitio Web.

  10. Agregue un botón.

    En el Cuadro de herramientas, en la categoría Controles comunes, arrastre un control Button hasta aproximadamente la mitad del formulario Windows Forms, justo debajo de la barra de menús. En la ventana Propiedades, cambie la propiedad Text a Ir en lugar de button1, y cambie el nombre del diseño, que se muestra como (Nombre), de button1 a BotonIr.

  11. Agregue un control ComboBox.

    En el Cuadro de herramientas, en la categoría Controles comunes, arrastre un control ComboBox y colóquelo a la izquierda del nuevo botón. Arrastre los bordes y las esquinas para cambiar el tamaño y la posición del control ComboBox hasta que quede alineado con el botón.

    360kwx3z.alert_note(es-es,VS.90).gifNota:

    Cuando mueva los controles en un formulario Windows Forms, verá aparecer líneas azules. Estas líneas son guías que ayudan a alinear los controles en dirección vertical y horizontal. También puede alinear controles seleccionando más de uno a la vez. Para ello, haga clic y arrastre un cuadro de selección alrededor de los controles, o mantenga presionada la tecla MAYÚS mientras hace clic en ellos. Después de tener varios controles seleccionados, puede modificar la alineación y el tamaño utilizando los iconos de alineación y cambio de tamaño. Estos iconos aparecen en la Barra de herramientas de diseño, en la parte superior de la ventana Diseño.

  12. Rellene el control ComboBox.

    Un control ComboBox proporciona una lista desplegable de opciones entre las que el usuario puede seleccionar. En este programa, el control ComboBox va a contener una lista de los sitios web favoritos para obtener un rápido acceso.

    Para crear la lista de sitios, seleccione el control ComboBox y vea sus propiedades. Seleccione la propiedad Items; verá la palabra (Colección) y un botón puntos suspensivos (...). Haga clic en este botón para modificar el contenido del control ComboBox. Agregue tantas direcciones URL del sitio Web como desee, presionando RETORNO después de cada una.

    360kwx3z.alert_note(es-es,VS.90).gifNota:

    Asegúrese de incluir http:// delante de cada una de las direcciones de sitio web.

  13. Agregue el control WebBrowser.

    En el Cuadro de herramientas, en la categoría Controles comunes, desplácese hacia abajo hasta llegar al control WebBrowser. Arrastre el control hasta el formulario Windows Forms. Cambie el tamaño del control WebBrowser para ajustarlo al formulario Windows Forms sin ocultar los controles ComboBox y Button. Si el tamaño del control WebBrowser no se puede cambiar fácilmente, configure primero el tamaño deseado, abra las propiedades, busque el valor Dock y asegúrese de que está establecido en ninguno. Al establecer la configuración de Anchor en Superior, Inferior, Izquierda, Derecha, el control WebBrowser cambiará su tamaño correctamente cuando se cambie el tamaño de la ventana de la aplicación.

    El control WebBrowser realiza todo el trabajo difícil de representación de páginas Web. El acceso a este control en la aplicación se realiza a través de una instancia de la clase WebBrowser. Observe form1.Designer.cs y verá que se ha agregado una instancia de esta clase al código de la aplicación, junto con instancias de clases que representan los demás elementos que se han agregado utilizando el diseñador. Estas son las instancias que utilizará cuando agregue controladores de eventos para los controles y llame a los métodos de los citados controles.

  14. Agregue un controlador de eventos para el control Button.

    Ya ha terminado la etapa de diseño de la aplicación y ahora puede empezar a agregar código para proporcionar la funcionalidad del programa.

    El programa debe tener los controladores de eventos para el botón y para cada opción de menú. Un controlador de eventos es un método que se ejecuta cuando el usuario interactúa con el control. Visual C# Express crea automáticamente controladores de eventos vacíos.

    Haga doble clic en el botón y verá aparecer el Editor de código para el proyecto. También verá que se ha creado el controlador para el evento Click, que es el mensaje que aparece cuando el usuario hace clic en un botón. Agregue código al método del controlador de eventos de modo similar al siguiente código.

    private void goButton_Click(object sender, System.EventArgs e)
    {
        webBrowser1.Navigate(new Uri(comboBox1.SelectedItem.ToString()));
    }
    
    
    

    Este código toma el elemento seleccionado del control ComboBox, una cadena que contiene una dirección URL web, y lo pasa al método Navigate del explorador web. El método Navigate se carga y muestra el contenido de la página Web en esa ubicación.

  15. Agregue controladores de eventos para las opciones de MenuStrip.

    Vuelva a la ventana Diseñador y haga doble clic en los subelementos del menú de uno en uno. Visual C# Express creará métodos de control de eventos para cada uno. Edite estos métodos, de modo que se asemejen al código siguiente.

    private void homeToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoHome();
    }
    
    private void goForwardToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoForward();
    }
    
    private void goBackToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoBack();
    }
    
    
    

    Cada uno de estos controladores de menú llama a un método de navegación admitido en la clase WebBrowser.

    360kwx3z.alert_note(es-es,VS.90).gifNota:

    A partir de este código, puede ver que los nombres predeterminados dados a las opciones de menú pueden resultar muy confusos. Por esta razón, es una buena idea cambiar el nombre de cada control de menú al crearlo mediante el editor de Propiedades. El nombre del controlador reflejará entonces el nombre de la opción de menú.

  16. Vea el código que Visual C# ha escrito automáticamente.

    El IDE de Visual C# ya ha escrito código de inicialización. En la vista Código, busque el constructor de la clase Form1. Tiene una firma de public Form1(). Haga clic con el botón secundario del mouse en el método InitializeComponent al que se llama desde dentro del constructor y, a continuación, haga clic en Ir a definición. Ahora verá todo el código que se iba escribiendo en segundo plano mientras arrastraba y colocaba controles y establecía propiedades en la ventana Propiedades.

  17. Agregue código de inicialización propio.

    La última tarea es agregar su propio código de inicialización a Form1. El constructor nunca debe utilizarse para llamar a código que pueda producir una excepción. Por consiguiente, cualquier código de este tipo se debe colocar en otra parte; ese lugar es el método Form1_Load. Haga clic en la ficha Form1.cs [Diseño] en la parte superior del editor de código para regresar al formulario Windows Forms. Seleccione el formulario y, en la ventana Propiedades, haga clic en el botón Eventos (el que tiene un icono de rayo) y, a continuación, haga doble clic en Cargar. Esto agregará un método de control de eventos y colocará el cursor en el método en la vista Código.

    Cuando un usuario final inicie el programa, Windows notificará este hecho al formulario de la aplicación enviando un evento Load. Cuando el formulario reciba ese evento, llamará al método Form1_Load. Los métodos a los que se llama en respuesta a eventos se denominan controladores de eventos. El sistema llamará al evento en el momento adecuado; ahora tiene que colocar el código en el controlador de eventos que desee que se ejecute cuando se produzca el evento.

    En la vista Código, agregue dos líneas al método Form1_Load, como se muestra a en el siguiente código. Esto hará que el control WebBrowser muestre la página principal predeterminada del equipo y establezca el valor inicial del control ComboBox.

    private void Form1_Load(object sender, EventArgs e)
    {
        comboBox1.SelectedIndex = 0;
        webBrowser1.GoHome();
    }
    
    
    
  18. Genere y ejecute el programa.

    Presione F5 para generar y ejecutar el explorador web. Se mostrará en pantalla el formulario Windows Forms creado y, a continuación, aparecerá la página principal predeterminada del equipo. Puede utilizar el control ComboBox para seleccionar un sitio web, y hacer clic en Ir para navegar al mismo. Las opciones de menú permiten volver a la página principal o desplazarse hacia delante y hacia atrás a través de los sitios Web visitados anteriormente.

    Captura de pantalla de ejemplo MSN

    Si no está familiarizado con la programación de C#, ahora es el momento de leer la sección Manual del lenguaje C#. Si desea más información sobre el entorno de desarrollo de Visual C# Express y cómo crear aplicaciones de consola utilizando IntelliSense en particular, vea Cómo: Crear una aplicación de consola de C#. . Para aprender sobre cómo generar aplicaciones Windows Presentation Foundation, vea Cómo: Crear una aplicación de WPF en C#.

Adiciones de comunidad

Mostrar: