Empezar a crear una aplicación de Windows Phone
Introducción y Fundamentos
Empezar a crear una aplicación de Windows Phone
Windows Phone 7 incluye varias herramientas para ayudarte a crear y publicar aplicaciones. Estetutorial describe las herramientas de desarrollo y cómo empezar a crear tu primera aplicación paraWindows Phone.
El inicio rápido contiene las siguientes secciones:
· Instalación de las Herramientas de desarrollo
· Crear un nuevo proyecto
· Agregar un TextBlock
· Realización de la primera aplicación
· Ejecutar la aplicación en un teléfono
· Adición de gráficos
· Agregar un botón
· Agregar animación
· Publicación en el Mercado de Aplicaciones
· ¿Qué sigue?
Nota:
Los ejemplos en estos artículos, sobre el uso de Silverlight se ejecutan en el navegador, parasimular el comportamiento para Windows Phone. El procedimiento real puede ser ligeramente diferente en el emulador de Windows Phone o en un dispositivo Windows Phone.
Instalación de las herramientas de desarrollo
Puedes descargar e instalar todo lo necesario para crear y publicar aplicaciones de Windows Phone. En los siguientes elementos, selecciona la descarga que corresponda y a continuación, haz clic en los enlaces para instalar las herramientas:
Para desarrolladores en C#:
Si eres un desarrollador de C #, instalar los siguientes vínculos:
1. Herramientas de Windows Phone para desarrolladores
2. Herramientas de Windows Phone para desarrolladores, actualización de Enero 2011.
Para desarrolladores en Visual Basic:
Si eres un desarrollador de Visual Basic, debes tener previamente instalado Visual Studio 2010 Professional, Premium o Ultimate, para utilizar Visual Basic para Windows Phone. Visual Basic para Windows Phone no es compatible con Visual Studio 2010 Express.
Si eres un desarrollador de Visual Basic, instala lo siguiente:
- Herramientas para desarrolladores de Visual Basic:
- Herramientas para desarrolladores de Visual Basic, actualización, Enero 2011:
3. Herramientas para desarrolladores de Microsoft Visual Basic, Windows Phone– RTW:
Creación de un nuevo proyecto
Después de haber instalado las herramientas de desarrollo Windows Phone, la forma más fácil de crear tu primera aplicación es utilizando Visual Studio.
- En el menú Inicio, selecciona Microsoft Visual Studio 2010 Express para Windows Phone.
- En el menú Archivo, haz clic en Nuevo proyecto
Esto abre el cuadro de diálogo de un Nuevo proyecto. Al lado izquierdo del cuadro de diálogo se presentan proyectos de diferentes plantillas. Al seleccionar Silverlight para Windows Phone, en la parte central del cuadro de diálogo, se muestran los diferentes tipos de aplicaciones que se pueden crear.
- A la izquierda, selecciona Silverlight para Windows Phone.
- En el centro, selecciona la plantilla de Aplicación de Windows Phone.
- Agregar el nombre HelloWorld_Phone al proyecto, y haz clic en Aceptar.
Se creará un nuevo proyecto de Silverlight para Windows Phone y luego se abrirá el diseñador, tal como se muestra en la siguiente imagen.
De forma predeterminada, Visual Studio se divide en tres paneles. (Dependiendo de su configuración, sus paneles pueden ser distintos). A la izquierda está la vista Diseño, en el centro es el punto de vista XAML, y de la derecha es el Explorador de soluciones.
En el Explorador de soluciones, hay una serie de archivos de proyecto. Los archivos que se utilizarán en este tutorial son MainPage.xaml y MainPage.xaml.cs. MainPage.xaml define la interfaz de usuario de la aplicación. XAML es un lenguaje declarativo basado en XML, utilizado para crear y diseñar elementos de la interfaz de usuario. Para obtener más información acerca de XAML, visualice el siguiente enlace: Información general sobre XAML [http://msdn.microsoft.com/es-es/library/cc189036%28v=VS.95%29.aspx].
Si expande MainPage.xaml, verá un archivo de código de C# subyacente, llamado MainPage.xaml.cs. Un archivo de código subyacente se unió a un archivo XAML a través de una clase parcial, y contiene la lógica para el archivo XAML. Para obtener más información acerca de código subyacente y clases parciales, visualizar en MSDN: código subyacente y clases parciales[http://msdn.microsoft.com/es-es/library/cc221357%28v=VS.95%29.aspx
La separación entre la interfaz de usuario y el código, te permite crear elementos de la interfaz en el lenguaje de marcación XAML y luego usar una parte del archivo del código subyacente para responder a eventos y manipular los objetos que se declaran en XAML. Esta separación hace que sea fácil para los diseñadores y desarrolladores trabajar juntos de forma eficaz en los mismos proyectos.
Agregar un TextBlock
A continuación, se añadirá un simple TextBlock que muestra el mensaje "Hola, mundo". Hay diferentes maneras en las que se pueden agregar elementos, pero esta sección va a utilizar la caja de herramientas y la vista de diseño.
- Si el MainPage.xaml no está abierto, haz doble clic en MainPage.xaml en el Explorador de soluciones.
- En el menú Ver, haz clic en Otras ventanas y, a continuación, haz clic en el Caja de herramientas. La ventana de la caja de herramientas aparecerá.
- Cambiar el tamaño de la caja de herramientas para que pueda visualizarla, así como también la vista de diseño del teléfono.
- En la vista de diseño, asegúrate de que el TextBlock esté seleccionado.
- En la ventana de propiedades, establece en la propiedad Text Hola, mundo!
- Establece la propiedad FontSize a 50.
- Ajuste la propiedad Width a 70.
Luego actualiza la vista diseño, debe tener el siguiente aspecto:
Realización de la primera aplicación
Ahora que has creado tu primera aplicación de Silverlight para Windows Phone, necesitas ejecutarlo. Vamos a usar el emulador incorporado de Windows Phone que simula un dispositivo de Windows Phone. Usando el emulador de Windows Phone, puedes probar y depurar sus aplicaciones de forma rápida en el escritorio sin tener que implementar la aplicación en el dispositivo.
Para iniciar el emulador, sólo tendrás que iniciar una sesión de depuración para la aplicación. Visual Studio pondrá en marcha el emulador y cargará la aplicación en ella.
- Para iniciar la aplicación en modo de depuración, presione F5 o elija Depurar-> Iniciar depuración.
Si hay errores de compilación de la aplicación, Visual Studio mostrará información del error. Después de unos momentos un emulador en la ventana debe aparecer, como lo muestra la siguiente imagen.
Toma unos minutos para abrir el emulador e iniciar el depurador por primera vez. Para agilizar las sesiones posteriores de depuración, no cierres la ventana del emulador. En su lugar, elije Depurar-> Detener depuración, para suspender la depuración. Esto dejará el emulador en funcionamiento, por lo que la próxima sesión de depuración se cargará más rápidamente.
- Para detener la depuración, selecciona Depurar-> Detener depuración.
Ejecutar la aplicación en un Windows Phone
Para ejecutar la aplicación en un Windows Phone, debes desbloquear el dispositivo mediante las herramientas de registro de Windows Phone para desarrolladores. Esta herramienta se encuentra en el Menú Inicio de Herramientas para Desarrolladores en Windows Phone.
Si aún no tienes una cuenta en el sitio Concentrador de Aplicaciones (App Hub), regístrate ahora en App Hub https://users.create.msdn.com/Register/, el portal oficial de desarrolladores para Windows Phone.
1. Inicia el software Zune en tu computadora
2. Conecta el teléfono a la computadora
3. Se mostrará las herramientas de registro para desarrolladores de Windows Phone, a continuación, ingresa las credenciales de Windows Live ID, asociadas con tu cuenta de App Hub
4. En el asistente de registro, introduce la información necesaria acerca de la identificación de tu teléfono. Tu teléfono está desbloqueado y listo para recibir las implementaciones de aplicaciones en Visual Studio
5. En Visual Studio, la implementación en el teléfono es tan sencillo como seleccionar " Dispositivo de Windows Phone 7" (en lugar de un emulador) en el destino de implementación
6. Después de seleccionar el dispositivo de Windows Phone 7 en la lista desplegable, puedes implementar el dispositivo desbloqueado utilizando las mismas técnicas yprocesos de depuración como lo harías con el emuladorNota
Para una implementación exitosa, el teléfono debe estar conectado al computador con la pantalla abierta, y el software de Zune debe permanecer en ejecución.
Adición de gráficos
En Silverlight, puedes agregar gráficos utilizando formas. Puedes crear formas simples, como rectángulos o formas más complejas, tales como polígonos, brochas, los cuales se utilizan para la pintura o los objetos de color en Silverlight. Para obtener más información acerca de los gráficos y las brochas, consulta los tutoriales Gráficos y Brochas.
Vamos a empezar agregando un StackPanel alrededor de un TextBlock. Un panel es un contenedor que se utiliza para agrupar y diseñar elementos de la interfaz de usuario. Cada aplicación debe tener al menos un Panel. Un StackPanel expone cada uno de los elementos ya sea de forma vertical u horizontal, dependiendo de la orientación. El Grid y Canvas permiten un posicionamiento más exacto de los elementos.
La figura que crearás será una elipse, esta aparecerá después del TextBlock en el StackPanel. Debes especificar la altura y el ancho de la elipse, así como su relleno. Para el relleno, debes especificar una brocha para colorear la elipse.
En lugar de utilizar la vista Diseño, en esta ocasión se va a trabajar en la vista XAML.
- Cierra la ventana de la caja de herramientas
- En la vista XAML, busca el TextBlock que has agregado
- Vuelve a colocar el elemento TextBlock en el XAML
XAML
<StackPanel>
<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"
Name="FirstEllipse" />
</StackPanel>
4. Presiona F5 para ejecutar la aplicación.
La siguiente imagen muestra el emulador de la aplicación hasta ahora. Sin embargo, no hay interacción con el usuario, por lo que no hace mucho, pero vamos a añadir más controles consecutivamente.
- Para interrumpir la depuración, selecciona Depurar-> Detener depuración.
Agregar un Botón
Lo siguiente que se va a agregar a la aplicación es un botón, con él, los usuarios pueden interactuar con las aplicaciones de Silverlight, la cual tiene una rica biblioteca de controles que incluyen un botón, TextBox, ListBox, y muchos más.
Hay dos partes que deben tomarse en cuenta al añadir un botón. La primera parte consiste en agregar un botón de elemento para el XAML. La segunda parte consiste en añadir un poco de lógica para controlar los eventos generados por la interacción del usuario, tales como hacer clic en el botón.
1. En la vista XAML, agrega el siguiente código XAML después de la etiqueta <Ellipse />.
XAML
<Button Height="150"
Width="300"
Name="FirstButton"
Content="Tap" />
Debes darle al botón un valor con el nombre de "FirstButton", para que puedas acceder al código. El atributo Content especifica el texto que aparece en el botón. Los atributos Height y Width especifican la altura y el ancho del botón.
Silverlight cuenta con un modelo de aplicación orientada a eventos. Cuando pasan ciertas cosas en tu aplicación, como cuando un usuario hace clic en un botón o se carga la aplicación, se produce un evento. Tú puedes agregar código, denominado controlador de eventos, el cual hace algo en específico cuando un evento se produce. Vamos a añadir un controlador para evento Click.
Visual Studio puede crear los controladores de eventos para ti.
2. En la vista Diseño, selecciona el botón.
3. En la ventana Propiedades, haz clic en la pestaña Eventos. Una lista de eventos para el botón aparecerá.
4. Haz doble clic en el evento Click
El código subyacente del archivo MainPage.xaml.cs se abrirá y deberías ver el controlador de eventos FirstButton_Click.
5. Dentro de las llaves, agrega el siguiente código al controlador de eventos.
C#
private void FirstButton_Click (object sender, RoutedEventArgs e)
{
if (FirstButton.Contentas string == "Tap")
{
FirstButton.Content = " Tap Again";
}
else
{
FirstButton.Content = "Tap";
}
El controlador de eventos FirstButton_Click, realiza la siguiente acción: cuando el botón es pulsado, el texto que se muestra en el botón alterna entre "Tap" and "Tap Again".
6. Presiona F5 para ejecutar la aplicación.
En el siguiente ejemplo se muestra el controlador de eventos, para probarlo, haga clic en el botón.
XAML
<StackPanel>
<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"
Name="FirstEllipse" />
<Button Height="150"
Width="300"
Content="Tap"
Name="FirstButton"
Click="FirstButton_Click" />
</StackPanel>
Agregando animación
La última cosa que vamos a agregar a la aplicación es un poco de animación. Vamos a crear una animación muy simple que comprime la elipse y luego la expande al salir, pero se puede hacer mucho más con animaciones. Para obtener más información acerca de las animaciones, consulte la información general sobre animaciones http://msdn.microsoft.com/es-es/library/cc189019(v=VS.95).aspx en MSDN.
Para crear una animación tiene que hacer tres cosas: crear un StoryBoard, crear una animación y a continuación, agrega código para iniciar la animación.
Un StoryBoard es un contenedor que se utiliza para animaciones en grupo. Desde el StoryBoard, las animaciones se pueden iniciar y detener. Las animaciones en Silverlight van cambiando el valor de su propiedad en un lapso de tiempo. El Storyboard.TargetName es una propiedad que especifica el objeto al que la animación se aplicará. Storyboard.TargetProperty especifica la propiedad en el objeto que se animará. La propiedad To especifica el valor para animar. El AutoReverse especifica si la animación se debe repetir cuando está terminado el regreso a su posición inicial. La propiedad Duration específica el tiempo que se toma la animación. Por ejemplo, si deseas que la duración sea de un segundo, debes establecer la duración a "00:00:01" (cero horas: cero minutos: un segundo).
- En el Explorador de soluciones, haz doble clic en MainPage.xaml.
- En la vista XAML, reemplaza el StackPanel actual con el siguiente XAML.
XAML
<StackPanel>
<StackPanel.Resources>
Storyboard x:Name="FirstStoryBoard">
<DoubleAnimation Storyboard.TargetName="FirstEllipse"
Storyboard.TargetProperty="Width"
To="1" AutoReverse="True"
Duration="00:00:01" />
</Storyboard>
</StackPanel.Resources>
<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"
Name="FirstEllipse" />
<Button Height="150"
Width="300"
Name="FirstButton"
Content="Click"
Click="FirstButton_Click" />
</StackPanel>
Este XAML crea una sección StackPanel.Resources que contiene un elemento StoryBoard. El StoryBoard se denomina
FirstStoryBoard, para que se pueda acceder a él en el código. La animación cambia el ancho de la propiedad de la elipse, que es un tipo Double, por lo que utiliza un DoubleAnimation. La propiedad Storyboard.TargetName especifica el objeto FirstEllipse. El Storyboard.TargetProperty especifica la propiedad Width sobre la elipse. La propiedad To se establece en 1, por lo que el ancho se reducirá a partir de su valor actual de 200 a 1. La propiedad AutoReverse se establece en True, para que la animación se repita. La propiedad Duration se establece en un segundo. 
Ahora lo que necesitas es iniciar la animación. Para esto, se llama al método Begin en el StoryBoard.
3. En el MainPage.xaml.cs, agrega la siguiente llamada al método Begin para iniciar la animación
FirstStoryBoard cuando se hace clic en el FirstButton.
C#
private void FirstButton_Click(object sender, RoutedEventArgs e)
{
if (FirstButton.Content as string == "Tap")
{
FirstButton.Content = "Tap Again"
}
else
{
FirstButton.Content = "Tap";
}
FirstStoryBoard.Begin();
}
- Presiona F5 para ejecutar la aplicación.
En el siguiente ejemplo se muestra la animación con hacer clic en el botón
Publicación en el Mercado de Aplicaciones
Cuando hayas terminado la aplicación, es probable que desees una descarga gratuita o su venta para distribución al público. Esto se hace mediante la presentación de una solicitud en el mercado de Windows Phone. Para saber cómo hacerlo, consulta Publicando tu aplicación en el Marketplace.
¿Qué sigue?
Ahora que ya has sido introducido en tu primera aplicación de Windows Phone, échale un vistazo a la Guía de diseño de interfaz de usuario para Windows Phone. No todo en este documento será inmediatamente adecuado para ti, pero puedes volver a él de vez en cuando para repasar las mejores prácticas. Una vez que hayas terminado, vuelve aquí y consulta el siguiente enlace que se adentra en XAML, el lenguaje de marcado declarativo para crear la interfaz de usuario de la aplicación: Creando la interfaz de usuario de Windows Phone (XAML).
