Desenvolvimento para Windows Phone

História

Após muito investimento da Microsoft, finalmente o desenvolvimento para Windows Phone está enchendo os olhos de muitos desenvolvedores. Foi lançado em 21 de outubro de 2010 para concorrer diretamente com os sistemas operacionais móveis que dominam o mundo, Android e IOS.

O Windows Phone, ao contrário do que muitos pensam, não é uma continuação do Windows Mobile. Entrando em completa ruptura com as antigas versões, a Microsoft tem agora o foco diretamente no mercado consumidor, apresentando uma nova interface gráfica.

Figura 1: Aparelho com Windows Phone 8

Tela inicial – Live Tiles

O principal foco da Microsoft no Windows Phone é a personalização do aparelho, o tornando bem pessoal e cada um com sua identidade visual. Por isso, temos os Live Tiles que garantem que o usuário esteja sempre atualizado e conectado com as coisas que mais lhe importam, desde os textos publicados em redes sociais pelos seus melhores amigos ao horário da sua próxima reunião.

Os Live Tiles são blocos dinâmicos que atualizam informações constantemente sobre o que está acontecendo no “seu mundo”.

Recursos

Os recursos e experiências de usuários variam de acordo com o idioma, localidade, operadora, fabricante de hardware, modelo do aparelho e a versão do sistema. Alguns dos recursos do Windows Phone: Exibição e teclado na tela (em diversas línguas), sugestões de textos inteligentes, músicas, vídeos e podcasts, pesquisa direta no Bing, pesquisa local, pesquisa visual e por voz, mapas, controle por voz, conexão com rede e serviços Xbox Live.

Iniciando com Windows Phone

Para iniciar o desenvolvimento para Windows Phone é necessário ter alguma base de conhecimento em C# ou VB, que são as duas possíveis linguagens de desenvolvimento. As ferramentas de desenvolvimento são o Visual Studio 2010 ou 2012, e o SDK do Windows Phone. É possível também usar o Visual Studio Community 2013 que fornece tudo de que você precisa para começar a desenvolver aplicativos e ainda melhor, tudo gratuitamente. O SDK integra ao Visual Studio os templates de Windows Phone, as ferramentas no ToolBox e o Emulador usado para testar, simular e depurar suas aplicações, já que alguns podem se interessar em desenvolver sem ainda possuir um dispositivo real.

Linguagem da interface – XAML

Baseada em XML, a XAML ou Extensible Application Markup Language (pronunciada zammel), é a linguagem criada pela Microsoft e usada para criar interfaces de forma simples e é utilizada em diversos produtos da Microsoft.

Criar o projeto

A primeira etapa na criação de um aplicativo do 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 saber mais, veja Obter o SDK.
2. Inicie o Visual Studio na tela inicial do Windows. Se a janela de Registro aparecer, você pode registrar o produto, ou pode ignorar temporariamente o prompt.
3. Crie um novo projeto selecionando o comando de menu ARQUIVO | Novo | Projeto.
4. Na janela Novo Projeto, expanda os modelos de Visual C# ou Visual Basic instalados e depois expanda Aplicativos da Loja. Selecione os modelos dos Aplicativos do Windows Phone.
5. Na lista de modelos dos Aplicativos do Windows Phone, selecione o modelo Aplicativo em Branco (Windows Phone).
6. Na parte inferior da janela Novo projeto, digite MiniBrowser como o Nome do projeto.
7. Clique em OK. O novo projeto é criado e abre em Visual Studio. Você pode ver os itens a seguir:
   • A janela principal contém o editor de código e exibe App.xaml.cs ou App.xaml.vb. Nesse arquivo de código, você pode definir manipuladores de eventos globais.
   • O painel direito inclui o Gerenciador de Soluções, que lista os arquivos no projeto.
   

No Gerenciador de Soluções, clique duas vezes em MainPage.xaml para abri-lo. Essa página contém a interface do usuário da primeira página de seu aplicativo. A janela principal está dividida em duas partes:

• O painel direito contém a marcação XAML que define a interface do usuário para a página.
• O painel esquerdo contém uma aparência que mostra a saída da marcação XAML.

A página por trás do código associado, MainPage.xaml.cs ou MainPage.xaml.vb, que contém o código para manipular a interação do usuário com a página, não é aberta ou exibida por padrão.

Criar a interface do usuário

A etapa seguinte é para dispor os controles que compõem a interface do usuário do aplicativo usando o designer do Visual Studio. Depois de adicionar os controles, o layout final ficará semelhante à seguinte captura de tela.

Para criar a interface do usuário

1. Abra a Caixa de Ferramentas no Visual Studio, caso ainda não esteja aberta, selecionando o comando de menu EXIBIR | Caixa de Ferramentas. A Caixa de Ferramentas normalmente é aberta no lado esquerdo da janela do Visual Studio e exibe a lista de controles disponíveis para criar a interface do usuário. Por padrão, a Caixa de Ferramentas fica recolhida quando você não a está usando.
2. Adicione um título ao aplicativo.
   1. Do grupo Controles XAML comuns na Caixa de ferramentas, adicione um controle TextBlock à superfície do designer arrastando-o da Caixa de ferramentas e soltando-o na superfície do designer. Coloque o TextBlock na parte superior do espaço disponível. Use o mouse para dimensionar o controle à largura da página.
      
   2. Abra a janela Propriedades no Visual Studio, caso ainda não esteja aberta, selecionando o comando de menuEXIBIR | Janela Propriedades. A janela Propriedades é aberta no canto inferior direito da janela do Visual Studio. Se o TextBlock ainda estiver selecionado, as propriedades do TextBlock serão exibidas na janela Propriedades.
      
   3. Na janela Propriedades, altere as propriedades a seguir para o novo TextBlock.

Propriedade	Categoria	Valor
Texto	Comum	Mini navegador
Altura	Layout	Auto
Largura	Layout	Auto
Alinhamento horizontal	Layout	Ampliar
Tamanho da fonte	Texto	48 px

Com essas configurações, o controle pode dimensionar e posicionar a si próprio corretamente nos modos de retrato e paisagem.

Adicione uma caixa de texto para o URL.

1. Do grupo Controles XAML comuns na Caixa de ferramentas, adicione um controle TextBox à superfície do designer arrastando-o da Caixa de ferramentas e soltando-o na superfície do designer. Coloque o TextBox logo abaixo do texto Mini Browser. Use o mouse para dimensionar o controle à largura aproximada mostrada na imagem de layout acima. Deixe espaço à direita do botão Ir.
2. Na janela Propriedades, altere as propriedades a seguir para a nova caixa de texto.

   Propriedade	Categoria	Valor
   Nome	n/a	URL
   Texto	Comum	http://windows.microsoft.com /
   Altura	Layout	Auto
   Largura	Layout	Auto
   Alinhamento horizontal	Layout	Ampliar
   TextWrapping	Texto	NoWrap

   
   
   Com essas configurações, o controle pode dimensionar e posicionar a si próprio corretamente nos modos de retrato e paisagem.

Adicione o botão Ir.

1. Redimensione a caixa de texto para criar o espaço para o botão Ir. Em seguida, do grupo de Controles XAML comuns na Caixa de Ferramentas, adicione um controle de Botão arrastando e soltando-o. Coloque-o à direita da caixa de texto que acabou de adicionar. Dimensione o botão para encaixá-lo ao espaço disponível.
2. Na janela Propriedades, altere as propriedades a seguir para o novo botão.

   Propriedade	Categoria	Valor
   Nome	n/a	Ir
   Conteúdo	Comum	Ir
   Altura	Layout	Auto
   Largura	Layout	Auto
   Alinhamento horizontal	Layout	Direita

   
   
   Com essas configurações, o controle pode dimensionar e posicionar a si próprio corretamente nos modos de retrato e paisagem.

Adicione o controle WebView.

1. Em seguida, do grupo de Controles XAML comuns na Caixa de Ferramentas, adicione um controle WebView arrastando e soltando-o. Coloque-o abaixo dos controles que você adicionou nas etapas anteriores. Use seu mouse para dimensionar o controle para preencher o espaço restante.
2. Na janela Propriedades, altere as propriedades a seguir para o novo controle WebView.

   Propriedade	Valor
   Nome	Mini navegador
   Altura	Auto
   Largura	Auto
   Alinhamento horizontal	Ampliar
   Alinhamento vertical	Ampliar

   
   

Seu layout agora está concluído!

No código XAML em MainPage.xaml, procure pela grade que contém seus controles. Ela é semelhante ao seguinte. Se deseja um layout exatamente como mostrado na ilustração acima, copie o seguinte XAML e cole-o para substituir a Grade em seu arquivo MainPage.xaml.

XAML

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/>
        <TextBox x:Name="URL" Margin="10,95,124,0" Text="http://windows.microsoft.com/" VerticalAlignment="Top"/>
        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,85,10,0" VerticalAlignment="Top" Width="109"/>
        <WebView x:Name="MiniBrowser" Margin="10,150,10,10"/>
    </Grid>

Adicionar o código

A etapa final antes de testar seu aplicativo é adicionar o código que implementa o botão Ir.

Para adicionar o código

1. No designer, clique duas vezes no controle de botão Ir que você adicionou. Isso cria um manipulador de eventos vazio para o evento Clique do botão. Você verá o manipulador de eventos vazio em uma página de código C# na guiaMainPage.xaml.cs, ou em uma página de código Visual Basic na guia MainPage.xaml.vb.
   C#

   VB

   using System;
   using System.Collections.Generic;
   using System.IO;
   using System.Linq;
   using System.Runtime.InteropServices.WindowsRuntime;
   using Windows.Foundation;
   using Windows.Foundation.Collections;
   using Windows.UI.Xaml;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml.Controls.Primitives;
   using Windows.UI.Xaml.Data;
   using Windows.UI.Xaml.Input;
   using Windows.UI.Xaml.Media;
   using Windows.UI.Xaml.Navigation;
   
   // The Blank Page item template is documented at http://go.microsoft.com/fwlink/p/?LinkID=234238
   
   namespace MiniBrowser
   {
       /// <summary>
       /// An empty page that can be used on its own or navigated to within a Frame.
       /// </summary>
       public sealed partial class MainPage : Page
       {
           public MainPage()
           {
               this.InitializeComponent();
           }
   
           /// <summary>
           /// Invoked when this page is about to be displayed in a Frame.
           /// </summary>
           /// <param name="e">Event data that describes how this page was reached.  The Parameter
           /// property is typically used to configure the page.</param>
           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
           }
   
           private void Go_Click(object sender, RoutedEventArgs e)
           {
   
           }
       }
   }
   
   
   

   Quando você clica duas vezes no botão Ir, o Visual Studio também atualiza o XAML em MainPage.xaml para conectar o evento Clique do botão ao manipulador de eventos Go_Click.
   XAML

   <Button x:Name="Go" Content="Go" ... Click="Go_Click"/>
   
   

2. Em MainPage.xaml.cs ou em MainPage.xaml.vb, adicione as duas linhas de código exibidas abaixo dentro do manipulador de eventos Go_Click vazio. Esse código pega a URL que o usuário insere na caixa de texto e navega para a URL no controle de WebView chamado de MiniBrowser.
   C#

   VB

           private void Go_Click(object sender, RoutedEventArgs e)
           {
               string site = URL.Text;
               MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
           }
   
   
   

Execute o aplicativo

Agora, você terminou seu primeiro aplicativo Windows Phone! Agora você irá compilar e depurar o aplicativo.

Antes de testar o aplicativo, certifique-se que seu computador tem acesso a Internet para poder testar o controle WebView.

Para executar seu aplicativo no emulador

1. Crie a solução ao selecionar o menu de comando BUILD | Build Solution.
   Se um erro ocorrer, eles estarão listado na janela Lista de erros. Você pode abrir a janela Lista de erros se ela não estiver aberta, selecionando o menu de comando VISUALIZAR | Lista de erros. Caso haja erros, revise as etapas acima, corrija os erros e então crie a solução novamente.
2. Na barra de ferramentas Padrão, certifique-se que o alvo de implantação para o aplicativo está definido para um dos valores para o Emulador do Windows Phone, por exemplo,, Emulador 8.1 WVGA 4 polegadas 512MB.
   
3. Execute o aplicativo pressionando F5 ou selecionando o menu de comando DEPURAR | Começar a depurar.
   Isto abre a janela do emulador e inicia o aplicativo. Se for a primeira vez que você está iniciando o emulador, leva vários segundos para o emulador iniciar e abrir seu aplicativo.
4. Para testar seu aplicativo, clique no botão Ir e verifique se o controle WebView carrega o web site especificado.
   
5. Para testar o aplicativo no modo paisagem, pressione um dos controles de rotação na barra de ferramentas do emulador.
   
   O emulador gira para o modo paisagem. O controle redimensiona-se para ajustar ao formato de tela paisagem.
6. Para parar de depurar, você pode selecionar o menu de comando DEPURAR | Parar de depurar no Visual Studio.
   É melhor sair do emulador rodando quando você terminar uma sessão de depuração. A próxima vez que você executar seu aplicativo, este iniciará mais rapidamente, pois o emulador já está sendo executado.

Parabéns! Agora, você completou com êxito seu primeiro aplicativo Windows Phone.

Fonte: https://msdn.microsoft.com/pt-br/library/windows/apps/dn631251.aspx