Como criar sua primeira aplicação para Windows Phone 8

Esse artigo irá descrever instruções passo a passo para lhe ajudar a criar seu primeiro aplicativo para Windows Phone. Será criado um browser básico. Esse aplicativo simples permite que o usuário informe uma URL e uma página web seja carregada quando o botão Go é pressionado.

Antes de começar


Esse guia assume que você irá testar seu aplicativo no simulador. Se quiser testar seu aplicativo em um telefone, terá que seguir alguns passos adicionais. Para mais informações, veja o artigo How to register your phone for development for Windows Phone 8.
Os passos descritos nesse artigo assumem que você está usando o Visual Studio Express 2012 para Windows Phone. Você pode encontrar algumas variações no layout das janelas ou comandos de menu se estiver usando o Visual Studio 2012 Professional ou uma versão mais nova, ou se você personalizou o layout do Visual Studio.

Crie o projeto


O primeiro passo para criar um aplicativo para Windows Phone é criar um novo projeto no Visual Studio.

Para criar o projeto

  1. Certifique-se de ter baixado e instalado o Windows Phone SDK. Para mais detalhes, veja o artigo Get the SDK.
  2. Abra o Visual Studio a partir da tela Windows Start. Se a tela de registro aparecer, pode registrar o produto, ou pular temporariamente esse aviso.
  3. Crie um novo projeto selecionando o menu FILE | New Project.
  4. Na janela New Project, expanda os templates Visual C# ou Visual Basic, e selecione os templates do Windows Phone.
  5. Na lista de templates do Windows Phone, selecione o template Windows Phone App.
  6. Na parte de baixo da janela New Project, digite MiniBrowser como nome do projeto.GetStartedNewProject
  7. Clique em OK. Na caixa de diálogo New Windows Phone Application, selecione Windows Phone OS 8.0 para Target Windows Phone OS Version.
    • Quando você seleciona Windows Phone OS 8.0 como versão alvo, seu aplicativo irá rodar apenas em dispositivos com o Windows Phone 8.
    • Quando você seleciona Windows Phone OS 7.1, seu aplicativo poderá ser executada tanto em dispositivos com Windows Phone OS 7.1 e Windows Phone 8.

    GetStartedSelectPlatform

  8. Clique em OK. O novo projeto é criado,e é aberto no Visual Studio. O designer exibe o arquivo MainPage.xaml, que contém a interface com o usuário do aplicativo. A janela principal do Visual Studio conterá os seguintes intens:
    • O painel do meio conterá a marcação XAML que define a interface com o usuário para a página.
    • O painel à esquerda conterá uma imagem que mostra a saída da marcação XAML.
    • O painel à direita exibe o Solution Explorer, que lista os arquivos do projeto.
    • O código associado á página, MainPage.xaml.cs ou MainPage.xaml.vb, que contém o código para tratar as interações do usuário com a página, não é exibido por padrão.

    New project open in the Visual Studio designer.

Crie a interface com o usuário


O próximo passo é posicionar os controles que farão parte da interface do aplicativo usando o designer do Visual Studio. Depois de adicionar os controles, o layout final irá se parecer com a seguinte tela:
GetStartedFirstAppLayout

Para criar a interface

  1. Abra a janela Properties do Visual Studio, se já não estiver aberta, selecionando o menu VIEW | Properties Window. A janela Properties é aberta no lado direito inferior da janela do Visual Studio.
  2. Altere o título do aplicativo.
    1. No designer do Visual Studio, clique para selecionar o controle TextBlock MY APPLICATION. As propriedades do controles serão exibidas na janela Properties.GetStartedProperties
    2. Na propriedade Text, altere o nome para MY FIRST APPLICATION para renomear o título da janela do aplicativo. Se as propriedades estiverem agrupadas por categorias na janela Properties, você poderá encontrar Text na categoria Common.
  3. Altere o nome da página.
    1. No designer, clique para selecionar o controle TextBlock page name.
    2. Altere a propriedade Text para Mini Browser para renomear a página principal do aplicativo.
  4. Altere as orientações suportadas.
    1. Na janela de código XAML, clique na primeira linha do código XAML. As propriedades de PhoneApplicationPage serão mostradas na janela Properties.
    2. Altere a propriedade SupportedOrientations para PortraitOrLandscape para adicionar suporte tanto para a orientação retrato quando paisagem. Se as proprieddes estiverem agrupadas por categorias, irá encontrar SupportedOrientations na categoria Common.
  5. Abra a Toolbox do Visual Studio, se já não estiver aberta, selecionando o comando VIEW | Toolbox. A Toolbox abre normalmente no lado esquerdo ja janela do Visual Studio e exibe a lista de controles disponíveis para construção da interface. Por padrão, a Toolbox fica encolhida quando você não está usando-a.Visual Studio Toolbox
  6. Adicione um caixa de texto para a URL.
    1. No grupo Common Windows Phone Controls da Toolbox, adicione um controle TextBox na área de desenho arrastando ele da Toolbox para a área mencionada. Posicione a TextBox abaixo do texto Mini Browser. Use o mouse para dimensionar o controle para que ele fique do tamanho aproximado mostrada na imagem acima. Deixe um espaço à direita para o botão Go.
    2. Na janela Properties, configure as seguintes propriedades para a nova caixa de texto.
      Propriedade Valor
      Name URL
      Text http://www.xbox.com
      TextWrapping NoWrap
      Height Auto
      Width Auto
      HorizontalAlignment Stretch
      VerticalAlignment Top

      Com essas configurações, o controle pode ser dimensionada e posicionada corretamente tanto no modo retrato quanto no modo paisagem.

  7. Adicione o botão Go.
    1. Redimensione a caixa de texto para deixar um espaço para o botão Go. Em seguida, do grupo Common Windows Phone Controls da Toolbox, adicione um controle Button arrastando e soltando ele. Posicione esse controle à direita da caixa de texto que você acabou de adicionar. Dimensione o botão para o tamanho aproximado mostrada na imagem acima.
    2. Na janela Properties, configure as propriedades para o novo botão.
      Propriedade Valor
      Name Go
      Content Go
      Height Auto
      Width Auto
      HorizontalAlignment Right
      VerticalAlignment Top

      Com essas configurações, o controle poderá ser dimensionado e posicionada corretamente nos modos retrato e paisagem.

  8. Adicione o controle WebBrowser.
    1. A partir do grupo All Windows Phone Controls da Toolbox, adicione um controle WebBrowser no seu aplicativo arrastando e soltando ele. Posicione-o abaixo dos dois controles adicionados nos passos anteriores. Use o mouse para dimensionar o controle para que ele preencha o espaço restante. Se quiser aprender mais sobre o controle WebBrowser, veja o artigo WebBrowser control for Windows Phone 8.
    2. Na janela Properties, configure as seguintes propriedades para o novo controle WebBrowser.
      Propriedade Valor
      Name MiniBrowser
      Height Auto
      Width Auto
      HorizontalAlignment Stretch
      VerticalAlignment Stretch

      Com essas configurações, o controle poderá ser dimensionado e posicionado corretamente tanto em modo retrato quanto em modo paisagem.

Seu layout está completo agora. No código XAML em MainPage.xaml, observe o grid que contém os seus controles. Ele deve se parecer com o código abaixo. Se você quiser que o layout fique exatamente como mostrado na imagem, copie o código XAML abaixo e cole-o sobre o código do grid em seu arquivo MainPage.xaml.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="http://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

Adicione o código


O passo final antes de testar seu aplicativo é adicionar código para implementar o botão Go.

Para adicionar o código

  1. No designer, clique duas vez no controle do botão Go que você adicionou para criar um manipulador de eventos vazio para o evento Click do botão. Você verá o manipulador de eventos vazio em uma página de código C# na aba MainPage.xaml.cs, ou em uma página de código Visual Basic na aba MainPage.xaml.vb.
    Imports System
    Imports System.Threading
    Imports System.Windows.Controls
    Imports Microsoft.Phone.Controls
    Imports Microsoft.Phone.Shell
    Partial Public Class MainPage
        Inherits PhoneApplicationPage
        ' Constructor
        Public Sub New()
            InitializeComponent()
        End Sub
        Private Sub Go_Click(sender As Object, e As RoutedEventArgs) Handles Go.Click
        End Sub
    End Class
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using MiniBrowser.Resources;
    namespace MiniBrowser
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
            private void Go_Click(object sender, RoutedEventArgs e)
            {
            }
        }
    }
    

    Quando você clica duas vezes no botão Go, o Visual Studio também atualiza o código XAML em MainPage.xaml para conectar o evento Click do botão ao manipulador de evento Go_Click.

        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top" Click="Go_Click"/>
    
  2. No arquivo MainPage.xaml.cs ou no MainPage.xaml.vb, adicione o código destacada a seguir no manipulador de evento Go_Click. Esse código pega a URL que o usuário digitou na caixa de texto e navega para essa URL no controle MiniBrowser.
    Private Sub Go_Click(sender As Object, e As RoutedEventArgs) Handles Go.Click
        Dim site As String = URL.Text
        MiniBrowser.Navigate(New Uri(site, UriKind.Absolute))
    End Sub
    private void Go_Click(object sender, RoutedEventArgs e)
    {
        string site = URL.Text;
        MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
    }
    

Execute a sua aplicação


Agora que você finalizou a criação de seu primeiro aplicativo para Windows Phone, você irá agora compila-lo e executa-lo.
Antes de testar seu aplicativo, certifique-se que seu computador tenha acesso à Internet para permitir o teste do controle de Web browser.

Para executar sua aplicação no simulador

  1. Compile o projeto selecionando o comando BUILD | Build Solution. Caso algum erro ocorra, eles serão listados na janela Error List. Você pode abrir essa janela, caso não esteja aberta, selecionando o menu VIEW | Error List. Se houver algum erro, revise os passos acima, corrija os erros, e em seguida compila o projeto novamente.
  2. Na barra de ferramentas  Standard, certifique-se que o alvo de carregamento para o aplicativo esteja configurada para o Windows Phone Emulator, por exemplo, Emulator WVGA 512MB.Target on Standard Toolbar selecting emulator
  3. Execute o aplicativo pressionando F5 ou selecionando o menu DEBUG | Start Debugging. Isso abre a janela do simulador e o aplicativo é carregado. Se essa for a primeira vez que você está iniciando o simulador, pode levar alguns segundo para o aplicativo seja aberto. O  Windows Phone 8 Emulator possui requisitos especiais de hardware, software e configurações. Se encontrar algum problema com ele, dê uma olhada nos seguintes artigos:
  4. Para testar o aplicativo em execução, clicque no botão Go e verifique que o browser vai para o web site especificado.GetStartedFirstAppRunning
  5. Para testar o aplicativo em modo paisagem, pressione um dos controles de rotação da barra de ferramentas:rotate left button Ourotate right buttonO simulador será rotacionado para o modo paisagem. Os controles são redimensionados para caber no novo formato de tela.GetStartedFirstAppRunningLandscape
  6. Para interroper a execução, você pode selecionar o menu DEBUG | Stop Debugging do Visual Studio. É melhor deixar o simulador sendo executado quando você encerra a execução. Na próxima vez que você quiser executar a aplicação. ele será aberto mais rapidamente pois o simulador já está sendo executado.

Parabén! Você acabou de completar seu primeiro aplicativo para o Windows Phone.

O que fazer em seguida?


Comece a desenvolver para o Windows Phone.

Registre seu telefone
Registre seu telefone para que você possa instalar, executar e depurar seus aplicativos no próprio telefone. Veja como no artigo How to register your phone for development for Windows Phone 8
Baixe outros exemplos de aplicativos
Escolha dentre um grande número de exemplos para aprender como controles, recursos e tipos de aplicativo funcionam. Samples gallery on Windows Phone Dev Center
Aprenda mais com os cursos on-line
Assita vídeos e siga demons para aprender recursos que possam ser de seu interesse. Windows Phone 8 Development for Absolute Beginners em 35 partes Building Apps for Windows Phone 8 Jump Start em 21 partes
Dê uma outra olhada no checklist de iniciação
Saiba o que você pode fazer com o SDK e tenha em mãos um guia para construir grandes aplicativos. Getting started with developing for Windows Phone 8
Fonte: msdn.microsoft.com