Criando uma aplicação para Windows Phone

Windows Phone inclui várias ferramentas para ajudar você a criar e publicar aplicações. Esse Guia Rápido descreve as ferramentas de desenvolvimento e como começar a criar sua primeira aplicação para Windows Phone.
Esse Guia Rápido contém as seguintes seções:

Instalando as Ferramentas de Desenvolvimento

Você pode baixar e instalar todas as ferramentas necessárias para criar e publicar suas aplicações para Windows Phone. Na tabela a seguir, escolha a coluna que se aplica a você, e depois clique nos links para instalar as ferramentas:

C# Developer Visual Basic Developer
Se você for um desenvolvedor C#, instale cada um dos programas abaixo:

  1. Windows Phone Developer Tools
  2. Windows Phone Developer Tools January 2011 Update
 Se você for um desenvolvedor VB, precisa ter o Visual Studio 2010 Professional, Premium, ou Ultimate instalado para usar o VB para Windows Phone. O VB para Windows Phone não é suportado no Visual Studio 2010 Express. Se for um desenvolvedor VB, instale os programas abaixo:

  1. Windows Phone Developer Tools
  2. Windows Phone Developer Tools January 2011 Update
  3. Microsoft Visual Basic for Windows Phone Developer Tools – RTW

Criando um novo projeto

Depois de ter instalado as Ferramentas de Desenvolvimento, a maneira mais fácil de criar sua primeira aplicação é usar o Visual Studio.

  1. No menu Iniciar, carregue o Microsoft Visual Studio 2010 Express for Windows Phone.
  2. No menu File, clique em New Project

 

Isso abre a caixa de diálogo New Project. No lado esquerdo da caixa de diálogo estão os diferentes modelos de projeto. Quando você seleciona Silverlight for Windows Phone, a parte central da caixa de diálogo mostra os diferentes tipos de aplicações que você pode criar.

  1. No lado esquerdo, selecion Silverlight for Windows Phone.
  2. Na parte central, selecione Windows Phone Application template.
  3. Em “Name the project” digite HelloWorld_Phone e clique em OK.

Um novo projeto do tipo “Silverlight for Windows Phone” será criado e aberto no designer.

Por padrão, o Visual Studio é divido em três painéis (Dependendo das suas configurações, os painéis que você vê podem parecer diferentes). A esquerda fica a visão do Design, no meio a visão do XAML e a direita o Solution Explorer.
No painel “Solution Explorer” existem vários arquivos do projeto. Os arquivos que você usará nesse Guia são MainPage.xaml e MainPage.xaml.cs. O arquivo MainPage.xaml define a interface com o usuário para a aplicação. O XAML é a linguagem declarativa baseada em XML usada para criar os elementos da interface. Se você expandir o arquivo MainPage.xaml, verá um arquivo de código C# chamado MainPage.xaml.cs. Esse arquivo de código é associado ao arquivo XAML através de uma classe parcial e contém a lógica do arquivo  XAML. A separação entre a interface e o código permite que você crie elementos da interface visíveis na marcação XAML e depois use um arquivo de código separado para responder a eventos e manipular os objetos declarados no arquivo XAML. Essa separação torna fácil para designers e desenvolvedores trabalharem de forma conjunta no mesmo projeto.

Adicionando um Bloco de Texto

Em seguida adicionaremos um TextBlock simples que exibe a mensagem “Hello, World!”. Existem várias formas de adicionar elementos, mas essa seção usará a visão de Design e a Caixa de ferramentas.

  1. Se o arquivo MainPage.xaml bão estiver aberto, dê um clique duplo sobre ele no painel “Solution Explorer”.
  2. No menu View, clique em Other Windows, e depois em Toolbox. A janela Toolbox aparecerá.
  3. Redimensione a Caixa de ferramentas de modo que você possa ver ela junto com o telefone da visão de Design.

  1. Na Caixa de ferramentas, arraste um TextBlock para o painel principal do telefone.

Na visão do XAML, observe que um elemento TextBlock foi adicionado no painel de conteúdo Grid.

XAML

<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”12,6,0,0″
Name=”textBlock1″ Text=”TextBlock” VerticalAlignment=”Top” />
</Grid>
  1. No menu View, clique em Other Windows, e depois clique em Properties Window. A janela Properties aparecerá.

  1. Na visão de Design, certifique-se que o TextBlock está selecionado.
  2. Na janela Properties, ajuste a propriedade Text para Hello, World!.
  3. Ajuste a propriedade FontSize para 50.
  4. Ajuste a propriedade Height para 70.

A visão do Design é atualizada e deve mostrar a seguinte tela:

Rodando a sua primeira aplicação

Agora que você criou a sua primeira aplicação para Windows Phone, você precisa roda-lo. Você usará o simulador Windows Phone embutido, que mimetiza um dispositivo Windows Phone. Usando o simulador, você pode testar e depurar sua aplicação rapidamente no seu computador sem ter que carregar a aplicação em um dispositivo.
Para iniciar o simulador, você simplesmente precisa iniciar uma sessão de depuração para a aplicação. O Visual Studio carregará o simulador e a aplicação.

  1. Para iniciar a aplicação em modo de depuração. pressione F5 ou selecione Debug->Start Debugging.

Se houverem erros de compilação em sua aplicação, o Visual Studio irá exibir as informações sobre os erros. Depois de alguns momentos, uma janela do simulador, como na imagem abaixo, deve aparecer.

Leva alguns momentos para abrir o simulador e iniciar o depurador pela primeira vez. Para acelerar as sessões seguintes, não feche a janela do simulador. Ao invés disso, selecione Debug->Stop Debugging para parar o depurador. Isso irá deixar o simulador em execução, de forma que a próxima sessão irá carregar mais rapidamente.

  1. Para parar o depurador, selecione Debug->Stop Debugging.

Rodando sua aplicação em um telefone

Para rodar a sua aplicação em um telefone, precisa desbloquear o dispositivo usando a ferramenta “Windows Phone Developer Registration”. Essa ferramenta está localizada no menu Iniciar, sob o item “Windows Phone Developer Tools”. Além disso, você precisa ter uma conta paga no AppHub.

  1. Se ainda não tem uma conta no AppHub, registre-se no AppHub, o portal oficial de desenvolvedores do Windows Phone.
  2. Inicie o software Zune do seu computador.
  3. Conecte o telefone ao seu computador.
  4. Carregue a ferramenta “Windows Phone Developer Registration”, e depois informe as credenciais do Windows Live ID associadas com sua conta AppHub.
  5. No assistente de registro, informe as informações de identificação do seu telefone. Seu telefone está desbloquado e pronto para receber aplicações em desenvolvimento no Visual Studio.
  6. No Visual Studio, carregar a aplicação no telefone é tão simples quanto selecionar “Windows Phone Device” (ao invés do simulador) como alvo de carregamento.
  7. Depois de selecionar Windows Phone Device no menu de opções, pode carregar o dispositivo desbloqueado pelo uso do mesmo processo e técnicas de depuração usadas no simulador.
Nota
Para o sucesso do carregamento da aplicação, o telefone precisa estar conectado ao computador com sua tela desbloqueada, e o software Zune precisa estar sendo executado.

Adicionando gráficos

No Silberlight, você pode adicionar gráficos pelo uso das classes Shape. Pode criar formas simples, como Rectangles, ou formas mais complexas, como Polygons. Brushes são usados para colorir ou pintar objetos no Silverlight.
Você começará adicionando um StackPanel em torno do TextBlock. Um Panel é um contêiner que é usado para agrupar elementos da interface. Cada aplicação deve ter ao menos um Panel. Um StackPanel deixa cada elemento um depois do outro, seja verticalmente ou horizontalmente, dependendo da Orientation. Os painéis Grid e Canvas permitem um posicionamento mais exato dos elementos.
A forma que você criará é uma Ellipse. A Ellipse irá aparecer depois do TextBlock no StackPanel. Você especificará a Height (altura) e a Width (largura) de Ellipse assim como Fill (preenchimento). Para o preenchimento, você deve especificar um Brush (pincel) para pintar a elipse.
Ao invés de usar a visão do Design, dessa vez trabalharemos na visão do XAML.

  1. Feche a janela da Caixa de ferramentas.
  2. Na visão do XAML, localize o TextBlock que você adicionou.
  3. Substitua o elemento TextBlock pelo seguinte código XAML.

XAML

<StackPanel>
<TextBlock FontSize=”50″ Text=”Hello, World!” />
<Ellipse Fill=”Blue” Height=”150″ Width=”300″
Name=”FirstEllipse” />
</StackPanel>

  1. Pressione F5 para rodar a aplicação.

A imagem a seguir do simulador mostra a aplicação até agora. Não existe nenhuma interação com o usuário ainda, de forma que quase nada acontece, mas adicionaremos alguns controles a seguir.

  1. Para parar a depuração, selecione Debug->Stop Debugging.

Adicionar um botão

A próxima coisa que você adicionará a sua aplicação é um botão Control. Controls são uma das formas que os usuários tem de interagir com aplicações Silverlight. O Silverlight possui uma biblioteca rica de controles que incluem Button, TextBox, ListBox, e muito mais.
Existem duas partes para adicionar um Button. A primeira parte é adicionar o elemento Button ao XAML. A segunda parte é adicionar alguma lógica para manipular evento gerados pela interação do usuário, como o clique no botão.

  1. Na visão do XAML, adicione o seguinte código depois da tag <Ellipse />.

XAML

<Button Height=”150″
Width=”300″
Name=”FirstButton”
Content=”Tap” />

No atribute Name, dê o nome “FirstButton” ao botão, de forma que você possa acessa-lo a partir do código. O atributo Content específica a texto que aparece no botão. Os atributos Height and Width especificam a altura e largura do botão.
O Silverlight é um modelo direcionado a eventos. Quando certas coisas acontecem em sua aplicação, como quando um usuário clica em botão ou a aplicação é carregada, um evento é disparado. Você pode adicionar código, chamado de manipulador de eventos, que faz algo quando o evento ocorre. Você adicionará um manipulador de evento para o evento Click do botão.
O Visual Studio pode criar o manipulador do evento para você.

  1. Na visão de Design, selecione o Button.
  2. Na janela Properties, clique na aba Events. Uma lista de eventos para Button aparece.

  1. Dẽ um clique duple sobre o evento Click.

O arquivo de código MainPage.xaml.cs é aberto e você deve ver o manipulador de evento FirstButton_Click.

  1. Dentro das chaves, adicione o código abaixo.

C#

private void FirstButton_Click(object sender, RoutedEventArgs e)
{
if (FirstButton.Content as string == “Tap”)
{
FirstButton.Content = “Tap Again”;
}
else
{
FirstButton.Content = “Tap”;
}
}

Visual Basic

Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If (CType(FirstButton.Content,String) = “Tap”) Then
FirstButton.Content = “Tap Again”
Else
FirstButton.Content = “Tap”
End If
End Sub

O manipulador de evento FirstButton_Click executa a segunte ação: Quando o botão é clicado, o texto que é exibido no botão é alternado entre “Tap” e “Tap Again”.

  1. Pressione F5 para rodar a aplicação.

No arquivo XAML de Button, observe que um atributo Click  foi adicionado.

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>

Adicionando uma animação

A última coisa que iremos adicionar a aplicação é uma animação. Você criará uma animação muito simples que espreme a elipse e depois expande-a de volta, mas podem ser feitas muitas outras animações. Essa seção apenas introduz o assunto, de forma que não é importante entender todos os detalhes. Para mais detalhes sobre o assunto, veja o artigo Animation Overview na MSDN.
Para criar a animação desejada, você precisa de três coisas: um StoryBoard, criar a animação e depois adicionar código para iniciar a animação.
Um StoryBoard é um contêiner que é usado para agrupar as animações. A partir dele, as animações podem ser iniciadas ou interrompidas.
As animações no Silverlight acontecem pela alteração do valor de uma propriedade em relação ao tempo. A propriedade StoryBoard.TargetName especifica o objeto sobre o qual a animação será aplicada. Storyboard.TargetProperty especifica a propriedade do objeto que será animada. A propriedade To especifica o valor a animar. A propriedade AutoReverse especifica se a animação deve ser repetida quando for finalizada, voltando para a posição inicial. A propriedade Duration  especifica a duração da animação. Por exemplo, se quiser que a animação dure um segundo, deve ajustar a duração para “00:00:01” (zero horas:zero minutos:um segundo).

  1. No painel “Solution Explorer”, dê um clique duplo no arquivo MainPage.xaml.
  2. Na visão do XAML, substitua o StackPanel existente pelo seguinte código 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>

Esse código XAML cria uma seção StackPanel.Resource que contém um elementos StoryBoard. O StoryBoard é nomeado FirstStoryBoard para que possamos usa-lo no código. A animação muda a propriedade Width de Ellipse, que é do tipo Double, assim usamos DoubleAnimation.

 
Agora você precisa iniciar a animação. Para iniciar a animação, você deve chamar o método Begin de StoryBoard.

  1. No arquivo MainPage.xaml.cs, adicione a seguinte chamada ao método Begin para iniciar a animação FirstStoryBoard quando o botão FirstButton for clicado.

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();
}

Visual Basic

Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If (CType(FirstButton.Content,String) = “Tap”) Then
FirstButton.Content = “Tap Again”
Else
FirstButton.Content = “Tap”
End If
FirstStoryBoard.Begin
End Sub
  1. Pressione F5  para rodar a aplicação.

Veja também

Traduzido de