-
Traduccin OriginalEste artculo se tradujo de forma manual. Mueva
el puntero sobre las frases del artculo para ver el texto original.
Ms informacin.
Tutorial: Explorar el IDE de Visual Studio con C# o Visual
Basic
Tras completar este tutorial, estar familiarizado con muchas de
las herramientas, cuadros de dilogo y diseadores que puede utilizar
para desarrollar aplicaciones con
Visual Studio.Crear una aplicacin sencilla de estilo Hola a
todos, disear la interfaz de usuario, agregar cdigo y depurar
errores, mientras aprende ms sobre
cmo trabajar en el entorno de desarrollo integrado (IDE).
Este tema contiene las siguientes secciones:
Configure el control IDE
Crear una aplicacin sencilla
Depurar y probar la aplicacin
Nota
Este tutorial se basa en la edicin Professional de Visual
Studio.Es posible que su copia de Visual Studio muestre nombres o
ubicaciones diferentes para algunos de
los elementos de la interfaz de usuario.La edicin de Visual
Studio que tenga y la configuracin que est usando determinan estos
elementos.Para obtener ms
informacin acerca de la configuracin, vea Personalizar la
configuracin de desarrollo.
Configure el control IDE
Al iniciar Visual Studio por primera vez, debe elegir una
combinacin de valores que aplique un conjunto de personalizaciones
predefinidas al IDE.Cada combinacin
de valores se ha diseado para que sea ms sencillo desarrollar
aplicaciones.
Figura 1: Cuadro de dilogo Elegir configuracin de entorno
predeterminada
Este tutorial se ha creado con la Configuracin general de
desarrollo aplicada, lo que implica la menor cantidad de
personalizacin del IDE.Tambin puede
cambiar la combinacin de configuracin mediante el Asistente para
importar y exportar configuraciones.Para obtener ms informacin, vea
Cmo: Cambiar
configuraciones seleccionadas.
Despus de abrir Visual Studio, puede identificar las ventanas de
herramientas, mens y barras de herramientas y el espacio de la
ventana principal.Las ventanas de
herramientas se acoplan en los lados izquierdo y derecho de la
ventana de la aplicacin, con Inicio rpido, la barra de mens y la
barra de herramientas estndar en
la parte superior.En el centro de la ventana de la aplicacin est
la Pgina principal.Cuando se carga una solucin o un proyecto, los
editores y diseadores
aparecen en este espacio.Al desarrollar una aplicacin, deber
pasar la mayor parte del tiempo en esta rea central.
Al usar este sitio acepta el uso de cookies para anlisis,
contenido personalizado y publicidad. Saber ms
Visual Studio 2013 Personas que lo han encontrado til: 2 de
2
Pgina 1 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Figura 2: IDE de Visual Studio
Puede crear personalizaciones adicionales a Visual Studio, como
cambiar el tipo de letra de la fuente y el tamao del texto en el
editor o el tema de color del IDE,
mediante el cuadro de dilogo Opciones.Dependiendo de la
combinacin de los valores que se han aplicado, puede que algunos
elementos de ese cuadro de
dilogo no aparezcan automticamente.Puede asegurarse de que
aparezca.en todas las opciones posibles si elige la casilla Mostrar
todas las configuraciones.
Figura 3: Cuadro de dilogo Opciones
En este ejemplo, cambiar el tema de color del IDE de claro a
oscuro.
Para cambiar el tema de color del IDE
1. Abra el cuadro de dilogo Opciones.
2. Cambie Tema de color a Oscuro, a continuacin, haga clic en
Aceptar.
Pgina 2 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Los colores en Visual Studio deben coincidir la imagen
siguiente:
El tema de color usado en el resto de este tutorial es el tema
ligero.Para obtener ms informacin acerca de cmo personalizar el
IDE, vea Personalizar el entorno de
desarrollo.
Crear una aplicacin sencilla
Crear el proyecto
Cuando cree una aplicacin en Visual Studio, cree primero un
proyecto y una solucin.Para este ejemplo, crear una solucin de
Windows Presentation Foundation.
Para crear el proyecto de WPF
1. Cree un nuevo proyecto.En la barra de mens, elija Archivo,
Nuevo, Proyecto.
Tambin puede escribir el nuevo proyecto en el cuadro Inicio
rpido para hacer lo mismo.
Pgina 3 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
2. Elija la plantilla de Visual Basic o de la aplicacin WPF de
Visual C# y despus nombre al proyecto HelloWPFApp.
OR
Se crea el proyecto y la solucin HelloWPFApp y los distintos
archivos aparecen en el Explorador de soluciones.WPF Designer
muestra una vista de diseo y una
vista XAML de MainWindow.xaml en una vista dividida. (Para
obtener ms informacin, vea WPF Designer para desarrolladores de
Windows Forms).Los elementos
siguientes aparecen en el Explorador de soluciones:
Figura 5: Elementos de proyecto
Pgina 4 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Despus de crear el proyecto, puede personalizarlo.Mediante la
ventana Propiedades, puede mostrar y cambiar las opciones de los
elementos de proyecto,
controles y otros elementos en una aplicacin.Mediante las
propiedades del proyecto y las pginas de propiedades, puede mostrar
y cambiar las opciones de
proyectos y soluciones.
Para cambiar el nombre de MainWindow.xaml
1. En el siguiente procedimiento, se asignar un nombre ms
especfico a MainWindow.En el Explorador de soluciones, seleccione
MainWindow.xaml.Debera
ver la ventana Propiedades para ese archivo debajo la ventana.Si
no ve la ventana Propiedades, seleccione MainWindow.xaml en el
Explorador de
soluciones, abra el men contextual (haciendo clic con el botn
secundario) y seleccione Propiedades.Cambie la propiedad Nombre de
archivo a
Greetings.xaml.
Explorador de soluciones muestra que el nombre de archivo es
ahora Greetings.xaml y que el nombre MainWindow.xaml.vb o
MainWindow.xaml.cs es
ahora Greetings.xaml.vb o Greetings.xaml.cs.
2. En el Explorador de soluciones, abra Greetings.xaml en la
vista de Diseo y seleccione la barra de ttulo de la ventana.
3. En la ventana Propiedades, cambie el valor de la propiedad
Title a Greetings.
Precaucin
Este cambio produce un error que aprender a depurar y corregir
en un paso posterior.
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 control de botn.
Para agregar un control TextBlock
1. Abra la ventana del Cuadro de herramientas.Debe buscarlo a la
izquierda de la ventana del diseador.Tambin puede abrirlo en el men
Ver o si escribe
CTRL+ALT+X.
2. En el Cuadro de herramientas, busque el control
TextBlock.
3. Agregue un control TextBlock a la superficie de diseo y el
centre el control cerca de la parte superior de la ventana.
La ventana debera ser similar a la siguiente ilustracin:
Figura 7: Ventana Greetings con el control TextBlock
Pgina 5 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
El marcado XAML debe tener una apariencia similar a lo
siguiente:
Para personalizar el texto en el bloque de texto
1. En la vista XAML, busque el marcado de TextBlock y cambie el
atributo de texto: Text=Select a message option and then choose the
Display
button.
2. Si TextBlock no se expande para ajustarse a la vista Diseo,
ample el control TextBlock para que se muestre todo el texto.
3. Guarde los cambios.
A continuacin, agregar dos controles RadioButton al
formulario.
Para agregar botones de radio
1. En el Cuadro de herramientas, busque el control
RadioButton.
2. Agregue dos controles RadioButton a la superficie de diseo y
muvalos de modo que aparezcan en paralelo bajo el control
TextBlock.
La ventana debe ser similar a la que se muestra a
continuacin:
Figura 8: RadioButtons en la ventana Greetings.
-
3. En la ventana Propiedades del control RadioButton izquierdo,
cambie la propiedad Nombre (la propiedad en la parte superior de la
ventana Propiedades ) a RadioButton1.
4. En la ventana Propiedades del control RadioButton derecho,
cambie la propiedad Nombre a RadioButton2 y despus guarde los
cambios.
Ahora puede agregar el texto para mostrar en cada control
RadioButton.El procedimiento siguiente actualiza la propiedad
Contenido de un control RadioButton.
Para agregar el texto para mostrar de cada botn de radio
1. En la superficie de diseo, abra el men contextual para
RadioButton1, elija Editar texto y, a continuacin, escriba
Hello.
2. Abrir el men contextual para RadioButton2, elija Editar texto
y, a continuacin, escriba Goodbye.
El ltimo elemento de la interfaz de usuario que agregar es un
control Button.
Para agregar el control de botn
1. En el Cuadro de herramientas busque el control de botn y
despus agrguelo a la superficie de diseo, en los controles
RadioButton.
2. En la vista XAML, cambie el valor Contenido para el control
de botn de Content=Button a Content=Display y despus guarde los
cambios.
El marcado debera ser similar al ejemplo siguiente:
La ventana debera ser similar a la siguiente ilustracin.
Figura 9: Interfaz de usuario final de Greetings
Agregar cdigo para el botn Mostrar
Pgina 7 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Cuando se ejecuta dicha aplicacin, aparece un cuadro de mensaje
despus de que un usuario elija primero un botn de radio y, a
continuacin, el botn Mostrar.Aparecer un cuadro de mensaje para
Hola y otro para Adis.Para crear este comportamiento, debe agregar
cdigo al evento Button_Click en Greetings.xaml.vb o
Greetings.xaml.cs.
Agregar cdigo para mostrar cuadros de mensaje
1. En la superficie de diseo, haga doble clic en el botn
Mostrar.
Con el cursor en el evento Button_Click, se abre
Greetings.xaml.vb o Greetings.xaml.cs.Tambin puede agregar un
controlador de eventos click como sigue:
Para Visual Basic, el controlador de eventos debe ser similar
a:
Para Visual C#, el controlador de eventos debe ser similar
a:
2. Para Visual Basic, escriba el cdigo siguiente:
Para Visual C#, escriba el cdigo siguiente:
3. Guarde la aplicacin.
Depurar y probar la aplicacin
A continuacin, depurar la aplicacin para buscar errores y probar
que los dos cuadros de mensaje aparecen correctamente.Para obtener
ms informacin, vea Compilar una aplicacin de WPF (WPF) y Depurar
WPF.
Errores de bsqueda y de correccin
En este paso, encontrar el error que se produjo anteriormente
cambiando el nombre del archivo XAML de la ventana principal.
Para iniciar la depuracin y buscar el error
1. Inicie el depurador seleccionando Depurar y despus Iniciar
depuracin.
Private Sub Button_Click_1(sender As Object, e As
RoutedEventArgs)
End Sub
private void Button_Click_1(object sender, RoutedEventArgs
e)
{
}
If RadioButton1.IsChecked = True Then
MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
MessageBox.Show("Goodbye.")
End If
if (RadioButton1.IsChecked == true)
{
MessageBox.Show("Hello.");
}
else
{
RadioButton2.IsChecked = true;
MessageBox.Show("Goodbye.");
}
VB
C#
VB
Pgina 8 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Aparece un cuadro de dilogo que indica que se ha producido un
IOException: No se encuentra el recurso mainwindow.xaml.
2. Elija el botn Aceptar y despus detenga el depurador.
Se ha cambiado el nombre Mainwindow.xaml a Greetings.xaml al
inicio de este tutorial, pero la solucin todava est destinada a
Mainwindow.xaml como URI de inicio de la aplicacin, por lo que el
proyecto no puede iniciarse.
Para especificar Greetings.xaml como el URI de inicio
1. 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).
2. Cambie StartupUri="MainWindow.xaml" a
StartupUri="Greetings.xaml" y despus guarde los cambios.
Inicie otra vez el depurador.Debera ver la ventana Saludos de la
aplicacin.
Para depurar con puntos de interrupcin
Agregando algunos puntos de interrupcin, puede probar el cdigo
durante la depuracin.Puede agregar puntos de interrupcin si elige
Depurar, Alternar puntos de interrupcin en la barra de mens o si
hace clic en el margen izquierdo del editor junto a la lnea de
cdigo donde desea que se produzca la interrupcin.
Para agregar puntos de interrupcin
1. Abra Greetings.xaml.vb abierto o Greetings.xaml.cs, y
seleccione la lnea siguiente: MessageBox.Show("Hello.")
2. Agregue un punto de interrupcin en el men seleccionando
Depurar y despus Alternar puntos de interrupcin.
Aparece un crculo rojo al lado de la lnea de cdigo en el margen
izquierdo de la ventana del editor.
3. Seleccione la lnea siguiente:
MessageBox.Show("Goodbye.").
4. Elija la tecla F9 para agregar un punto de interrupcin y
despus elija la tecla F5 para iniciar la depuracin.
5. En la ventana Greetings , elija el botn de radio Hello y
despus elija el botn Mostrar .
La lnea MessageBox.Show("Hello.") se resalta en amarillo.En la
parte inferior del IDE, las ventanas Automticos, Locales e
Inspeccin estn acopladas
juntas en el lado izquierdo y las ventanas Pila de llamadas,
Puntos de interrupcin, Comando, Inmediato y Resultados estn
acopladas juntas en el lado derecho.
6. En la barra de mens, elija Depurar, Paso a paso para
salir.
Pgina 9 de 11Tutorial: Explorar el IDE de Visual Studio con C# o
Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
La aplicacin reanuda la ejecucin y aparece un cuadro de mensaje
con la palabra Hola.
7. Elija el botn Aceptar en el cuadro de mensaje para
cerrarlo.
8. En la ventana Greetings , elija el botn de radio Goodbye y
despus elija el botn Mostrar .
La lnea MessageBox.Show("Goodbye.") se resalta en amarillo.
9. Elija la tecla F5 para continuar la depuracin.Cuando aparezca
el cuadro de mensaje, elija el botn Aceptar en el cuadro de mensaje
para cerrarlo.
10. Elija las teclas MAYS + F5 para detener la depuracin.
11. En la barra de mens, elija Depurar, Deshabilitar todos los
puntos de interrupcin.
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 compilar una versin de
lanzamiento
1. Seleccione Compilacin, despus Limpiar solucin para eliminar
los archivos intermedios y de salida que se crearon durante las
compilaciones anteriores.
2. Cambie la configuracin de compilacin para HelloWPFApp de
Depurar a Liberar.
3. Compile la solucin.
Enhorabuena por completar este tutorial!Si desea explorar ms
ejemplos, vea Ejemplos de Visual Studio.
Vea tambin
Conceptos
Novedades de Visual Studio 2013Introduccin a Visual
StudioSugerencias de productividad para Visual Studio
Pgina 10 de 11Tutorial: Explorar el IDE de Visual Studio con C#
o Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
-
Adiciones de comunidad
2013 Microsoft. Reservados todos los derechos.
Pgina 11 de 11Tutorial: Explorar el IDE de Visual Studio con C#
o Visual Basic
24/12/2013http://msdn.microsoft.com/es-es/library/jj153219.aspx
