Tutorial 1: Crear un visor de imgenes

Visual Studio 2012

Otras versiones

29 de los 49 ha calificado este til - Valorar este tema En este tutorial, crear un programa para cargar una imagen desde un archivo y lo muestra en una ventana.Aprender a arrastrar los controles como botones y cuadros de imagen en el formulario, establezca sus propiedades y utilizar los contenedores para redimensionar suavemente el formulario. Tambin empezar a escribir cdigo. Usted aprender a:

Crear un nuevo proyecto. Test (debug) una solicitud. Agregar controles bsicos como casillas de verificacin y botones a un formulario. Posicin controles de un formulario utilizando diseos. Agregar archivos abiertos y color cuadros de dilogo a un formulario. Escribir cdigo con IntelliSense y fragmentos de cdigo. Escribir mtodos de controlador de eventos.

Cuando termine, el programa se ver como la siguiente imagen. Imagen que se crea en este tutorial

Para una versin en video de este tema, vea Cmo se utiliza: Crear un visor de imgenes en Visual Basic? oProcedimientos: Crear un visor de imgenes en C #? .

Nota
En este tutorial, tanto en Visual C # y Visual Basic son cubiertos, a fin de centrarse en la informacin especfica para el lenguaje de programacin que est utilizando.

Temas Relacionados
Ttulo Descri pcin

Paso 1: Crear un proyecto de aplicacin de Windows Forms

Comie nce por crear un proyec to de aplica cin de Windo ws Forms .

Paso 1: Crear un proyecto de aplicacin de Windows Forms

Visual Studio 2012

Otras versiones

30 de los 37 ha calificado este til - Valorar este tema El primer paso para crear un visor de imgenes es crear un proyecto de aplicacin de Windows Forms. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 1o Tutorial 1: Crear un visor de imgenes en C # - Video 1 . Para crear un proyecto de aplicacin de Windows Forms 1. 2. En el Archivo men, haga clic en Nuevo proyecto . Si usted no est utilizando Visual Studio Express, debe seleccionar el idioma en primer lugar. Desde elPlantillas instaladas lista, seleccione C # o Visual Basic . Haga clic en la aplicacin de Windows Forms icono, escriba PictureViewer como el nombre y, a continuacin, haga clic en Aceptar . Visual Studio crea automticamente la solucin para usted. En el Archivo men, haga clic en Guardar todo , o en la barra de herramientas, haga clic

3.

4.

en Guardar todo botn que aparece a continuacin. Guardar todo botn de la barra

Nota
Visual Studio guarda el proyecto en la carpeta de proyectos. El entorno de desarrollo integrado (IDE) rellena automticamente el nombre de la carpeta y el nombre del proyecto. Si est utilizando Visual Studio Express, debe completar los pasos 5-7. Para los no-Express versiones de Visual Studio, se guarda un proyecto cuando se crea por primera vez, por lo que los pasos 5-7 no son necesarios. 5. 6. 7. Asegrese de que el proyecto se guarda en una carpeta en su Mis documentos carpeta. Verifique que el Crear directorio para la solucin de casilla de verificacin. Haga clic en Guardar .

Nota
Cuando se crea un proyecto, el IDE de Visual Studio automticamente crea varios archivos para que usted y los coloca en una carpeta. Usted puede explorar los archivos con el Explorador de soluciones ventana. Al crear el proyecto, los archivos se guardan en una carpeta temporal. Al hacer clic en el Guardar todo botn le dice al IDE que copiarlos a una carpeta permanente (que suele ser bajo su Mis documentos carpeta). 8. Usted puede haber notado que la palabra solucin y proyecto tienen significados diferentes, que se explican ms adelante en este tutorial. El cuadro siguiente muestra la ventana IDE debe ser similar.

9.

10. IDE ventana 11.

12. Si la pantalla no se parece a la imagen anterior, en la ventana de men, haga clic en Restablecer diseo de ventana . Si alguna de las ventanas que faltan, en la vista de men, haga clic en Ventana Propiedades o el Explorador de soluciones . Si hay una ventana abierta adicional, haga clic en Cerrar(x), situado en la parte superior derecha. 13. Mira el dibujo. Desde la parte superior izquierda e ir hacia la derecha, la imagen muestra:

Ventana principal Aqu es donde se realizan la mayor parte de su obra. Utilice esta ventana para trabajar con formas y cdigos de edicin. En la actualidad, se muestra un formulario en el editor de formularios. En la parte superior de la ventana, hay dos fichas: la pgina de inicio y la ficha Form1.cs [Design] ficha. (En Visual Basic, es todo. Vb en lugar de. Cs.) Solucin ventana del Explorador Aqu es donde todos los archivos de la solucin aparecer. Si hace clic en un archivo, la informacin dentro de las propiedades de la ventana cambia. Si hace doble clic en un archivo de cdigo (que termina en. Cs en Visual C # y vb. En Visual Basic), el archivo de cdigo o un diseador para el archivo de cdigo se abre. Ventana Propiedades Aqu es donde puede cambiar las propiedades de los elementos que seleccione en las otras ventanas.

Nota
Observe cmo la lnea superior en el Explorador de soluciones muestra la ventana 'PictureViewer' Solucin (1 proyecto) . El IDE ha creado una solucin para usted, y una solucin puede contener ms de un proyecto. Por ahora, tendr que trabajar con soluciones que contengan un solo proyecto.

Paso 2: Ejecutar el Programa

Ejecut e el

progra ma de aplica cin de Windo ws Forms que cre en el paso anterio r.

Paso 2: Ejecutar el Programa

Visual Studio 2012

Otras versiones

11 de los 13 ha calificado este til - Valorar este tema Al crear una nueva solucin, en realidad se construy un programa que se ejecuta. No hace mucho todava, simplemente se muestra una ventana vaca que muestra Form1 en la barra de ttulo. Pero funciona, ya que ests a punto de averiguarlo. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 1o Tutorial 1: Crear un visor de imgenes en C # - Video 1 . Para ejecutar el programa de 1. Presione la tecla F5 o haga clic en Iniciar depuracin botn de barra de herramientas, que aparece a continuacin. Iniciar depuracin botn de barra de herramientas

2.

El IDE se ejecuta el programa, y aparecer una ventana. La siguiente imagen muestra el programa que acaba de crear. El programa est en marcha, y pronto se sumar a la misma. Forma de aplicacin de Windows programa en ejecucin

3.

Volver a la IDE, y mirar la nueva barra de herramientas. Depuracin de barra de herramientas

4.

Haga clic en la casilla Detener depuracin botn o desde el Debug men, haga clic en Detener depuracin . El programa deja de funcionar, y se cierra la ventana. Tambin se puede simplemente cerrar la ventana abierta para detener la depuracin.

Nota
Cuando se ejecuta el programa desde dentro del IDE, se llama depuracin , ya que por lo general lo hace para localizar y corregir errores. Es un programa real, y se puede ejecutar como ejecutar ningn otro programa.

Paso 3: Establezca sus propiedades de formulario

Cambi ar la forma en que su forma se ve usand o el Pro pieda desve ntana.

Paso 3: Establezca sus propiedades de formulario

Visual Studio 2012

Otras versiones

13 de los 13 ha calificado este til - Valorar este tema A continuacin, se utiliza el Propiedades ventana para cambiar la forma en que su forma se ve. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 1o Tutorial 1: Crear un visor de imgenes en C # - Video 1 . Para configurar las propiedades de formulario 1. Asegrese de que usted est buscando en el Diseador de Windows Forms. En el IDE, haga clic en elForm1.cs [Design] ficha (o Form1.vb [Design] ficha en Visual Basic). Haga clic en cualquier lugar dentro del formulario para seleccionarlo. Mira la Properties window, que debera estar mostrando las propiedades para el formulario. Formas tienen propiedades diferentes. Por ejemplo, se puede establecer el primer plano y el color de fondo, texto del ttulo que aparece en la parte superior de la forma, el tamao de la forma, y otras propiedades.

2.

Nota
Si el Propiedades ventana no aparece, detener el programa haciendo clic en el cuadrado Detener depuracin botn (o simplemente cierre la ventana). 3. Despus de que el formulario est seleccionado, desplcese hasta la parte inferior de la propiedades dela ventana, y encontrar el texto propiedad. Haga clic en Texto , escriba Visor de imgenes y, a continuacin, presione ENTRAR. Su forma debe tener ahora el texto Visor de imgenes en su barra de ttulo y la Propiedades ventana debe ser similar a la siguiente imagen. Ventana Propiedades

Nota
Las propiedades pueden ser ordenados por una vista por categoras o Alfabtico. Se puede cambiar entre estas dos vistas utilizando los botones de la Propiedades de la ventana. En este tutorial, es ms fcil encontrar propiedades a travs de la vista alfabtica. 4. Volver al Diseador de Windows Forms. Haga clic en el formulario inferior derecha de control de arrastre, que es el pequeo cuadrado negro en la esquina inferior derecha de la pantalla y aparece la siguiente manera. Arrastre manejar

Arrastre para cambiar el tamao del formulario para el formulario es ms ancho y ms alto un poco. 5. Mira el Propiedades ventana y observe que el tamao propiedad ha cambiado. El Tamao de la propiedad cambia cada vez que se cambia el tamao del formulario. Intente arrastrar el formulario para cambiar su tamao a un tamao de formulario de aproximadamente 550, 350,

que debera funcionar bien para este proyecto. 6. Ejecute el programa de nuevo. Presione la tecla F5 o haga clic en Iniciar depuracin botn de barra de herramientas, que aparece a continuacin. Iniciar depuracin botn de barra de herramientas

Al igual que antes, el IDE crea y pone en marcha su programa, y aparecer una ventana. 7. Antes de ir al siguiente paso, detenga su programa, ya que el IDE no le permitir cambiar el programa mientras se est ejecutando.

Paso 4: Disear el formulario con un control TableLayoutPanel

Aadi r un Ta bleLa youtP anel d e contro l al formul ario.

Paso 4: Disear el formulario con un control TableLayoutPanel

Visual Studio 2012

Otras versiones

11 de los 12 ha calificado este til - Valorar este tema En este paso, se agrega un TableLayoutPanel el control al formulario. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 2o Tutorial 1: Crear un visor de imgenes en C # - Video 2 . Para disear el formulario con un control TableLayoutPanel

1.

Ir al Diseador de Windows Forms. Mira el lado izquierdo del formulario y busque la caja de herramientas de tabulacin. Seale y haga una pausa en la Caja de herramientas de la ficha, y la Caja de herramientas aparece. (O bien, desde la vista del men, haga clic en Herramientas .) Haga clic en el signo ms situado junto a la Contenedores grupo para abrirlo, como se muestra en la siguiente imagen. Contenedores grupo

2.

3.

Puede agregar controles como botones, casillas de verificacin y etiquetas al formulario. Haga doble clic en el TableLayoutPanel control en la caja de herramientas. Al hacer esto, el IDE agrega unTableLayoutPanel el control al formulario, como se muestra en la siguiente imagen. El control TableLayoutPanel

Nota
Despus de agregar su TableLayoutPanel, si aparece una ventana en el interior de su formulario con el ttulo TableLayoutPanel Tasks , haga clic en cualquier lugar dentro del formulario para cerrarla. Usted aprender ms sobre esto ms adelante en la ventana del tutorial.

Nota
Note como la caja de herramientas se expande para cubrir el formulario al hacer clic en su ficha, y se cierra despus de hacer clic fuera de l. Ese es el IDE auto-hide caracterstica. Puedes activar o desactivar cualquiera de las ventanas haciendo clic en el icono de la chincheta en la esquina superior derecha de la ventana para alternar entre la activacin ocultar y bloquear en su lugar. El icono de la chincheta aparece como sigue.

Pushpin icono

4.

Asegrese TableLayoutPanel se selecciona haciendo clic en l. Puede comprobar qu control se selecciona con mirar la lista desplegable en la parte superior de la Propiedades de la ventana, como se muestra en la siguiente imagen. Propiedades de ventana con control TableLayoutPanel

5.

El selector de control es una lista desplegable en la parte superior de la Propiedades de ventana. En este ejemplo, se muestra que un control llamado tableLayoutPanel1 se

selecciona. Puede seleccionar los controles ya sea haciendo clic en el Diseador de Windows Forms o eligiendo en el selector de control.Ahora que TableLayoutPanel se selecciona, busca el muelle de la propiedad y haga clic en Base , que se debe establecer en Ninguno . Tenga en cuenta que una flecha desplegable junto al valor. Haga clic en la flecha y, a continuacin, seleccione el relleno (el botn grande en el medio), como se muestra en la siguiente imagen. Ventana Propiedades con relleno seleccionado

6.

Despus de establecer la TableLayoutPanel muelle propiedad de relleno , el panel se llena todo el formulario. Si cambia el tamao del formulario una vez ms, la TableLayoutPanel permanece atracado, y cambia de tamao para ajustarse a s mismo.

Nota
A TableLayoutPanel funciona como una tabla de Microsoft Office Word: tiene filas y columnas, y una celda individual puede abarcar varias filas y columnas. Cada celda puede contener un control (como un botn, una casilla de verificacin, o una etiqueta). Su TableLayoutPanel tendr un PictureBox de control que abarca su fila superior entera, un CheckBox control en su celda inferior izquierda, y cuatrobotones controles en su celda inferior derecha.

Nota
Aunque se dijo que cada celda puede contener slo un control, la celda inferior derecha tiene cuatrobotones de control. Esto es porque usted puede poner un control en una celda que contiene otros controles. Este tipo de control se denomina un recipiente, y la TableLayoutPanel es un contenedor.Usted aprender ms sobre esto ms adelante en el tutorial. 7. En la actualidad, la TableLayoutPanel tiene dos filas de igual tamao y dos columnas de igual

tamao.Usted necesita cambiar su tamao por lo que la primera fila y columna de la derecha son mucho ms grandes. En el Diseador de Windows Forms, seleccione el TableLayoutPanel. En la esquina superior derecha, hay un botn pequeo tringulo negro que aparece a continuacin. Tringulo botn

Este botn indica que el control tiene tareas que le ayudarn a configurar sus propiedades de forma automtica. 8. Haga clic en el tringulo para mostrar la lista de control de tareas, como se muestra en la siguiente imagen. Tareas TableLayoutPanel

9.

Haga clic en el Editar filas y columnas de tareas para mostrar la columna y fila Estilos ventana. Haga clic en la columna 1 , ajustando su tamao a 15 por ciento por estar seguro de que el porcentaje botn est seleccionado y entrar 15 en el porcentaje de caja. (Eso es un NumericUpDown de control, que va a utilizar en un tutorial ms adelante.) Haga clic en la columna 2 y la puso a un 85 por ciento. No haga clic en el Aceptar botn, sin embargo, debido a que la ventana se cerrar. (Pero si lo hace, puede volver a abrirlo con la lista de tareas.)

10. Del Mostrar lista desplegable en la parte superior de la ventana, haga clic en Filas . Establecer ROW1 a 90 por ciento y Row2 por ciento a 10. 11. Haga clic en Aceptar . Su TableLayoutPanel debe ahora tener una gran fila superior, una fila inferior pequeo, una pequea columna de la izquierda, y una gran columna de la derecha. Puede cambiar el tamao de las filas y columnas de la TableLayoutPanel arrastrando sus bordes.

Paso 5: Agregar controles a un formulario

Aadi r contro les, como

un Pic tureB ox con trol y un Ch eckBo xcontr ol, a su formul ario. Agreg ar botone s al formul ario.

Paso 5: Agregar controles a un formulario

Visual Studio 2012

Otras versiones

13 de los 16 ha calificado este til - Valorar este tema En este paso, se agregan controles, como un PictureBox control y un CheckBox control al formulario. A continuacin, aadir botones al formulario. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 2o Tutorial 1: Crear un visor de imgenes en C # - Video 2 . Para agregar controles a un formulario 1. Ir al Cuadro de herramientas y ampliar el Common Controls grupo. Esto muestra los controles ms comunes que se ven en las formas. Haga doble clic en el PictureBox control. El IDE agrega un PictureBox de control al formulario. Debido a que la TableLayoutPanel est acoplado a llenar el formulario, el IDE agrega el PictureBox control a la primera celda vaca. Haga clic en el tringulo negro en el nuevo PictureBox control para mostrar su lista de tareas, como se muestra en la siguiente imagen. Tareas PictureBox

2.

3.

Nota
Si accidentalmente agregar el tipo equivocado de control a su TableLayoutPanel, se puede eliminar.Haga clic en el control y, a continuacin, haga clic en Eliminar en el men. Tambin puede seleccionarDeshacer de la edicin del men para eliminar los controles del formulario. 4. Haga clic en el Dock en contenedor principal enlace. Esto fija automticamente el PictureBox muellepropiedad de relleno . Para verlo, haga clic en el PictureBox control para seleccionarlo, vaya alProperties ventana, y asegrese de que el muelle propiedad se establece en Llenar . Hacer que el lapso PictureBox ambas columnas, cambiando su ColumnSpan propiedad. Seleccione elPictureBox control y establezca su ColumnSpan propiedad a 2 . Adems, cuando el PictureBox est vaca, quiere mostrar un marco vaco. Establezca su BorderStyle propiedad a Fixed3D . Agregue el CheckBox control al formulario. Haga doble clic en el CheckBox elemento en la caja de herramientas para que el IDE agrega un nuevo CheckBox de control a la siguiente celda libre en su mesa.Debido a que un PictureBox ocupa las primeras dos clulas, una CheckBox de control se aade a la celda inferior izquierda. Seleccione el nuevo CheckBox de control y establezca su texto a la propiedad Stretch , como se muestra en la siguiente imagen. Control TextBox con la propiedad Stretch

5.

6.

7.

Ir al Contenedores grupo en el cuadro de herramientas (donde obtuvo su TableLayoutPanel control) y haga doble clic en el FlowLayoutPanel elemento para agregar un nuevo control a la ltima celda de la PictureBox. Entonces atracar en el contenedor principal (ya sea por la eleccin de muelle en contenedor principal de la lista de tareas o mediante el establecimiento de su muelle propiedad de relleno ).

Nota
A FlowLayoutPanel es un contenedor que organiza otros controles en filas ordenadas en orden. Al cambiar el tamao de un FlowLayoutPanel, si tiene espacio para exponer todos sus controles en una sola fila, lo hace. De lo contrario, las dispone en lneas, una encima de la otra. Que va a utilizar un FlowLayoutPanel a cabo cuatro botones. Para agregar botones 1. Seleccione la FlowLayoutPanel que ha agregado. Ir a Controles comunes del Cuadro de herramientas y haga doble clic en el botn de icono para agregar un botn denominado button1 a su FlowLayoutPanel.Repita el proceso para agregar otro botn. El IDE determina que ya hay un botn denominado button1 y llama al siguiente button2 .

Nota
En Visual Basic los botones se denominan con una mayscula inicial, por lo button1 es Button1 ,Button2 es Button2 , y as sucesivamente. 2. Normalmente, se agregan los otros botones utilizando el cuadro de herramientas. Esta vez, haga clic enbutton2 , y luego en la edicin men, haga clic en Copiar (o presione Ctrl + C). En el Editar men, haga clic en Pegar (o presione Ctrl + V) para pegar una copia de su botn. Ahora lo pegue de nuevo. El IDE ha aadido button3 y button4 .

Nota
Usted puede copiar y pegar cualquier control. Los nombres de IDE y los lugares nuevos controles de una manera lgica. Si pega un control en un contenedor, el IDE elige el espacio lgico para la colocacin. 3. Seleccione el primer botn y establezca su texto propiedad para mostrar una imagen . A continuacin, establezca el texto las propiedades de los prximos tres botones para borrar la imagen , el color de fondo y cerrar . El siguiente paso es el tamao de los botones y disponerse en forma tal que se alinean con la parte izquierda del panel. Seleccione la FlowLayoutPanel y ver su FlowDirection propiedad. Cambiarlo por lo que est llamado a RightToLeft . Tan pronto como lo hace, los botones deben alinearse a la derecha de la celda, e invertir el orden para que el mostrar una imagen botn de la derecha.

4.

Nota

Si los botones siguen en el orden equivocado, puede arrastrar los botones que rodean la FlowLayoutPanel para reorganizarlas en cualquier orden. Puede hacer clic en uno de los botones y arrastre hacia la izquierda o la derecha. 5. Haga clic en el Cerrar botn para seleccionarlo. Mantenga presionada la tecla CTRL y haga clic en los otros tres botones, por lo que todos estn seleccionados. Mientras que todos los botones se seleccionan, vaya a la Properties window y desplcese hasta la AutoSize propiedad. Esta propiedad indica el botn para cambiar el tamao automticamente para ajustarse a s mismo la totalidad de su texto. Pngalo enverdad . Los botones ahora debe dimensionarse adecuadamente y estar en el orden correcto. (Siempre y cuando los cuatro botones estn seleccionados, puede cambiar los cuatro AutoSize propiedades al mismo tiempo.) El cuadro siguiente muestra los cuatro botones. Visor de imgenes con cuatro botones

6.

Ahora ejecute el programa de nuevo para ver a su recin presentado formulario. Al hacer clic en los botones y la casilla de verificacin no hace nada todava, pero va a trabajar pronto.

Paso 6: nombre tu controles Button

Cambi ar el nombr e de los botone sa algo ms signifi cativo.

Paso 6: nombre tu controles Button

Visual Studio 2012

Otras versiones

9 de cada 13 ha calificado este til - Valorar este tema Slo hay un PictureBox en el formulario. Cuando se aade, el IDE automticamente llam pictureBox1 . Slo hay un CheckBox, que lleva el nombre checkBox1 . Pronto, usted va a escribir algo de cdigo, y ese cdigo se referir al CheckBox y PictureBox. Debido a que slo hay uno de cada uno de estos controles, usted sabr lo que significa cuando usted ve pictureBox1 o checkBox1 en el cdigo.

Nota
En Visual Basic, la primera letra predeterminada de cualquier nombre de control de lmite inicial, por lo que los nombres son PictureBox1 , CheckBox1 , y as sucesivamente. Hay cuatro botones en su forma, y el IDE de ellos, llamado button1 , button2 , button3 y button4 . Con slo mirar sus nombres actuales, no s cul es el botn Cerrar botn y cul es el mostrar una imagen botn. Es por eso que nombrar a sus controles de botn es til. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic - 3 Videoo Tutorial 1: Crear un visor de imgenes en C # - Video 3 . Para nombrar los botones de control 1. Haga clic en el Cerrar botn. (Si usted todava tiene todos los botones seleccionados, presione la tecla ESC para cancelar la seleccin.) Desplcese en la Propiedades de ventana hasta que vea la (Nombre)propiedad. (El (Nombre) propiedad se encuentra cerca de la parte superior cuando las propiedades estn alfabtico.) Cambiar el nombre a closeButton , como se muestra en la siguiente imagen. Ventana Propiedades con el nombre closeButton

Nota
Si intenta cambiar el nombre del botn para cerrar Button , con un espacio entre el cierre palabras y Button, el IDE muestra un mensaje de error: "Valor de la propiedad no es vlido." Los espacios (y unos pocos otros personajes) no estn permitidos en los nombres de control. 2. Cambiar el nombre de los otros tres botones para backgroundButton , clearButton y showButton .Puede comprobar los nombres haciendo clic en el selector de control de lista desplegable en laPropiedades de la ventana. Los nombres de los botones que aparezcan nuevos. Haga doble clic en Mostrar una imagen en el botn Diseador de Windows Forms. Cuando lo haga, el IDE se abre una nueva pestaa en la ventana principal llamado Form1.cs ficha, como se muestra en la siguiente imagen. Form1.cs ficha con Visual C # cdigo

3.

4.

Enfoque en esta parte del cdigo.

C#

VB

privado { }

vaco showButton_Click ( objeto sender, EventArgs e)

Usted est mirando un mtodo llamado showButton_Click () . El IDE aadido este al hacer clic en elshowButton botn. Este mtodo contiene el cdigo que se ejecuta cuando la vista una lmina botn es pulsado.

Nota
En este tutorial, el cdigo de Visual Basic que se genera automticamente se ha simplificado mediante la eliminacin de todo lo que entre los parntesis, (). Cuando esto ocurre, puede eliminar el mismo cdigo. El programa funcionar en ambos sentidos. Para el resto de los tutoriales, cualquier cdigo generado automticamente se simplifica cuando sea posible. 5. Vaya a la pestaa de diseo (el Form1.cs [Design] ficha en Visual C # o la Form1.vb [Design] ficha en Visual Basic) y haga doble clic en Borrar la imagen de botn. Repita esto durante los ltimos dos botones. Cada vez, el IDE agrega un nuevo mtodo para el cdigo del formulario.

6.

Para agregar un mtodo ms, haga doble clic en el control CheckBox de control de Windows Forms Designer para que el IDE agrega un CheckBox1_CheckedChanged () mtodo. Este mtodo se llama cuando el usuario activa o desactiva la casilla de verificacin.

Nota
Cuando se trabaja en un programa, a menudo se mueven entre el editor de cdigo y Diseador de Windows Forms. El IDE hace que sea fcil de navegar en su proyecto. Utilice el Explorador de soluciones para abrir el Diseador de Windows Forms, haga doble clic en Form1.cs en Visual C # oForm1.vb en Visual Basic. 7.
8. 9.

A continuacin se muestra el nuevo cdigo que ves en el editor de cdigo.

C# VB

10. privado 11. { 12. } 13. 14. privado e) 15. { 16. } 17. 18. privado 19. { 20. } 21. 22. privado e) 23. { 24. }

vaco clearButton_Click ( objeto sender, EventArgs e)

vaco backgroundButton_Click ( objeto sender, EventArgs

vaco closeButton_Click ( objeto sender, EventArgs e)

vaco CheckBox1_CheckedChanged ( objeto sender, EventArgs

Nota
Los cinco mtodos que ha agregado se denominan controladores de eventos , porque su programa los llama cada vez que un evento (como un usuario hace clic en un botn o seleccionar una caja) que pasa. Al hacer doble clic en un control en el IDE, se agrega un mtodo de controlador de eventos para el control. Por ejemplo, al hacer doble clic en un botn, el IDE agrega un controlador de eventos para el evento Click (lo que se llama cuando el usuario hace clic en el botn). Al hacer doble clic en una casilla de verificacin, el IDE agrega un controlador de eventos para el evento CheckedChanged (que se llama cuando el usuario activa o desactiva la casilla). Despus de agregar un controlador de eventos para un control, se pueda volver a ella en cualquier momento desde el Diseador de Windows Forms, haga doble clic en el control.

Nota

Los nombres son importantes al crear programas y mtodos (incluyendo controladores de eventos) puede tener cualquier nombre que desee. Cuando se agrega un controlador de eventos con el IDE, elige un nombre basado en el nombre del control y el evento que se manejan. Por ejemplo, el evento Click para un botn denominado showButton se llama showButton_Click () mtodo de control de eventos. Adems, los parntesis de apertura y cierre () se suelen aadir despus el nombre del mtodo para dejar claro que los mtodos se estn discutiendo.

Paso 7: Agregar componentes de dilogo al formulario

Aadi r un Op enFile Dialo g y un compo nente Color Dialo gcom ponent e al formul ario.

Paso 7: Agregar componentes de dilogo al formulario

Visual Studio 2012

Otras versiones

10 de los 13 ha calificado este til - Valorar este tema Para prepararse para la creacin de la Open File cuadro de dilogo y color (cuadro de dilogo para elegir un color de fondo), en este paso se agrega un OpenFileDialog y un componente ColorDialog componente al formulario. Un componente es como un control en algunos aspectos. Utilice el cuadro de herramientas para agregar un componente a un formulario y establezca sus propiedades mediante la Properties window. Pero a diferencia de un control, la adicin de un componente a su forma no agrega un elemento visible que el usuario puede ver en el formulario. En su lugar, proporciona ciertas conductas que pueden desencadenar con el cdigo. Es un componente que se abre un archivo Abrir cuadro de dilogo.

Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic - 3 Videoo Tutorial 1: Crear un visor de imgenes en C # - Video 3 . Para agregar componentes de dilogo al formulario 1. Vaya a Windows Forms Designer y abra la dilogos de grupo en el cuadro de herramientas.

Nota
Los cuadros de dilogo de grupo en el cuadro de herramientas tiene componentes que se abren muchos cuadros de dilogo de utilidad para usted, que puede ser utilizado para abrir y guardar archivos, navegar por las carpetas, y la eleccin de fuentes y colores. Se utilizan dos componentes de dilogo de este proyecto: OpenFileDialog y ColorDialog . 2. Para agregar un componente llamado OpenFileDialog1 al formulario, haga doble clic enOpenFileDialog . Para agregar un componente llamado colorDialog1 al formulario, haga doble clicColorDialog en el cuadro de herramientas. (Se utiliza aquel en el siguiente paso del tutorial.) Debera ver un cuadro gris en la parte inferior del Diseador de Windows Forms que tiene un icono para cada uno de los dos componentes del dilogo que ha agregado, como se muestra en la siguiente imagen. Componentes de dilogo

3.

Ir al Diseador de Windows Forms y haga clic en el OpenFileDialog1 icono en el cuadro gris en la parte inferior del diseador. Establecer dos propiedades:

Ajuste el filtro de propiedad para las siguientes (se puede copiar y pegar):.. (*. bmp) JPEG Files (*. jpg) | * jpg | PNG (*. png) | | * PNG BMP | *. bmp | Todos los archivos (* *.) | *. * Establecer el ttulo de propiedad lo siguiente: Seleccione un archivo de imagen

Nota
Para ver un ejemplo del archivo abierto el cuadro de dilogo de otra aplicacin Bloc de notas, abra o pintura, y en el Archivo men, haga clic en Abrir . Ntese cmo hay un Tipo de archivos en la lista desplegable en la parte inferior. Acaba de usar el filtro de la propiedad en el OpenFileDialogcomponente para poner esto en marcha. Adems, notar que el ttulo y Filtro propiedades estn en negrita en la Propiedades de la ventana. El IDE tiene eso que le muestre las propiedades que se han modificado desde sus valores predeterminados.

Paso 8: Escribir cdigo para la muestra un botn Picture controlador de eventos

Escrib ir

cdigo utiliza ndo la herra mienta Intelli Sense.

Paso 8: Escribir cdigo para la muestra un botn Picture controlador de eventos

Visual Studio 2012

Otras versiones

6 de cada 12 ha calificado este til - Valorar este tema En este paso, va a hacer que el mostrar una imagen botn obra de esta manera:

Cuando un usuario hace clic en ese botn, el programa abre un archivo Abrir cuadro de dilogo. Si un usuario selecciona un archivo de imagen, el programa muestra que la imagen en el control PictureBox.

El IDE cuenta con una herramienta de gran alcance llamada IntelliSense que le ayuda a escribir cdigo. Al entrar en el cdigo, el IDE se abre un cuadro con terminaciones de las palabras sugeridas parciales que introduce. Se trata de determinar lo que quiere hacer a continuacin, y salta automticamente al ltimo elemento que elija de la lista. Puede utilizar las flechas hacia arriba o hacia abajo para desplazarse en la lista, o puede seguir escribiendo letras para reducir las opciones. Cuando vea la opcin que desea, presione la tecla TAB para seleccionarlo. O bien, puede hacer caso omiso de las sugerencias, si no es necesario. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic - 4 Videoo Tutorial 1: Crear un visor de imgenes en C # - Video 4 . Para escribir cdigo para el Saln del botn de imagen en un controlador de eventos 1. Ir al Diseador de Windows Forms y haga doble clic en el Mostrar una imagen botn. El IDE inmediatamente va al diseador cdigo y mueve el cursor por lo que hay dentro de la showButton_Click () mtodo que agreg anteriormente. Escriba una i en la lnea en blanco entre las dos llaves {}. (En Visual Basic, escriba en la lnea vaca entre Private Sub ... y End Sub.) Un IntelliSense abre la ventana, como se muestra en la siguiente imagen.

2.

IntelliSense en Visual C # cdigo

3.

El IntelliSense ventana debe resaltar la palabra si . (Si no, entrar en una minscula f , y lo har.) Note como el amarillo tooltip junto al IntelliSense ventana muestra fragmento de cdigo para sentencia if. (En Visual Basic, el tooltip tambin afirma que se trata de un recorte, pero con una redaccin ligeramente diferente). Desea utilizar ese fragmento. Presione la tecla TAB para insertar si en el cdigo. A continuacin, presione la tecla TAB de nuevo para usar el si fragmento. (Si hace clic en otro lugar y su IntelliSenseventana desaparecido, el retroceso i y vuelva a escribirla, y el IntelliSense ventana se abre de nuevo.) Visual C # cdigo

4.

A continuacin, utilizar IntelliSense para ingresar ms cdigo para abrir un archivo Abrir cuadro de dilogo. Si el usuario hace clic en el Aceptar botn, el PictureBox carga el archivo que el usuario ha seleccionado. Los pasos siguientes se muestra cmo introducir el cdigo, y aunque es varios pasos, es slo unas pocas teclas: 1. Comience con el texto seleccionado verdadero en el siguiente fragmento. Escriba op para sobrescribirlo. (En Visual Basic, se empieza con una mayscula inicial, as que tipo Op .) El IntelliSense ventana se abre y muestra OpenFileDialog1 . Presione la tecla TAB para

2.

seleccionarlo. (En Visual Basic, que comienza con una mayscula inicial, por lo que verOpenFileDialog1 . Asegrese de que OpenFileDialog1 est seleccionada). 3. Escriba un punto ( . ) (Muchos programadores llaman a esto un punto.) Porque has escrito un derecho punto despus OpenFileDialog1 , una IntelliSense abre la ventana, se llena con todo elOpenFileDialog propiedades de los componentes y los mtodos. Estas son las mismas propiedades que aparecen en la Propiedades ventana al hacer clic en el Diseador de Windows Forms. Tambin hay mtodos que pueden decir el componente para hacer cosas (como abrir un cuadro de dilogo).

Nota
El IntelliSense ventana puede mostrar tanto propiedades y mtodos. Para determinar lo que se muestra, observe el icono situado a la izquierda. Ver una imagen de un bloque al lado de cada mtodo, y una imagen de una mano al lado de cada alojamiento. Tambin hay un icono de rayo situado junto a cada evento. Estas fotos muestran a continuacin.

4. 5. 6. 7. 8. 9.

Mtodo icono

Propiedad icono

Icono de incidente

10. Comience a escribir ShowDialog (capitalizacin no es importante para IntelliSense). ElShowDialog () mtodo se mostrar el archivo abierto el cuadro de dilogo. Despus de que la ventana ha destacado ShowDialog , presione TAB. 11. Cuando se utiliza un mtodo en un control o un componente (en adelante, llamar a un mtodo ), es necesario aadir entre parntesis. As que entrar en la apertura y cierre de parntesis: ()

Nota
Los mtodos son una parte importante de cualquier programa, y este tutorial ha mostrado varias formas de utilizar los mtodos. Usted puede llamar al mtodo de un componente para decirle que hacer algo, por ejemplo, cmo le llama el OpenFileDialog componenteShowDialog () mtodo. Usted puede crear sus propios mtodos para hacer su programa de hacer las cosas, como el que estamos construyendo ahora, llamado el showButton_Click ()mtodo, que abre un cuadro de dilogo y una imagen cuando un usuario hace clic en un botn. 12. Para Visual C #, agregue un espacio y, a continuacin, agregue dos signos de igual ( == ). Para Visual Basic, agregue un espacio y, a continuacin, utilizar un solo signo igual ( = ). (Visual C # y Visual Basic utilizan diferentes operadores de igualdad.) 13. Aadir otro espacio. Tan pronto como usted lo hace, otra IntelliSense ventana se

abre. Comience a escribir DialogResult y pulse TAB para aadirlo.

Nota
Cuando se escribe cdigo para llamar a un mtodo, a veces devuelve un valor. En este caso, elOpenFileDialog componente ShowDialog () mtodo devuelve un valor de DialogResult.DialogResult es un valor especial que le dice lo que pas en un cuadro de dilogo. UnOpenFileDialog componente puede provocar que el usuario haga clic en Aceptar o Cancelar , por lo que su ShowDialog () mtodo devuelve DialogResult.OK o DialogResult.Cancel. 14. Escriba un punto para abrir el valor de DialogResult IntelliSense ventana. Introduzca la letra O y presione la tecla TAB para insertar en Aceptar .

Nota
La primera lnea de cdigo debe ser completa. Para Visual C #, que debera ser el siguiente. if (openFileDialog1.ShowDialog () == DialogResult.OK) Para Visual Basic, que debera ser el siguiente. Si OpenFileDialog1.ShowDialog () = DialogResult.OK Entonces 15. Ahora aade una lnea ms de cdigo. Usted puede escribir en l (o copiar y pegar), pero considerar el uso de IntelliSense para aadirlo. Cuanto ms familiarizado est con IntelliSense, ms rpidamente usted puede escribir su propio cdigo. Su ltima showButton_Click () mtodo tiene el siguiente aspecto.
C#

VB

privado vaco showButton_Click ( objeto sender, EventArgs e) { si (openFileDialog1.ShowDialog () == DialogResult.OK) { pictureBox1.Load (openFileDialog1.FileName); } }

Paso 9: Revisin, comentarios y probar el cdigo

Revisa ry probar el cdigo

. Agre gue los comen tarios cuand o sea necesa rio.

Paso 9: Revisin, comentarios y probar el cdigo

Visual Studio 2012

Otras versiones

4 de 4 puntuado este til - Valorar este tema Antes de aadir un comentario a su cdigo y probarlo, tmese el tiempo para revisar los conceptos de cdigo, ya que se utilizan estos conceptos con frecuencia:

Cuando hace doble clic en el Mostrar una imagen en el botn Diseador de Windows Forms, el IDE agrega automticamente un mtodo para el cdigo de su programa. Los mtodos son la forma de organizar el cdigo: Es la forma en que su cdigo se agrupan. La mayora de las veces, un mtodo no hace un pequeo nmero de cosas en un orden especfico, como la forma de su showButton_Click () mtodo muestra un cuadro de dilogo y luego carga una imagen. Un mtodo se compone de estados . Pensar en un mtodo como una manera de empaquetar estados juntos. Cuando se ejecuta un mtodo, o llamado , los estados en el mtodo se ejecutan en orden, uno tras otro, comenzando con el primero. El siguiente es un ejemplo de una declaracin.
C#

pictureBox1.Load (openFileDialog1.FileName);
VB

pictureBox1.Load (openFileDialog1.FileName)
Las declaraciones son las que hacen sus programas de hacer las cosas. En Visual C #, una declaracin siempre termina en un punto y coma. En Visual Basic, el final de una lnea es el final de una instruccin.(No hay punto y coma es necesaria en Visual Basic.) La sentencia anterior le indica a su PictureBoxcontrol para cargar el archivo que el usuario ha seleccionado con el OpenFileDialog componente. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 5o Tutorial 1: Crear un visor de imgenes en C # - Video 5 . La prxima agregar un comentario en el cdigo. Un comentario es una nota que no cambia la forma en que el programa se comporta. Hace que sea ms fcil para alguien entender lo que hace el cdigo. En Visual C #, dos barras inclinadas (/ /) marca una lnea como un comentario. En Visual Basic, una comilla simple (') se utiliza para marcar una lnea como un comentario. Despus de agregar un comentario, probar el programa. Usted acaba de construir algo que funcione, y aunque no se ha hecho todava, ya se puede cargar una imagen. Para agregar comentarios 1. Aadir la siguiente.
C#

VB

Private Sub showButton_Click() Handles showButton.Click If OpenFileDialog1.ShowDialog() = DialogResult.OK Then PictureBox1.Load(OpenFileDialog1.FileName) End If End Sub

Nota
Su showButton controlador de evento Click del botn ya est terminado, y funciona. Ha iniciado la escritura de cdigo, a partir de un caso de declaracin. Un caso de declaracin es la forma de decirle a su programa "Marque esta cosa, y si es verdad, estas acciones". En este caso, le dice a su programa para abrir el archivo abierto el cuadro de dilogo, y si el usuario selecciona un archivo y haga clic en el Aceptar botn, cargue ese archivo en el PictureBox.

Nota
El IDE est diseado para hacer ms fcil para usted para escribir el cdigo y los fragmentos de cdigoson una forma en que lo hace. Un fragmento es un acceso directo que se expande en un pequeo bloque de cdigo. Puedes ver todos los fragmentos seleccionando Administrador de fragmentos de cdigo de

laHerramientas men. El caso de fragmento es en patrones de cdigo , dentro de las condicionales y bucles subcarpeta. Puede utilizar este gestor para buscar fragmentos existentes o aadir sus propios fragmentos. Para activar un fragmento al escribir cdigo, introdzcalo y presione la tecla TAB. Muchos fragmentos aparecen en el IntelliSense ventana, por lo que presiona la tecla TAB dos veces: primero para seleccionar el fragmento de la IntelliSense ventana, y luego decirle al IDE para usar el fragmento de cdigo. (IntelliSense admite el caso de fragmento, pero no el ifelse fragmento.) 2. Antes de ejecutar el programa, guarde el programa haciendo clic en el Guardar todo botn de barra de herramientas, que aparece a continuacin. Botn Guardar todo

Como alternativa, para guardar el programa, desde el Archivo men, haga clic en Guardar todo . Es una buena prctica para ahorrar temprano y con frecuencia. Cuando se ejecuta, el programa debe ser similar a la siguiente imagen. Visor de imgenes

Para probar el programa 1. 2. Presione la tecla F5 o haga clic en Iniciar depuracin botn de barra de herramientas. Haga clic en la imagen Mostrar un botn para ejecutar el cdigo que acaba de escribir. En primer lugar, el programa abre un archivo Abrir cuadro de dilogo. Compruebe que los filtros aparecen en losarchivos de tipo lista desplegable en la parte inferior del cuadro de dilogo. A continuacin, desplcese a una imagen y abrirla. Generalmente, usted puede encontrar fotos de ejemplo que se incluyen con el sistema operativo Windows en su Mis documentos carpeta, dentro de la muestra Mis imgenes \ Imgenes carpeta. Cargar una imagen, y aparece en su PictureBox. A continuacin, intente cambiar el tamao del

3.

formulario.Debido a que usted tiene su PictureBox atracado en el interior de un TableLayoutPanel, que a su vez se acopla dentro de la forma, el rea de la imagen se redimensionar para que sea tan ancha como la forma y llena la parte superior del 90 por ciento de la forma. Es por eso que ha utilizado la TableLayoutPanel y FlowLayoutPanel contenedores: Mantienen su forma de tamao correctamente cuando el usuario cambia el tamao.

Paso 10: Escribir cdigo para los botones adicionales y una casilla de verificacin

Escrib ir cdigo para que otros botone sy una casilla de trabajo con Intelli Sense.

Paso 10: Escribir cdigo para los botones adicionales y una casilla de verificacin
Visual Studio 2012

Otras versiones

10 de 12 puntuado este til - Valorar este tema Ahora ya est listo para completar los otros cuatro mtodos. Usted puede copiar y pegar este cdigo, pero si quieres aprender lo mximo de este tutorial, escriba el cdigo y utilizar IntelliSense. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 5o Tutorial 1: Crear un visor de imgenes en C # - Video 5 .

Nota
Como prctica recomendada: Siempre comentar el cdigo. Los comentarios son informacin de una persona a

leer, y vale la pena el tiempo para hacer su cdigo comprensible. Todo en una lnea de comentario es ignorado por el programa. En Visual C #, comentar una lnea, escriba dos barras inclinadas al principio (/ /), y en Visual Basic comentar una lnea, comenzando con una comilla simple ('). Para escribir cdigo para los botones adicionales y una casilla de verificacin

Agregue el cdigo siguiente.

C#

VB

Private Sub clearButton_Click () Maneja clearButton.Click Clear 'de la imagen. PictureBox1.Image = Nothing End Sub Private Sub backgroundButton_Click () Maneja backgroundButton.Click 'Mostrar el cuadro de dilogo de color. Si el usuario hace clic en Aceptar, cambiar el fondo 'PictureBox control en el color que el usuario escogi. Si ColorDialog1.ShowDialog () = DialogResult.OK Entonces PictureBox1.BackColor = ColorDialog1.Color Fin Si Fin Sub Private Sub closeButton_Click () Maneja closeButton.Click Cerrar "del formulario. Close () End Sub Private Sub CheckBox1_CheckedChanged () Maneja CheckBox1.CheckedChanged 'Si el usuario selecciona la casilla de verificacin Extender, cambiar la "propiedad SizeMode el PictureBox de" Stretch ". Si el usuario 'borra la casilla de verificacin, se cambiar a "Normal". Si CheckBox1.Checked Entonces PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage Ms PictureBox1.SizeMode = PictureBoxSizeMode.Normal Fin Si Fin Sub

Para continuar o revisar

Paso 11: Ejecutar el programa y tratar otras caractersticas

Ejecut e el progra ma y estable cer el color de fondo. Prueb e otras caract erstic as, tales como el cambi o de colore s, fuente s, y las fronter as.

Paso 11: Ejecutar el programa y tratar otras caractersticas

Visual Studio 2012

Otras versiones

46 de los 50 ha calificado este til - Valorar este tema Su programa est terminado y listo para funcionar. Puede ejecutar el programa y establecer el color de fondo.Para obtener ms informacin, tratar de mejorar el programa, cambiando el color de la forma, la personalizacin de los botones y casillas de verificacin, y cambiar las propiedades del formulario. Para una versin en video de este tema, vea Tutorial 1: Crear un visor de imgenes en Visual Basic Video 5o Tutorial 1: Crear un visor de imgenes en C # - Video 5 . Para ejecutar el programa y establecer el color de fondo

1. 2.

Presione F5 o haga clic en el Iniciar depuracin botn de barra de herramientas. Antes de abrir una imagen, haga clic en el conjunto del color de fondo botn. El color de la caja de dilogo se abre. Color de la caja de dilogo

3.

Seleccione un color para definir el color de fondo PictureBox. Fjate bien en la backgroundButton_Click () mtodo para entender cmo funciona.

Nota
Puede cargar una imagen de Internet, pegando la URL en el archivo abierto el cuadro de dilogo.Trate de encontrar una imagen con un fondo transparente, por lo que su color de fondo muestra. 4. Haga clic en la imagen Borre el botn para asegurarse de que se acredite. A continuacin, salga del programa haciendo clic en el Cerrar botn.

Para probar otras caractersticas

Cambiar el color de la forma y los botones utilizando el BackColor propiedad. Personalice sus botones y casillas de verificacin con la letra y ForeColor propiedades. Cambiar la forma de FormBorderStyle y ControlBox propiedades. Utilice el formulario AcceptButton y CancelButton propiedades de modo que los botones son automticamente hace clic cuando el usuario pulsa la tecla INTRO o ESC. Hacer que el programa abra elarchivo abierto el cuadro de dilogo cuando el usuario pulsa ENTER y cierre el cuadro

cuando el usuario presiona ESC.

http://msdn.microsoft.com/en-us/library/Vstudio/dd492171.aspx http://msdn.microsoft.com/es-es/vstudio/hh388573.aspx