Tutorial_ Crear Una Aplicación Sencilla Con Visual C# o Visual Basic

7/26/2019 Tutorial_ Crear Una Aplicacin Sencilla Con Visual C# o Visual Basic

1/15

Para ver el artculo en ingls, active la casilla Ingls. Tambin puede ver el texto en ingls en una ventana emergente si pasa elpuntero del mouse por el texto.

Tras completar este tutorial, estar familiarizado con muchas de las herramientas, cuadros de dilogo y diseadores quepuede utilizar para desarrollar aplicaciones con Visual Studio. Crear una aplicacin sencilla de estilo Hola mundo, disearla interfaz de usuario, agregar cdigo y depurar errores, mientras aprende a trabajar en el entorno de desarrollo integrado(IDE).

Este tema contiene las siguientes secciones:

Configurar el IDE

Crear una aplicacin sencilla

Depurar y probar la aplicacin

Nota

Este tutorial se basa en Visual Studio Professional, que proporciona la plantilla de aplicacin WPF en la que crear elproyecto de este tutorial. Visual Studio Express para escritorio de Windows tambin proporciona esa plantilla, pero no asVisual Studio Express para Windows y Visual Studio Express para Web. Para informacin preliminar sobre cmo usarVisual Studio Express para Windows, visite el Centro de desarrollo de software para aplicaciones de la Tienda Windows.Para informacin preliminar sobre cmo usar Visual Studio Express para Web, vea Empezar con ASP.NET. Asimismo laedicin de Visual Studio y la configuracin que utilice determinan los nombres y las ubicaciones de algunos elementos dela interfaz de usuario. Consulte Personalizar la configuracin de desarrollo en Visual Studio.

Al iniciar Visual Studio por primera vez, Visual Studio le pedir que inicie sesin con una cuenta de servicio de Microsoft(MSA), Inicio de sesin en Visual Studio. No es necesario iniciar sesin y puede hacerlo ms tarde.

Al iniciar Visual Studio, debe elegir una combinacin de configuracin que aplique un conjunto de personalizacionespredefinidas al IDE. Cada combinacin de valores se ha diseado para que sea ms sencillo desarrollar aplicaciones.

Este tutorial asume que aplic la Configuracin general de desarrollo, lo que implica la menor cantidad depersonalizacin del IDE. Si ya eligi C# o Visual Basic (ambas son opciones vlidas), no debe cambiar la configuracin. Sidesea cambiar la configuracin, puede usar el Asistente para importar y exportar configuraciones . ConsultePersonalizar la configuracin de desarrollo en Visual Studio.

Visual Studio 2015

ial: Crear una aplicacin sencilla con Visual C# o Visual Basic https://msdn.microsoft.com/es-cl/library/jj153219(d=pri

5 09/06/20


2/15

Despus de abrir Visual Studio, puede identificar las ventanas de herramientas, los mens y barras de herramientas y elespacio de la ventana principal. Las ventanas de herramientas se acoplan a los lados izquierdo y derecho de la ventana dela aplicacin, con Inicio rpido, la barra de mens y la barra de herramientas estndar en la parte superior. En el centro dela ventana de la aplicacin est la Pgina principal. Cuando se carga una solucin o un proyecto, los editores ydiseadores aparecen en el espacio donde est la pgina de inicio. Cuando desarrolle una aplicacin, pasar la mayorparte del tiempo en esta rea central.

Figura 2: IDE de Visual Studio

Puede crear personalizaciones adicionales en Visual Studio, como cambiar el tipo de fuente y el tamao del texto en eleditor o el tema de color del IDE, mediante el cuadro de dilogo Opciones. Dependiendo de la combinacin de opcionesque haya aplicado, puede que algunos elementos de este cuadro de dilogo no aparezcan automticamente. Puedeasegurarse de que aparezcan todas las opciones posibles activando la casilla Mostrar todas las configuraciones.

Figura 3: Cuadro de dilogo Opciones


5 09/06/20


3/15

En este ejemplo, cambiar el tema de color del IDE de claro a oscuro. Puede continuar para crear un proyecto si lo desea.

Para cambiar el tema de color del IDE

Para abrir el cuadro de dilogo Opciones, seleccione el men Herramientasen la parte superior y, luego, elelemento Opciones....

1.

Cambie el tema de colora Oscuroy, a continuacin, haga clic en Aceptar.2.


5 09/06/20


4/15

Los colores de Visual Studio deben coincidir con la imagen siguiente:

El tema de color usado para las imgenes en el resto de este tutorial es el tema claro. Para obtener ms informacin acercade cmo personalizar el IDE, vea Configuracin de Visual Studio.


5 09/06/20


5/15

Crear el proyecto

Cuando cree una aplicacin en Visual Studio, primero crear un proyecto y una solucin. Para este ejemplo, crear unproyecto de Windows Presentation Foundation (WPF).

Para crear el proyecto de WPF

Crear un nuevo proyecto. En la barra de mens, elija Archivo, Nuevo, Proyecto....

Tambin puede escribir Nuevo proyecto en el cuadro Inicio rpido.

1.

Para elegir la plantilla Aplicacin WPF de Visual C# o Visual Basic, elija en el panel izquierdo Instaladas,Plantillas, Visual C#, Windows, por ejemplo y, despus, elija Aplicacin WPF en el panel central. Asigne alproyecto el nombre HelloWPFApp en la parte inferior del cuadro de dilogo Nuevo proyecto.

2.


5 09/06/20


6/15

O

Visual Studio crea el proyecto HelloWPFApp y la solucin y el Explorador de solucionesmuestra los distintos archivos.WPF Designer muestra una vista de diseo y una vista XAML de MainWindow.xaml en una vista en dos paneles. Puededeslizar el divisor para mostrar ms o menos de cualquiera de las vistas. Puede elegir ver solo la vista visual o solo lavista XAML. (Para obtener ms informacin, vea Diseador WPF para desarrolladores de Windows Forms). Los elementosiguientes aparecen en el Explorador de soluciones:

Figura 5: Elementos del proyecto

Despus de crear el proyecto, puede personalizarlo. Mediante la ventana Propiedades, (que se encuentra en el menVer), puede mostrar y cambiar las opciones de los elementos de proyecto, controles y otros elementos de unaaplicacin. Mediante las propiedades del proyecto y las pginas de propiedades, puede mostrar y cambiar las opcionesde proyectos y soluciones.

Para cambiar el nombre de MainWindow.xaml

En el siguiente procedimiento, se asignar un nombre ms especfico a MainWindow. En el Explorador de1.


5 09/06/20


7/15

soluciones, seleccione MainWindow.xaml. Debera ver la ventana Propiedades, pero, si no es as, elija el menVery el elemento Ventana de propiedades. Cambie la propiedad Nombre de archivoa Greetings.xaml.

El Explorador de solucionesmuestra que el nombre del archivo es ahora Greetings.xaml y, si expande el nodo

MainWindow.xaml (poniendo el foco en el nodo y presionando la tecla flecha derecha), ver que el nombre deMainWindow.xaml.vb o MainWindow.xaml.cs es ahora Greetings.xaml.vb o Greetings.xaml.cs. Este archivo decdigo est anidado bajo el nodo del archivo .xaml para mostrar que estn muy relacionados entre s.

Advertencia

Este cambio produce un error que aprender a depurar y corregir en un paso posterior.

En el Explorador de soluciones, abra Greetings.xaml en la vista del diseador (presionando la tecla Entrar

mientras el nodo tiene el foco) y seleccione la barra de ttulo de la ventana con el mouse.

2.

En la ventana Propiedades, cambie el valor de la propiedad Titlea Greetings.3.

En la barra de ttulo de MainWindow.xaml se lee ahora Greetings.

Disear la interfaz de usuario (IU)

Agregaremos tres tipos de controles a esta aplicacin: un control TextBlock, dos controles RadioButton y un controlButton.

Para agregar un control TextBlock

Abra la ventana Cuadro de herramientaseligiendo el men Very el elemento Cuadro de herramientas.1.

En el Cuadro de herramientas, busque el control TextBlock.2.


5 09/06/20


8/15

Agregue un control TextBlock a la superficie de diseo. Para ello, elija el elemento TextBlock y arrstrelo a laventana en la superficie de diseo. Centre el control cerca de la parte superior de la ventana.

3.

La ventana debera ser similar a la siguiente ilustracin:

Figura 7: Ventana Greetings con el control TextBlock

El marcado XAML debe tener un aspecto similar al siguiente:

Para personalizar el texto en el bloque de texto

En la vista XAML, busque el marcado de TextBlock y cambie el atributo de texto: Text=Selectamessage

option

and

then

choose

the

Display

button.

1.

Si TextBlock no se expande para ajustarse a la vista Diseo, ample el control TextBlock (con las asas de captacinde los bordes) para que se muestre todo el texto.

2.


5 09/06/20


9/15

Guarde los cambios presionando Ctrl-s o usando el elemento de men Archivo.3.

A continuacin, agregar dos controles RadioButton al formulario.

Para agregar botones de radio

En el Cuadro de herramientas, busque el control RadioButton.1.

Agregue dos controles RadioButton a la superficie de diseo eligiendo el elemento RadioButton y arrastrndoloa la ventana de la superficie de diseo dos veces. Adems, mueva los botones (seleccionndolos y usando lasteclas de direccin) para que los botones aparezcan uno junto al otro bajo el control TextBlock.

La ventana debe ser similar a la que se muestra a continuacin:

Figura 8: RadioButtons en la ventana Greetings.

2.

En la ventana Propiedadesdel control RadioButton izquierdo, cambie la propiedad Name(la propiedad situadaen la parte superior de la ventana Propiedades) a RadioButton1. Asegrese de que seleccion RadioButton y

no la cuadrcula de fondo del formulario; el campo Tipo de la ventana de propiedades del campo Nombre debeindicar RadioButton.

3.

En la ventana Propiedadesdel control RadioButton derecho, cambie la propiedad Namea RadioButton2y

despus guarde los cambios presionando Ctrl-s o usando el elemento de men Archivo. Asegrese de haberseleccionado RadioButton antes de cambiar y guardar.

4.

Ahora puede agregar el texto para mostrar de cada control RadioButton. El procedimiento siguiente actualiza la


5 09/06/20


10/15

propiedad Contentde un control RadioButton.

Para agregar el texto para mostrar de cada botn de radio

En la superficie de diseo, abra el men contextual de RadioButton1 presionando el botn secundario del mousemientras selecciona RadioButton1, elija Editar textoy, luego, escriba Hello.

1.

Abra el men contextual de RadioButton2 presionando el botn secundario del mouse mientras seleccionaRadioButton2, elija Editar textoy, luego, escriba Goodbye.

2.

El ltimo elemento de la interfaz de usuario que agregar es un control Button.

Para agregar el control Button

En Cuadro de herramientas, busque el control Botny, despus, agrguelo a la superficie de diseo en loscontroles RadioButton seleccionando el botn y arrastrndolo al formulario de la vista de diseo.

1.

En la vista XAML, cambie el valor de Contenidodel control Botn de Content=Buttona Content=Display

y despus guarde los cambios (Ctrl-s o use el men Archivo.

El marcado debera ser similar al del ejemplo siguiente:

2.

La ventana debera parecerse a la de la siguiente ilustracin.

Figura 9: Interfaz de usuario final de Greetings


15 09/06/20


11/15

Agregar cdigo al botn Mostrar

Cuando se ejecuta esta aplicacin, aparece un cuadro de mensaje despus de que un usuario elija un botn de radio y,a continuacin, el botn Mostrar. Aparecer un cuadro de mensaje para Hello y otro para Goodbye. Para crear estecomportamiento, debe agregar cdigo al evento Button_Click en Greetings.xaml.vb o Greetings.xaml.cs.

Agregar cdigo para mostrar cuadros de mensaje

En la superficie de diseo, haga doble clic en el botn Mostrar.

Se abre Greetings.xaml.vb o Greetings.xaml.cs con el cursor en el evento Button_Click. Tambin puede agregar uncontrolador de eventos clic de la siguiente manera (si el cdigo pegado tiene una lnea en zigzag roja debajo dealgn nombre, probablemente no seleccion los controles RadioButton en la superficie de diseo y les cambi elnombre):

Para Visual Basic, el controlador de eventos debe ser similar a:

Para Visual C#, el controlador de eventos debe ser similar a:

1.

Para Visual Basic, escriba el cdigo siguiente:

Para Visual C#, escriba el cdigo siguiente:

2.

Private SubButton_Click_1(senderAs Object,eAsRoutedEventArgs)

End Sub

private void

Button_Click_1(object

sender,

RoutedEventArgs

e)

{

}

IfRadioButton1.IsChecked=True Then

MessageBox.Show("Hello.")

ElseRadioButton2.IsChecked=True

MessageBox.Show("Goodbye.")

End If

if(RadioButton1.IsChecked==true)

{

MessageBox.Show("Hello.");

}

VB

C#

VB


15 09/06/20


12/15

Guarde la aplicacin.3.

A continuacin, depurar la aplicacin para buscar errores y probar que los dos cuadros de mensaje aparecencorrectamente. Las siguientes instrucciones indican cmo compilar e iniciar el depurador, pero ms adelante podra leerCompilar una aplicacin de WPF (WPF) y Depurar WPFpara obtener ms informacin.

Buscar y corregir erroresEn este paso, encontrar el error que causamos anteriormente al cambiar el nombre del archivo XAML de la ventanaprincipal.

Para iniciar la depuracin y buscar el error

Inicie el depurador seleccionando Depurary despus Iniciar depuracin.

Aparece un cuadro de dilogo que indica que se ha producido una excepcin IOException: No se encuentra elrecurso mainwindow.xaml.

1.

Elija el botn Aceptary despus detenga el depurador.2.

Hemos cambiado el nombre de Mainwindow.xaml a Greetings.xaml al comienzo de este tutorial, pero el cdigo todavahace referencia a Mainwindow.xaml como el URI de inicio de la aplicacin, por lo que el proyecto no puede iniciarse.

else

{

RadioButton2.IsChecked=true;

MessageBox.Show("Goodbye.");

}


15 09/06/20


13/15

Para especificar Greetings.xaml como el URI de inicio

En el Explorador de soluciones, abra el archivo App.xaml (en el proyecto de C#) o el archivo Application.xaml(en el proyecto de Visual Basic) en la vista XAML (no puede abrirse en la vista Diseo). Para ello, seleccione elarchivo y presione Entrar o haga doble clic en l.

1.

Cambie StartupUri="MainWindow.xaml"a StartupUri="Greetings.xaml"y despus guarde los cambios

con Ctrl-s.

2.

Vuelva a iniciar el depurador (presione F5). Debera ver la ventana Greetings de la aplicacin.

Para depurar con puntos de interrupcin

Agregando algunos puntos de interrupcin puede probar el cdigo durante la depuracin. Puede agregar puntos deinterrupcin eligiendo Depuraren el men principal, luego Alternar puntos de interrupcino haciendo clic en elmargen izquierdo del editor junto a la lnea de cdigo donde desea que se produzca la interrupcin.

Para agregar puntos de interrupcin

Abra Greetings.xaml.vb o Greetings.xaml.cs y seleccione la lnea siguiente: MessageBox.Show("Hello.")1.

Agregue un punto de interrupcin en el men seleccionando Depurary despus Alternar puntos deinterrupcin.

Aparece un crculo rojo al lado de la lnea de cdigo en el margen izquierdo de la ventana del editor.

2.

Seleccione la lnea siguiente: MessageBox.Show("Goodbye.").3.

Presione la tecla F9 para agregar un punto de interrupcin y despus presione la tecla F5 para iniciar ladepuracin.

4.

En la ventana Greetings, elija el botn de radio Helloy despus elija el botn Mostrar.

La lnea MessageBox.Show("Hello.")se resalta en amarillo. En la parte inferior del IDE, las ventanas

Automtico, Variables locales e Inspeccin estn acopladas juntas en el lado izquierdo, mientras que las ventanas

5.


15 09/06/20


14/15

Pila de llamadas, Puntos de interrupcin, Comando, Inmediato y Salida estn acopladas juntas en el ladoderecho.

En la barra de mens, elija Depurar, Paso a paso para salir.

La aplicacin reanuda la ejecucin y aparece un cuadro de mensaje con la palabra Hello.

6.

Elija el botn Aceptaren el cuadro de mensaje para cerrarlo.7.

En la ventana Greetings, elija el botn de radio Goodbyey despus elija el botn Mostrar.

La lnea MessageBox.Show("Goodbye.")se resalta en amarillo.

8.

Elija la tecla F5 para continuar con la depuracin. Cuando aparezca el cuadro de mensaje, elija el botn Aceptaren el cuadro de mensaje para cerrarlo.

9.

Presione las teclas MAYS + F5 (presione MAYS en primer lugar y, mientras la mantiene presionada, presioneF5) para detener la depuracin.

10.

En la barra de mens, elija Depurar, Deshabilitar todos los puntos de interrupcin.11.

Compilar una versin de lanzamiento de la aplicacin

Ahora que ha comprobado que todo funciona, puede preparar una versin de lanzamiento de la aplicacin.

Para limpiar los archivos de solucin y crear una versin de lanzamiento

En el men principal, seleccione Compilary, despus, Limpiar solucinpara eliminar los archivos intermedios yde salida que se crearon durante las compilaciones anteriores. Esto no es necesario, pero se limpian las salidas decompilacin de depuracin.

1.

Cambie la configuracin de compilacin de HelloWPFApp de Depurara Liberarmediante el control de listadesplegable en la barra de herramientas (dice "Depurar" actualmente).

2.


15 09/06/20


15/15

Compile la solucin con Compilar, Compilar solucino presione la tecla F6.3.

Enhorabuena por completar este tutorial! Puede encontrar el .exe creado en el directorio de soluciones y proyectos (...\HelloWPFApp\HelloWPFApp\bin\Release\). Si desea explorar ms ejemplos, vea Ejemplos de Visual Studio.

Novedades de Visual Studio 2015Introduccin a Visual StudioSugerencias de productividad para Visual Studio

;

2016 Microsoft


Tutorial_ Crear Una Aplicación Sencilla Con Visual C# o Visual Basic

Documents

Transcript of Tutorial_ Crear Una Aplicación Sencilla Con Visual C# o Visual Basic