PDF de programación - Práctica 2 - Entorno de programación Visual C#

Informática Industrial

Práctica 2. Introducción a la programación visual



Práctica 2

Entorno de programación Visual C#.

Introducción a la programación visual

Material: PC y Visual Studio 2013

Duración: 3 horas (1 hora clase de teoría + 2 horas prácticas)

Lugar: Laboratorios de prácticas (Laboratorio de Redes-Hardware)



La herramienta de desarrollo que utilizaremos para el desarrollo de las prácticas de la

asignatura será el entorno de programación de Visual C#, Microsoft Visual Studio 2013, el cual

permite la creación, compilación y ejecución de programas escritos en lenguaje Visual C#;

tanto en modo consola como en modo gráfico. Se recuerda al alumnado que, para la mejor

comprensión y asimilación de los conocimientos y habilidades desarrollados durante la

práctica, deberá haberse estudiado previamente el material docente disponible.



Introducción:

La programación visual tiene, como principal objetivo, el diseño y el desarrollo de programas

dotados de una interfaz hombre-máquina visual amigable, intuitiva y fácil de emplear.

Formalmente, la programación visual se apoya en los principios generales de la programación

orientada a objetos, aunque es posible el desarrollo de programas de forma similar a la

programación tradicional (programación imperativa en C, por ejemplo), teniendo en cuenta

ciertas consideraciones de desarrollo, uso y comportamiento de los programas. Tanto durante

el transcurso de las sucesivas sesiones prácticas, como en el desarrollo de los contenidos en las

clases de teoría, se irán introduciendo los conocimientos necesarios para desarrollar una

aplicación visual.

Para finalizar esta introducción, y aunque desarrollaremos más adelante el concepto en

función de lo que sea necesario, un objeto es un tipo de variable “especial”, la cual, no
Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


1

Informática Industrial

Práctica 2. Introducción a la programación visual



solamente puede almacenar un valor (o valores), de manera similar a como lo hace una

variable de tipo entero por ejemplo en C (sea un entero simplemente o una colección de

enteros array), sino que también puede tener funciones propias para operar con su valor o

valores.

Desarrollo de la práctica:

1. Entorno de programación Visual C#.

En esta primera parte de la práctica escribiremos un programa en Visual C# que cree una

aplicación visual básica. Realmente, no tendremos que programar nada, la gran capacidad del

entorno de programación nos permite crearla siguiendo unos sencillos pasos.

1) Al igual que en la práctica anterior, creamos una carpeta en el Escritorio de nuestro PC con

un nombre en concreto, en este ejemplo le pondremos de nombre a dicha carpeta Práctica 2.

De esta forma, podremos identificar dónde se encuentran los archivos que el entorno de

programación generará para el programa que desarrollemos.

2) Ejecutamos el programa Visual Studio 2013, tras lo cual se nos mostrará la siguiente pantalla

(o una similar, dependiendo de diversos factores).



Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha



2

Informática Industrial

Práctica 2. Introducción a la programación visual

3) Seleccionaremos Archivo => Nuevo => Proyecto



4) En el menú de plantillas de la parte de la izquierda, que aparece en la ventana titulada como

Nuevo Proyecto, comprobaremos que se encuentran seleccionadas las plantillas de Otros

Lenguajes y dentro de ésta la pestaña correspondiente a Visual C#; elegimos Aplicación WPF

como tipo de proyecto escribiendo, si queremos cambiar el nombre al proyecto Hola_Visual

por ejemplo como nombre del proyecto que estamos creando (donde pone Nombre), en

Ubicación indicaremos la carpeta donde queremos guardar nuestro proyecto (pulsando en

Examinar… localizaremos la carpeta Práctica 2 que hemos creado en el escritorio en el paso 1)

y, finalmente, pulsaremos Aceptar.

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha



3

Informática Industrial

Práctica 2. Introducción a la programación visual



5) En la siguiente ventana que nos aparecerá veremos ya el entorno de trabajo listo para

comenzar con el proyecto, es lo que se conoce como vista de diseño:



Como podemos ver en el explorador de soluciones, aparecen una serie de elementos y/o

ficheros de código, los cuales iremos analizando y comentando según corresponda; mientras

que, en la zona central aparece, con el nombre de MainWindow.xaml, una plantilla visual de

una ventana clásica de Windows, la cual será el soporte de nuestra aplicación. Sin entrar en

detalle en el explorador de soluciones, dicha ventana “visual” es la principal diferencia con los

proyectos de consola que creamos en la Práctica 1. Dentro del explorador de soluciones se

ubica un archivo denominado MainWindow.xaml.cs (archivo principal del proyecto), que

también se encuentra disponible en una de las pestañas en la zona centra; el código que

contiene es el siguiente:



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
/// <summary>
/// Lógica de interacción para MainWindow.xaml

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


4

Informática Industrial

Práctica 2. Introducción a la programación visual



/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}


En Visual c# el entorno lo crea por nosotros y escribe las líneas de código básicas que

necesitamos para comenzar a trabajar. No entraremos a concretar qué significa cada línea de

código simplemente diremos que, por el momento, contiene la función principal o Main

(MainWindow : Window) y que lanza y/o ejecuta el MainWindow(); mostrando nuestra ventana.

A continuación, pulsa en la pestaña denominada MainWindow.xaml.cs, para ver el código que

hemos mostrado anteriormente. El entorno de programación mostrará lo siguiente:



Este archivo (MainWindow.xaml.cs) contiene y contendrá la mayor parte del código que

desarrollaremos para la aplicación visual. Por el momento, está prácticamente vacío, es el

código del MainWindow.xaml, es decir, el código que interactúa con la parte visual de nuestro

programa. Recuerda que, cuando programemos, añadiremos código sobre el que el propio

entorno Microsoft Visual Studio nos ha creado por defecto, no lo borraremos pues podría

impedir que nuestra aplicación se ejecutara correctamente.

Microsoft Visual Studio emplea nombres predefinidos para las ventanas, los componentes

(clases, objetos y variables) y los eventos que emplearemos para programar. Se recomienda

que no se modifiquen dichos nombres, pues podría ocasionar que el programa dejase de

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


5

Informática Industrial

Práctica 2. Introducción a la programación visual



funcionar. Por ejemplo, en el código mostrado en la ventana anterior se invoca a una función

que se denomina InitializeComponent(); la cual inicializa la ventana que se muestra al usuario.

Aunque no veremos qué hace, el código se encuentra en el archivo MainWindow.g.i.cs.

Por el momento, simplemente hemos creado un proyecto visual vacío y hemos comentado

algo de su código y estructura. Puedes ejecutar el proyecto y ver qué ocurre, pulsando sobre el

botón Iniciar.



Ejercicio:

1) Ejecuta el programa que acabas de crear y comprueba el resultado. ¿Qué puedes hacer con

la aplicación? Localiza el fichero ejecutable de la aplicación que acabas de crear (tendrá el

nombre del proyecto y la extensión exe), ¿podrías copiarlo y ejecutarlo en otro ordenador?

¿Puedes copiar dicho ejecutable en tu escritorio y ejecutarlo?



2. Mi primer objeto de Visual C#.

Volviendo al entorno de trabajo, en donde tenemos la pantalla que nos muestra nuestra

ventana plantilla (MainWindow.xaml), pulsaremos con el botón izquierdo del ratón sobre ella

hasta que aparezca rodeada de una línea de color azul, pulsando seguidamente sobre la

pestaña de Propiedades que aparece en la zona de la derecha de la pantalla.



Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


6

Informática Industrial

Práctica 2. Introducción a la programación visual



En la zona de la derecha nos aparecerá una ventana con las propiedades de la ventana

principal de nuestra aplicación. Dicho de otro modo, la ventana que utilizaremos como

plantilla es un objeto, y como comentamos en la introducción y en clase de teoría, tiene

propiedades (de hecho, un montón de propiedades); el nombre de la ventana, por ejemplo, es

una propiedad de la misma; podemos modificarlo dentro del menú Común, elemento Title,

escribiendo el nombre que queremos darle. Tenemos también, por citar otro ejemplo, un

campo que nos permite decidir si el usuario podrá cambiar las propied