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
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
Para criar o projeto
- Certifique-se de ter baixado e instalado o Windows Phone SDK. Para mais detalhes, veja o artigo Get the SDK.
- 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.
- Crie um novo projeto selecionando o menu FILE | New Project.
- Na janela New Project, expanda os templates Visual C# ou Visual Basic, e selecione os templates do Windows Phone.
- Na lista de templates do Windows Phone, selecione o template Windows Phone App.
- Na parte de baixo da janela New Project, digite MiniBrowser como nome do projeto.
- 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.
- 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.
Crie a interface com o usuário

Para criar a interface
- 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.
- Altere o título do aplicativo.
- No designer do Visual Studio, clique para selecionar o controle TextBlock MY APPLICATION. As propriedades do controles serão exibidas na janela Properties.
- 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.
- No designer do Visual Studio, clique para selecionar o controle TextBlock MY APPLICATION. As propriedades do controles serão exibidas na janela Properties.
- Altere o nome da página.
- Altere as orientações suportadas.
- Na janela de código XAML, clique na primeira linha do código XAML. As propriedades de PhoneApplicationPage serão mostradas na janela Properties.
- 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.
- 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.
- Adicione um caixa de texto para a URL.
- 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.
- 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.
- Adicione o botão Go.
- 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.
- 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.
- Adicione o controle WebBrowser.
- 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.
- 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
Para adicionar o código
- 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"/>
- 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
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
- 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.
- 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.
- 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:
- Para testar o aplicativo em execução, clicque no botão Go e verifique que o browser vai para o web site especificado.
- Para testar o aplicativo em modo paisagem, pressione um dos controles de rotação da barra de ferramentas:
Ou
O simulador será rotacionado para o modo paisagem. Os controles são redimensionados para caber no novo formato de tela.
- 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.