Generation App – Día 3 – Desarrollar tu primera aplicación Silverlight para Windows Phone

Utilizar Visual Studio 2010 para la implementación de funcionalidad y depuración

Una vez diseñado la mayor parte de la interfaz de usuario, puedes contar con Visual Studio 2010 para implementar la parte de funcionalidad de tu aplicación. Es el entorno ideal para depurar, analizar y pulir tu aplicación. Inclusive con VS, puedes someter tu aplicación a una prueba de certificación para validar todas reglas necesarias para que sea apta para su publicación en el Windows Phone Store.

A modo de introducción a crear una primera aplicación sencilla, haremos paso a paso una aplicación con un navegador web realizado en Silverlight.

Creando un nuevo proyecto

El primer paso para crear una aplicación Silvelight para Windows Phone es crear un nuevo Proyecto.

  1. Asegúrate que hayas descarga e instalado el Windows Phone SDK.

  2. Ejecuta Visual Studio 2010 Express para Windows Phone. Si la ventana de Registro aparece, te puedes registrar o lo despachas temporalmente.

  3. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

  4. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

  5. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto Mini Navegador.

  6. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1para la versión de Windows Phone objetivo.

  7. Da clic a OK. El proyecto nuevo es creado y se despliega el archivo MainPage.xamlen el diseñador de Visual Studio.

Agregando Controles

El siguiente paso es agregar los controles de la aplicación usando el diseñador de Visual Studio. Después de agregar los controles, el resultado final se vera similar como en el siguiente screenshot.

Para agregar los controles a la aplicación

  1. Renombra el titulo de la aplicación. Dale clic derecho al texto MY APPLICATIONy selecciona Properties. Cuando aparece la ventana Properties en la esquina inferior derecha.

  2. En la propiedad Text, cambia el nombre a My First Application.

  3. Ahora da clic en el texto del page name. Cambia la propiedad Text aMiniBrowser.

  4. Agrega soporte para ambas orientaciones del dispositivos. Da clic a la primera línea del código XAML para que aparezcan las propiedades en la ventana Properties. Cambia la propiedad SupportedOrientation a PortraitOrLandscape.

  5. Abre el Toolbox de Visual Studio, si no esta abierto, seleccionando el comando de menú View | Other Windows | Toolbox.

  6. De los Windows Phone Controls, agrega el control TextBox al diseñador haciéndole arrastrándolo del toolbox hacia la superficie del diseñador. Coloca elTextBox justo debajo del titulo Mini Browser. Utiliza el mouse para ajusta el ancho del control como se muestra en la imagen anterior. Puedes dejar el nombre del textbox por defecto.
    En la ventana de Properties, asigna las siguientes propiedades para textBox1.Estos valores permitirán que el tamaño y la posición del textbox se re-ajustan de acuerdo a la orientación del dispositivo. Utiliza la re-ubicación del textbox relativo al margen, a modo que haya espacio para el botón Go.

  7. Realiza un drag and drop de un control Button hacia la derecha del textbox que ya agregaste. Reajusta el tamaño y la posición de acuerdo a la imagen de la interfaz resultante. En la ventana de Properties, establece las siguientes propiedades.

    Estas propiedades permitirán que el botón se reajuste de acuerdo a ambas orientaciones de pantalla.Ahora tu interfaz debería estar completada. En el código XAML de MainPage.xaml, busca al grid que contiene sus controles. Debería verse similar al código siguiente. Si deseas que la interfaz se vea exactamente, copia y pega el siguiente código XAML y pégalo reemplazando todo el grid:

    <Gridx:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><TextBoxHeight="Auto"HorizontalAlignment="Stretch"Margin="0,0,120,0"Name="textBox1"Text="http://www.xbox.com"VerticalAlignment="Top"/><ButtonContent="Go"Height="Auto"HorizontalAlignment="Right"Name="button1"VerticalAlignment="Top"Width="Auto"/><phone:WebBrowserHorizontalAlignment="Stretch"Margin="0,84,0,0"Name="webBrowser1"VerticalAlignment="Stretch"Height="Auto"Width="Auto"/></Grid>

Agregando Código

  1. Realiza un doble clic sobre el botón GO en el diseñador de Visual Studio. Se despliega el archivo MainPage.xaml.cs que es similar al código que sigue:

    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Microsoft.Phone.Controls;
    
    namespace MiniBrowser
    {
        publicpartialclass MainPage : PhoneApplicationPage
        {
            // Constructorpublic MainPage()
            {
                InitializeComponent();
            }
    
            privatevoid button1_Click(object sender, RoutedEventArgs e)
            {
    
            }
        }
    }
  2. Haciendo doble-clic al botón te agrega un atributo en el controlador que es la declaración del método manejador del evento:
    <ButtonContent="Go"Height="Auto"HorizontalAlignment="Right"Name="button1"VerticalAlignment="Top"Width="Auto"Click="button1_Click"/>
  3. Ahora en MainPage.xaml.cs reemplaza el manejador de evento button1_Clickcon las siguientes líneas de código. Este código tomara el URL ingresado en el textbox y navega hacia esa pagina en el control webBrowser1.
    privatevoid button1_Click(object sender, RoutedEventArgs e)
    {
        string site = textBox1.Text;    
        webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
    }

Compilar y Depurar la Aplicación

La aplicación ya esta completada. Ahora compilaremos y depuraremos la aplicación. NOTA: antes de probar la aplicación, asegúrate de contar con una conexión a internet.

  1. Arma la solución usando el comando de menú Debug | Build Solution. El proyecto debería compilar sin ningún error en la lista de errores. Puedes visualizar la ventana de lista de errores, si no esta abierto, seleccionando el comando de menúView | Other Windows | Error List. Si hay errores, revisa los pasos anterior y verifica si hiciste algo indebido.

  2. En la barra herramientas estándar, establece el objetivo de despliegue de la aplicación a Windows Phone Emulator.

  3. Ejecuta la aplicación seleccionando el comando de menú Debug | Start Debugging. Esto abrirá el emulador de Windows Phone y ejecutara la aplicación.

  4. Ahora da un clic sobre el botón Go, y veras que se desplegara la pagina web en el control webBrowser1.

  5. Presiona los botones de rotación en el emulador para cambiar la orientación del Windows Phone.

  6. Observa como la interfaz de tu aplicación se reajustara de acuerdo a la orientación seleccionada.
  7. Para detener la ejecución de la aplicación, da clic al menú de comando Debug | Stop Debugging.

Ahora que has completado tu primera aplicación Windows Phone con Silverlight. En las lecciones  posteriores, iras aprendiendo diversas funcionalidades que te pueden apoyar en el desarrollo de tu aplicación.

Autor: Jorge Ramirez
Publicación original –> http://j.mp/VBFPEN
Fuente –> http://j.mp/UTAHxh

Anuncios

3 comentarios

Archivado bajo Windows Phone

3 Respuestas a “Generation App – Día 3 – Desarrollar tu primera aplicación Silverlight para Windows Phone

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

  2. vamos bien.

    Apenas estoy comenzando con el wp. Espero poder tener una aplicacion pronto

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s