SIS2120

Graficas - Visual Studio 2010 C#

Nota.- Durante el desarrollo del ejemplo se mantendra los nombres genéricos de los componentes (button1, button2, etc)

A continuación se realizará la implementación de una solución que nos permitirá graficar un conjunto de lineas sobre una superficie contenedora (panel).

- Elegir: Archivo - Nuevo - Proyecto

- Escoger Visual C# - Windows - Aplicación de Windows Forms, darle un nombre a la solución en mi caso: "Graficas" y presionar el boton Aceptar (En la imagen en la parte del nombre de la solución se ve: "SumMatriz", por estar reutilizando las imágenes, NO CONFUNDIR)

- De paleta cuadro de herramientas del grupo "Controles comunes":

- Colocar: 4 button, 1 imageList, 1 panel. Si no se viera el "Cuadro de Herramientas" presionar: Ctrl+W, X (Ctrl + W seguido de X) Para entender como se coloca las imagenes en los botones, leer las instrucciones de mas abajo

Observe en la figura que los componentes NO visuales (imageList uno de ellos), se adicionan fuera del area del formulario (Area en color celeste claro), no preocuparse queriendo que este componente se coloque sobre el formulario. este y muchos mas (No visuales) se colocan automaticamente en esta area.

- La propiedad Text de los botones esta en "" (Cadena vacia).

- Para los botones necesitaremos unas imagenes (Flechas en las 4 direcciones), en internet u otros lugares podemos conseguir otras y mejores imagenes, por el momento trabajaremos con estas imagenes.

- Descargaté o consigue otras imagenes, una vez que tengas las imagenes copialas en el directorio de tu solución. (Copialó en la carpeta donde esten los archivos de la solución) (Solo sugerencia, las imagenes pueden estar en otra ubicación, solo se recomienda para tener mas organizados nuestros recursos (Imagenes)).

- Hacemos clic sobre el imageList y en sus propiedades buscamos la propiedad Images y le damos clic sobre el boton con 3 puntos.

- En este cuadro de dialogo, pulsamos sobre el boton Agregar y buscamos las imagenes (El orden no interesa).

- Hacemos clic sobre uno de los botones y en su propiedad imageList, elegimos el "imageList1"

- Repetimos este paso con todos los botones (Les asignamos el imageList1 a su propiedad ImageList), una vez que tenemos enlazados todos los botones al imageList1, Les asignamos en su propiedad "ImageIndex" el numero de la posicion que ocupa la imagen correspondiente, nos podemos guiar con la lista de imagenes que se desplegara automaticamente.

- Nuevamente repetimos este paso hasta que todos los botones esten con sus respectivas imagenes en mi caso: button1 - Arriba, button2 - Abajo, button3 - Izquierda y button4 - Derecha.

- Ahora que ya tenemos diseñado nuestro formulario hacemos doble clic sobre cualquiera de los botones para entrar a la parte del codigo y nos declaramos e inicializamos las siguientes variables:

- El sector seleccionado es uno de los mas importantes puesto que le estamos indicando que nuestra instancia de clase graphics, estará contenido sobre el panel (el panel sera nuestra área de dibujo).

- Ahora nos creamos una funcion que dibujara una linea usando una instancia de clase de Pen (lapiz).

- Finalmente realizamos el código para cada uno de los botones segun sea el caso (Por ejemplo: cuando presionemos sobre el button1, debera subir (restar un cierto valor sobre el eje Y), asi sucesivamente con todos los buttons según sea el caso).


- Ahora solo queda probar el programa (F5).

descarga el codigo fuente

Derechos Reservados Sr. Sofrware © 2010
http://www.eljanpatito.com