Date post: | 15-Jan-2016 |
Category: |
Documents |
Upload: | gustavo-soto |
View: | 24 times |
Download: | 0 times |
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 1/16
Traducción Original
ImprimirExpandir todo
Este artículo se tradujo de forma
manual. Mueva el puntero sobre las
frases del artículo para ver el texto
original. Más información.
Tutorial: Crear unaaplicación sencilla conVisual C# o Visual Basic
Tras completar este tutorial, estará familiarizado con muchas de las
herramientas, cuadros de diálogo y diseñadores que puede utilizar para
desarrollar aplicaciones con Visual Studio. Creará una aplicación sencilla de
estilo “Hola a todos”, diseñará la interfaz de usuario, agregará código 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 aplicación sencilla
Depurar y probar la aplicación
Nota
Este tutorial se basa en Visual Studio Professional, que proporciona la
plantilla de aplicación WPF en la que creará el proyecto de este tutorial.
Visual Studio Express para escritorio de Windows también proporciona
esa plantilla, pero no así Visual Studio Express para Windows y Visual
Studio Express para Web. Para obtener información preliminar sobre
cómo utilizar Visual Studio Express para Windows, visite el Centro de
desarrollo de software para aplicaciones de la Tienda Windows. Para
obtener información preliminar sobre cómo utilizar Visual Studio
Express para Web, vea Empezar con ASP.NET. Asimismo la edición de
Visual Studio y la configuración que utilice determinan los nombres y las
ubicaciones de algunos elementos de la interfaz de usuario. Vea
Personalizar la configuración de desarrollo en Visual Studio.
Configurar el IDE
Developer Network
Suscripciones a MSDN Obtener herramientas Iniciar sesión
Tecnologías Descargas Programas Comunidad Documentación Ejemplos
Síganos
MSDN Library
Herramientas y lenguajes de
desarrollo
Visual Studio 2013
Introducción
Introducción a Visual C# y Visual
Basic
Tutorial: Crear una
aplicación sencilla con Visual
C# o Visual Basic
Tutorial 1: Create a Picture
Viewer
Tutorial 2: Create a Timed Math
Quiz
Tutorial 3: Create a Matching
Game
Visual Studio 2013 Otras versiones
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 2/16
Configurar el IDE
Cuando inicie Visual Studio por primera vez, deberá elegir una
combinación de opciones que aplica un conjunto de personalizaciones
predefinidas al IDE. Cada combinación de valores se ha diseñado para
que sea más sencillo desarrollar aplicaciones.
Figura 1: Cuadro de diálogo Configuración del entorno predeterminada
Este tutorial se ha creado con la Configuración general de desarrollo
aplicada, lo que implica la menor cantidad de personalización del IDE.
Puede cambiar la combinación de opciones mediante el Asistente para
importar y exportar configuraciones. Vea Personalizar la configuración
de desarrollo en Visual Studio.
Después de abrir Visual Studio, puede identificar las ventanas de
herramientas, los menús y barras de herramientas y el espacio de la
ventana principal. Las ventanas de herramientas se acoplan a los lados
izquierdo y derecho de la ventana de la aplicación, con Inicio rápido, la
barra de menús y la barra de herramientas estándar en la parte
superior. En el centro de la ventana de la aplicación está la Página
principal. Cuando se carga una solución o un proyecto, los editores y
diseñadores aparecen en este espacio. Cuando desarrolle una
aplicación, pasará la mayor parte del tiempo en esta área central.
Figura 2: IDE de Visual Studio
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 3/16
Puede crear personalizaciones adicionales en Visual Studio, como
cambiar el tipo de fuente y el tamaño del texto en el editor o el tema de
color del IDE, mediante el cuadro de diálogo Opciones. Dependiendo de
la combinación de opciones que haya aplicado, puede que algunos
elementos de este cuadro de diálogo no aparezcan automáticamente.
Puede asegurarse de que aparezcan todas las opciones posibles
activando la casilla Mostrar todas las configuraciones.
Figura 3: Cuadro de diálogo 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 diálogo Opciones.
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 4/16
2. Cambie el tema de color a Oscuro y, a continuación, haga clic en
Aceptar.
Los colores de Visual Studio deben coincidir con la imagen siguiente:
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 5/16
El tema de color usado en el resto de este tutorial es el tema de color
claro. Para obtener más información acerca de cómo personalizar el IDE,
vea Personalizar la configuración de desarrollo en Visual Studio.
Crear una aplicación sencilla
Crear el proyecto
Cuando cree una aplicación en Visual Studio, primero creará un proyecto
y una solución. Para este ejemplo, creará una solución de Windows
Presentation Foundation.
Para crear el proyecto de WPF
1. Cree un nuevo proyecto. En la barra de menús, elija Archivo,
Nuevo, Proyecto.
También puede escribir Nuevo proyecto en el cuadro Inicio
rápido.
2. Elija la plantilla de la aplicación WPF de Visual C# o Visual Basic y
después asigne el nombre HelloWPFApp al proyecto.
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 6/16
OR
Se crea el proyecto y la solución HelloWPFApp y los distintos archivos
aparecen en el Explorador de soluciones. WPF Designer muestra una
vista de diseño y una vista XAML de MainWindow.xaml en una vista en
dos paneles. (Para obtener más información, vea WPF Designer para
desarrolladores de Windows Forms). Los elementos siguientes aparecen
en el Explorador de soluciones:
Figura 5: Elementos del proyecto
Después 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 de una aplicación. Mediante las
propiedades del proyecto y las páginas de propiedades, puede mostrar
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 7/16
propiedades del proyecto y las páginas 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 más
específico a MainWindow. En el Explorador de soluciones,
seleccione MainWindow.xaml. Debería ver la ventana Propiedades
para ese archivo debajo de la ventana. Si no ve la ventana
Propiedades, seleccione MainWindow.xaml en el Explorador de
soluciones, abra el menú contextual (haciendo clic con el botón
secundario) y seleccione Propiedades. Cambie la propiedad
Nombre de archivo a Greetings.xaml.
El 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
del diseñador y seleccione la barra de título de la ventana.
3. En la ventana Propiedades, cambie el valor de la propiedad Title
a Greetings.
Precaución
Este cambio produce un error que aprenderá a depurar y
corregir en un paso posterior.
En la barra de título de MainWindow.xaml se lee ahora Greetings.
Diseñar la interfaz de usuario (IU)
Agregaremos tres tipos de controles a esta aplicación: un control
TextBlock, dos controles RadioButton y un control Button.
Para agregar un control TextBlock
1. Abra la ventana Cuadro de herramientas. Debe estar a la
izquierda de la ventana del diseñador. También puede abrirla
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 8/16
desde el menú Ver o escribiendo CTRL+ALT+X.
2. En el Cuadro de herramientas, busque el control TextBlock.
3. Agregue un control TextBlock a la superficie de diseño y centre el
control cerca de la parte superior de la ventana.
La ventana debería ser similar a la siguiente ilustración:
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
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 Diseño,
amplíe el control TextBlock para que se muestre todo el texto.
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 9/16
amplíe el control TextBlock para que se muestre todo el texto.
3. Guarde los cambios.
A continuación, 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 diseño y
muévalos de modo que aparezcan en paralelo bajo el control
TextBlock.
La ventana debe ser similar a la que se muestra a continuación:
Figura 8: RadioButtons en la ventana Greetings.
3. En la ventana Propiedades del control RadioButton izquierdo,
cambie la propiedad Name (la propiedad situada en la parte
superior de la ventana Propiedades) a RadioButton1.
4. En la ventana Propiedades del control RadioButton derecho,
cambie la propiedad Name a RadioButton2 y después guarde
los cambios.
Ahora puede agregar el texto para mostrar de cada control RadioButton.
El procedimiento siguiente actualiza la propiedad Content de un control
RadioButton.
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 10/16
Para agregar el texto para mostrar de cada botón de radio
1. En la superficie de diseño, abra el menú contextual de
RadioButton1, elija Editar texto y, a continuación, escriba Hello.
2. Abra el menú contextual de RadioButton2, elija Editar texto y, a
continuación, escriba Goodbye.
El último elemento de la interfaz de usuario que agregará es un control
Button.
Para agregar el control Button
1. En el Cuadro de herramientas busque el control Button y
después agréguelo a la superficie de diseño, bajo los controles
RadioButton.
2. En la vista XAML, cambie el valor de Content del control Button
de Content=”Button” a Content=”Display” y después guarde
los cambios.
El marcado debería ser similar al del ejemplo siguiente: <Button
Content="Display" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="75"
Margin="215,204,0,0"/>
La ventana debería parecerse a la de la siguiente ilustración.
Figura 9: Interfaz de usuario final de Greetings
Agregar código al botón Mostrar
Cuando se ejecuta esta aplicación, aparece un cuadro de mensaje
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 11/16
Cuando se ejecuta esta aplicación, aparece un cuadro de mensaje
después de que un usuario elija un botón de radio y, a continuación, el
botón Mostrar. Aparecerá un cuadro de mensaje para Hello y otro para
Goodbye. Para crear este comportamiento, debe agregar código al
evento Button_Click en Greetings.xaml.vb o Greetings.xaml.cs.
Agregar código para mostrar cuadros de mensaje
1. En la superficie de diseño, haga doble clic en el botón Mostrar.
Se abre Greetings.xaml.vb o Greetings.xaml.cs con el cursor en el
evento Button_Click. También puede agregar un controlador de
eventos clic del modo siguiente:
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 código siguiente:
Para Visual C#, escriba el código siguiente:
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
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 12/16
3. Guarde la aplicación.
Depurar y probar la aplicación
A continuación, depurará la aplicación para buscar errores y probar que
los dos cuadros de mensaje aparecen correctamente. Para obtener más
información, vea Compilar una aplicación de WPF (WPF) y Depurar WPF.
Buscar y corregir errores
En este paso, buscará el error que se produjo anteriormente al cambiar
el nombre del archivo XAML de la ventana principal.
Para iniciar la depuración y buscar el error
1. Inicie el depurador seleccionando Depurar y después Iniciar
depuración.
Aparece un cuadro de diálogo que indica que se ha producido
una excepción IOException: No se encuentra el recurso
‘mainwindow.xaml’.
2. Elija el botón Aceptar y después detenga el depurador.
Hemos cambiado el nombre Mainwindow.xaml a Greetings.xaml al
comienzo de este tutorial, pero la solución todavía apunta a
Mainwindow.xaml como el URI de inicio de la aplicación, 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
Diseño).
2. Cambie StartupUri="MainWindow.xaml" a
StartupUri="Greetings.xaml" y después guarde los cambios.
Inicie otra vez el depurador. Debería ver la ventana Greetings de la
aplicación.
}
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 13/16
Para depurar con puntos de interrupción
Agregando algunos puntos de interrupción puede probar el código
durante la depuración. Puede agregar puntos de interrupción eligiendo
Depurar, Alternar puntos de interrupción en la barra de menús o
haciendo clic en el margen izquierdo del editor junto a la línea de código
donde desea que se produzca la interrupción.
Para agregar puntos de interrupción
1. Abra Greetings.xaml.vb o Greetings.xaml.cs y seleccione la línea
siguiente: MessageBox.Show("Hello.")
2. Agregue un punto de interrupción en el menú seleccionando
Depurar y después Alternar puntos de interrupción.
Aparece un círculo rojo al lado de la línea de código en el margen
izquierdo de la ventana del editor.
3. Seleccione la línea siguiente: MessageBox.Show("Goodbye.").
4. Elija la tecla F9 para agregar un punto de interrupción y después
elija la tecla F5 para iniciar la depuración.
5. En la ventana Greetings, elija el botón de radio Hello y después
elija el botón Mostrar.
La línea MessageBox.Show("Hello.") se resalta en amarillo. En la
parte inferior del IDE, las ventanas Automático, Variables locales e
Inspección están acopladas juntas en el lado izquierdo, y las
ventanas Pila de llamadas, Puntos de interrupción, Comando,
Inmediato y Resultados están acopladas juntas en el lado
derecho.
6. En la barra de menús, elija Depurar, Paso a paso para salir.
La aplicación reanuda la ejecución y aparece un cuadro de
mensaje con la palabra “Hello”.
7. Elija el botón Aceptar en el cuadro de mensaje para cerrarlo.
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 14/16
8. En la ventana Greetings, elija el botón de radio Goodbye y
después elija el botón Mostrar.
La línea MessageBox.Show("Goodbye.") se resalta en amarillo.
9. Elija la tecla F5 para continuar con la depuración. Cuando
aparezca el cuadro de mensaje, elija el botón Aceptar en el
cuadro de mensaje para cerrarlo.
10. Elija las teclas MAYÚS + F5 para detener la depuración.
11. En la barra de menús, elija Depurar, Deshabilitar todos los
puntos de interrupción.
Crear una versión de lanzamiento de la aplicación
Ahora que ha comprobado que todo funciona, puede preparar una
versión de lanzamiento de la aplicación.
Para limpiar los archivos de solución y crear una versión de
lanzamiento
1. Seleccione Compilar y después Limpiar solución para eliminar
los archivos intermedios y de salida que se crearon durante las
compilaciones anteriores.
2. Cambie la configuración de compilación de HelloWPFApp de
Debug a Release.
3. Compile la solución.
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 15/16
Adiciones de comunidad AGREGAR
¡Enhorabuena por completar este tutorial! Si desea explorar más
ejemplos, vea Ejemplos de Visual Studio.
Vea también
Conceptos
Novedades de Visual Studio 2013
Introducción a Visual Studio
Sugerencias de productividad para Visual Studio
Centros de desarrollo
Windows
Office
Visual Studio
Nokia
Microsoft Azure
Más...
Recursos de aprendizaje
Microsoft Virtual Academy
Channel 9
Puentes de interoperabilidad
MSDN Magazine
Comunidad
Foros
Blogs
Codeplex
Soporte técnico
Autosoporte
Programas
BizSpark (para nuevas empresas)
DreamSpark
Imagine Cup
España (Español) Boletín Privacidad y cookies Términos de uso
Marcas comerciales © 2014 Microsoft
11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic
http://msdn.microsoft.com/es-es/library/jj153219.aspx 16/16