Forums » C e C++

Como criar seu primeiro APP para Windows Phone

  • Oliveira Dario
    • 436 posts
    29 de outubro de 2015 14:21:10 ART

    Como criar seu primeiro APP para Windows Phone

     

    App-for-wp-0
    Aplica-se a:
     Windows Phone 8 | Windows Phone OS 7.1

    O exemplo é simples e prático, vou dar uma ajudinha a vocês que querem desenvolver nessa plataforma incrível que é o Windows Phone.

    Nosso primeiro APP será um mini browser, escolhi o browser pois acho que seria mais fácil para começar entender o XAML.

     

    Parte 1 – Criar o projeto

    O primeiro passo na criação de um aplicativo 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 informações, consulte Obter o SDK .

    2 – Inicie o Visual Studio a partir da tela Iniciar do Windows. Se a janela de registro é exibido, você pode registrar o produto, ou você pode temporariamente ignorar a solicitação.

    3 – Criar um novo projeto, selecionando o File| New Project comando de menu. O New Project é exibido.

    4 – Expanda os instalados do Visual C #, e selecione os Windows Phone.

    5 – Na lista de modelos do Visual C #, no Windows Phone, selecione o modelo Windows App Telefone .

    6 – Na parte inferior do New Project Windows, digite Mini Browser como o Project Name.

    App-for-wp-1

    7 – Clique em OK na caixa de diálogo de seleção que sera exibida.

    8 – Selecione a versão do Windows phone que você deseja desenvolver.

    App-for-wp-2

    Se você selecionar o Windows Phone OS 8.0 como a versão de destino, o aplicativo só pode ser executado em Windows Phone 8. Se você selecionar o Windows Phone OS 7.1 , seu aplicativo pode funcionar no Windows Phone OS 7.1 e Windows Phone 8.

    9 – Clique em OK . O novo projeto é criado e o designer será exibido na  MainPage.xaml , que contém a interface do usuário para seu aplicativo.

    App-for-wp-3

    Parte 2 – Criando a Interface do usuário

    O próximo passo é estabelecer os controles que compõem a interface do usuário do aplicativo usando o designer Visual Studio. Depois de adicionar os controles, o layout final será semelhante à imagem seguinte.

    App-for-wp-4

    Para criar a interface de usuário
    1 – Abra o Properties janela no Visual Studio, se ainda não estiver aberto, selecionando o VIEW | Properties comando de menu. O Properties Windows se abre no canto inferior direito da janela do Visual Studio.
     
    2 – No design do Visual Studio, clique para selecionar o MY APPLICATION TextBlock controls. As propriedades do controle são exibidos no Properties windows.
     
    App-for-wp-00

    3 – Na propriedade Text, escolha o nome para sua primeira aplicação para renomear o título da janela do aplicativo. As propriedades são agrupados por categoria, no Propriedades janela, você pode encontrar text . 

    4 – no designer, clique para selecionar o nome da página TextBlock control.

    5 – Altere a propriedade Text para Mini Browser para renomear a página principal do aplicativo.

    6 – Na janela de código XAML, clique na primeira linha do código XAML. As propriedades doPhoneApplicationPage são exibidos nas Propriedades da janela.

    7 – Alterar o SupportedOrientations propriedade para PortraitOrLandscape para adicionar suporte para modos retrato e paisagem. Se as propriedades são agrupados por categoria, nas Propriedades da janela, você pode encontrar SupportedOrientations no Common category.

    8 – Abra a caixa de ferramentas do Visual Studio, se ainda não estiver aberto, selecionando oVIEW | Toolbox no menu command.

    9 – para o Windows Phone Common Controls na caixa de ferramentas, adicione um TextBox  e arrastando-o da caixa de ferramentas e solte-o para a superfície designer. Coloque o TextBoxlogo abaixo do Mini Browser texto. Use o mouse para o tamanho do controle para a largura aproximada mostrado na imagem layout acima. Deixe espaço na direita para o Botão Go.

    10 – Nas Propriedades da janela, defina as seguintes propriedades para a nova caixa de texto.

    Nome:  URL

    Text: http://www.xbox.com

    Heights: automático

    Wirth: Automático

    HorizontalAlignment: Stretch

    VerticalAlignment: Top

    Com essas configurações, o controle pode dimensionar e posicionar-se corretamente em ambos os modos retrato e paisagem.

    11 – Adicione um botão logo ao lado do TextBox com a propriedade name = Go, Content = Go , Height = auto, Width = Auto, HorizontalAlignment = Right, VerticalAlignment = top

    12 – Adicionar um WebBrowser controle para o seu aplicativo, arrastando e soltando-o. Coloque-o abaixo dos dois controles adicionados nas etapas anteriores. Use o mouse para o tamanho do controle para preencher o espaço restante.

    13 – Nas Propriedades da janela, defina as seguintes propriedades para o novo WebBrowsercontrole

    App-for-wp-5

    Com essas configurações, o controle pode dimensionar e posicionar-se corretamente em ambos os modos retrato e paisagem.

    14 – Para que seu Layout fique igual ao do exemplo anterior, copie o seguinte XAML e cole para substituir o layout de sua MainPage.

    XAML

        http://www.xbox.com 
    VerticalAlignment="Top"/>
    HorizontalAlignment="Right"/>

    Parte 3 – Adicione o código

    O último passo antes de testar sua aplicação é adicionar o código que implementa o Go botão.

    Para adicionar o Código

    1 – No designer, clique duas vezes no Go controle de botão que você adicionou para criar um manipulador de eventos vazio para o botão Click evento. Você vai ver o manipulador de eventos vazio em uma página de código C # no MainPage.xaml.cs guia semelhante ao seguinte.

    C #

    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.Shell;
    using MiniBrowser.Resources;
    
    namespace MiniBrowser
    {
        público  parcial  classe MainPage: PhoneApplicationPage
        {
            / / Construtor 
            público MainPage ()
            {
                InitializeComponent ();
            }
    
            privado  vazio Go_Click ( objeto remetente, RoutedEventArgs e)
            {
    
            }
        }
    }
    

    Quando você clicar duas vezes no Go botão, o Visual Studio também atualiza o XAML emMainPage.xaml para ligar o botão Click evento para o Go_Click manipulador de eventos.

    1. XAML

          http://www.xbox.com 
      VerticalAlignment="Top" />
      HorizontalAlignment="Right" Click="Go_Click"/>
    2. Em MainPage.xaml.cs , adicione as seguintes linhas de código para o Go_Click manipulador de eventos.Esse código usa a URL que o usuário digita na caixa de texto e navega para essa URL no MiniBrowsercontrole.

      C #

      privado  vazio Go_Click ( objeto remetente, RoutedEventArgs e)
      {
          corda site = URL.Text;
          MiniBrowser.Navigate ( novo Uri (site, UriKind.Absolute));
      }
      

     

    Parte 4 – Adicione o código

    Agora que você terminou o seu primeiro aplicativo para Windows Phone! Em seguida, você vai  executar e depurar o aplicativo.

    Antes de testar o aplicativo, verifique se o seu computador tem acesso à Internet para poder testar o controlo do browser.

    Para executar o aplicativo
    1. Construindo a solução, selecionando a BUILD | Create Solution no Menu.

      Se ocorrer algum erro, eles estão listados na janela de erros. Você pode abrir a lista de erros. Se houver erros, reveja os passos acima, corrija os eventuais erros e em seguida,Create Solution novamente.

    2. Na barra de ferramentas Padrão, certifique-se o destino de implementação do aplicativo é definido como um dos valores para o emulador de Windows Phone, por exemplo,emulador WVGA .

      App-for-wp-6

    3. Execute o aplicativo pressionando F5 ou selecionando o Debug | Start Debugging comando de menu.Isso abre a janela do emulador e lança o aplicativo. Se esta é a primeira vez que você iniciar o emulador, isso pode levar alguns segundos para que comece e lançar o seu aplicativo.

    4. Para testar seu aplicativo em execução, clique na Go botão e verificar que o navegador vai para o site especificado.
      App-for-wp-7

      Parabéns! Você completou com sucesso seu primeiro aplicativo 
      para Windows Phone.

      Espero que tenham gostado qualquer dúvida postem baixo galera.