Windows Phone Tutorial: Desenvolvimento em Windows Phone

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.

Saiba mais: jQuery Mobile

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. 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.

Atualizaç�es do Sistema

Windows Phone 7.5 � �Mango�: anunciado em fevereiro de 2011, revelou novas funcionalidades como integraç�o ao Twitter, multitarefas, acesso ao SkyDrive e a vers�o m�vel do Internet Explorer 9 com as mesmas capacidades gr�ficas que a vers�o do computador.

Windows Phone � �Tango�.

Windows Phone 8 � �Apollo�: � a nova geraç�o do sistema m�vel, que traz enormes novidades aos smartphones. Como uma nova tela inicial, mais opç�es de hardware, n�cleo compartilhado com o Windows 8, melhorias nos mapas e multitarefa aprimorado.

Vale lembrar que o Windows Phone 8 n�o poder� ser instalado nos atuais dispositivos do Windows Phone 7.5. Os aparelhos receber�o uma atualizaç�o para a vers�o 7.8, porque a vers�o 8.0 recebeu grandes alteraç�es no n�cleo e algumas mudanças anunciadas hoje pela Microsoft n�o s�o aproveitadas pelos hardwares atuais.

Importante

Ao fazer o download do SDK do Windows Phone 8, automaticamente voc� tem dispon�vel o SDK do WP 7 e do 7.5. Todo projeto desenvolvido no WP7 e no WP 7.5 funcionar�o perfeitamente no Windows Phone 8. J� os projetos desenvolvidos para Windows Phone 8 rodar�o somente no mesmo.

Hello World

Veja um exemplo para a introduç�o com o cl�ssico �Ol� Mundo�, em que teremos um bot�o que exibe uma mensagem de �Hello World�.

Ap�s ter tudo instalado, v� em File, New, Project.

Figura 2. Criando novo projeto no Visual Studio

Selecione em Templates dentro do Visual C# a opç�o de Windows Phone. E ent�o na parte direita �Windows Phone App�, crie com o nome de �HelloWorld�.

Figura 3. Selecionando o tipo de aplicaç�o

Ent�o voc� poder� escolher para qual vers�o do Windows Phone voc� deseja desenvolver. Selecione a vers�o 7.1.

Figura 4. Selecionando a vers�o do Windows Phone

Ent�o automaticamente o Visual Studio gera um template para que voc� tenha como base para o desenvolvimento, dois arquivos. Um MainPage.xaml e outro MainPage.xaml.cs:

Figura 5. IDE com projeto iniciado

A p�gina inicial � formada por um arquivo XAML, que � o layout e a classe em C#. Agora no layout adicionaremos um StackPanel, que � um painel que serve para conter nossos objetos, como um bot�o, uma caixa de texto ou uma imagem por exemplo. Ent�o adicione as seguintes linhas ao Grid de Content Panel no arquivo MainPage.xaml:


<StackPanel Width="400" Height="60">
  
</StackPanel>

Listagem 1. C�digo de um StackPanel

Foi definido um tamanho para o StackPanel, de 400x60. N�o precisa se preocupar com tamanhos diferentes de telas do Windows Phone pois os aparelhos possuem um rigoroso padr�o da Microsoft a seguir, impedindo que os desenvolvedores e usu�rios tenham dificuldade ao ter os aplicativos em diferentes dispositivos. Agora adicione um bot�o dentro do Stack Panel:


<StackPanel Width="400" Height="60">
<Button Name="btnOla" Content="Hello World" Tap="btnOla_Tap_1" />
</StackPanel>

Listagem 2. StackPanel com bot�o

Esse bot�o ter� o nome de �btnOla�, para que no c�digo C# possa identific�-lo e com isso manusear os seus respectivos eventos como por exemplo o �Tap�, que seria o click do bot�o. J� �Content� ser� o texto que ficar� dentro do bot�o.

Por fim, a p�gina MainPage.xaml ficar� assim:


<phone:PhoneApplicationPage
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, 
                Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named 
            "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource 
            PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" 
            />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Width="400" Height="60">
                <Button Name="btnOla" Content="Hello World" 
                Tap="btnOla_Tap_1" />
            </StackPanel>
        </Grid>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" 
        VerticalAlignment="Top" Height="800" Width="480" 
        Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" 
        IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>

Listagem 3. C�digo completo da p�gina em XAML

Agora, abra o arquivo MainPage.xaml.cs.

Figura 6. Arquivo MainPage.xaml.cx no Solution Explorer

A classe MainPage.xaml.cs tem gerado para voc� certas linhas de c�digo, como os �using�, a declaraç�o do namespace, da classe e do construtor e outros m�todos prontos comentados para caso deseje utilizar a application bar por exemplo, n�o tenha o trabalho de refazer o c�digo.


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 HelloWorld.Resources;

namespace HelloWorld
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }
        // Sample code for building a localized ApplicationBar
        //private void BuildLocalizedApplicationBar()
        //{
        //    // Set the page's ApplicationBar to a new instance of 
        ApplicationBar.
        //    ApplicationBar = new ApplicationBar();

        //    // Create a new button and set the text value to the 
        localized string from AppResources.
        //    ApplicationBarIconButton appBarButton = 
        new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", 
        UriKind.Relative));
        //    appBarButton.Text = AppResources.AppBarButtonText;
        //    ApplicationBar.Buttons.Add(appBarButton);

        //    // Create a new menu item with the localized string from AppResources.
        //    ApplicationBarMenuItem appBarMenuItem = 
        new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        //    ApplicationBar.MenuItems.Add(appBarMenuItem);
        //}
    }
}

Listagem 4. C�digo C# da p�gina

Para que a mensagem seja exibida com o Tap do bot�o, utilize o m�todo MessageBox.Show do Windows Phone. Adicione as seguintes linhas de c�digo:


private void btnOla_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
MessageBox.Show("Hello World!");
}

Listagem 5. C�digo do evento Tap do bot�o

Agora pressione F5 e teste sua primeira aplicaç�o.

Saiu na DevMedia!

Code Smells - Conheça antes que seja tarde: Voc� j� olhou para um c�digo que parecia errado, mas n�o soube dizer de imediato o porqu�. Pode ser que voc� tenha se deparado com um Code Smell e, acredite, se voc� n�o se livrar dele, esse inc�modo ficar� cada vez pior. Quer saber mais? Assista.
Curso de C#: C# � uma linguagem orientada a objeto com a qual podemos criar aplicaç�es desktop, mobile e web. Para dar in�cio ao seu aprendizado, trabalharemos em uma aplicaç�o pr�tica que ser� constru�da passo a passo, utilizando estruturas b�sicas do C# atrav�s do cen�rio de uma aplicaç�o que pode calcular o signo do usu�rio de acordo com seu dia e m�s de nascimento.
Usando o Git de forma eficaz: Este artigo, al�m de explorar o correto uso do Git � uma das ferramentas mais populares atualmente para controle de vers�o.

Saiba mais sobre PHP ;)

Bate-papo sobre mobile: Neste DevCast temos um bate-papo sobre o desenvolvimento de apps mobile. Falamos aqui sobre quais tecnologias estudar, quando optar por cada uma e o que o mercado espera do desenvolvedor atualmente.
Plataforma Universal do Windows: Neste guia de consulta voc� encontrar� diversos conte�dos sobre a Plataforma Universal do Windows (UWP), com a qual voc� pode programar aplicativos para dispositivos com o Windows 10, como smartphones, tablets, PCs com o Visual Studio e C#.
Guia Cmpleta de Cordova: Neste Guia de Refer�ncia voc� encontrar� o conte�do que precisa para aprender a desenvolver aplicativos mobile multiplataforma utilizando o Cordova.

Introdu��o ao Desenvolvimento em Windows Phone

Veja neste artigo uma breve introdução ao mais recente sistema operacional mobile da Microsoft e o que você precisa para iniciar o desenvolvimento em Windows Phone.