Ir para conteúdo

Featured Replies

Postado
  • Este é um post popular.

Este tutorial irá exemplificar a criação de um Hello World para Windows Phone através de simples passos e oferecendo uma visão geral sobre os principais pontos necessários para criação de futuros Apps.

Desde já deixo claro que não sou um especialista nesta área de desenvolvimento e venho apresentar o conteúdo que ainda estou a aprimorar.

 

 

  • Por que Windows Phone?
    É notável que sim, a Microsoft chegou atrasada no campo dos smartphones, tendo que fazer o seu melhor para superar grandes concorrentes que dominaram o mercado mundial em hardware e software de smartphones. Porém, é notável também a grande batalha por inovação da Microsoft nos últimos anos. Para se ter noção, o WP foi lançado ao final de 2010, enquanto o Android já havia 2 anos de estrada (lançado em 2008) e o IOS, 3 (lançado em 2007).

    Sobretudo, ao início do 5º ano de evolução do Windows Phone, o que se destaca a favor da Microsoft é o inigualável nivelamento de experiência de usuário. De aparelhos de entrada aos topo de linha, tudo se mantém fluido no Windows Phone ao contrário da obsolência programada dos concorrentes, a Microsoft tenta levar a mesma experiência para todos os aparelhos em condições de rodar o S.O.

    Fora os aspectos de usabilidade, existe uma espetacular diferencial para os desenvolvedores. O Visual Studio juntamente com a bem formada plataforma .NET .  Todos aqueles que já utilizaram o Visual Studio em projetos comerciais conseguem entender o diferencial em programar numa IDE altamente competente junto com uma plataforma completa, elevando o grau de produtividade de forma a ter poucos comparativos a serem mencionados.
     
  • Ambiente de Desenvolvimento / Linguagem
    Utilizo em meu computador o Visual Studio 2013 Ultimate Update 3, porém outras versões mais recentes do VS (como o VS Community) também poderão oferecer os mesmos ou similares recursos como templates de projetos etc...

    Utilizarei a linguagem C#
     
  • Criando seu Projeto
    Inicie um novo projeto do Windows Phone através da tela inicial do VS a partir do menu: File > New > Project...​ 

    IzN6PKF.png?1

    Selecione então no sub-menu da linguagem escolhida (Visual C#) Store Apps > Windows Phone Apps e então o template Blank App
    Nomei-o como "HelloWP" e clique em OK para criação do projeto.



    A estrutura inicial do projeto conterá a pasta Assets com materiais visuais para serem utilizados no projeto.
    O arquivo App.xaml qual é o ponto de partida de seu App, ele é chamado ao inicializar o aplicativo e continua ativo ao chamar outras páginas.
    O arquivo MainPage.xaml que corresponde a página principal do App, e sobre a qual trabalharemos.

    MGvBAeJ.png


    Note que todas as páginas presentes no projeto contém um arquivo .cs  qual, assim como utilizado nos Windows Forms, será o responsável pelo código C# da página.

    Os arquivos .xaml são responsáveis por toda a formatação visual da página, nos quais poderemos inserir conteúdo baseado em tags similar a uma formatação XML convencional ou HTML.


     
  • Inserindo os Controles
    Caso tenha utilizado do Visual Studio para desenvolvimento desktop (Windows Forms) esta etapa será bastante similar.

    Com a página MainPage.xml aberta, utilize a Toolbox à esquerda para selecionar o item TextBlock, e então inseri-lo (clicando duas vezes ou clicando e arrastando o mouse sobre a página após a seleção do item).

    6SZZU1Y.png



    Na janela de Properties (à direita), com o componente TextBlock selecionado, insira o nome para ele, qual daremos TxtMensagem.
    Aproveitaremos também para aumentar esta fonte, ao expandir a lista Text (na janela Properties) e setar seu valor para 48px

    fFayRZW.png



    Abaixo do TextBlock iremos inserir um Button, selecionando-o a partir da ToolBox e inserindo-o assim como o TextBlock

    hE2OaRC.png

    Utilizaremos novamente a janela Properties para modificar o texto mostrado no button.Com o button ainda selecionado, alteraremos a propriedade Content , na lista Common. Insira o valor "Iniciar"

    qyDmvBo.png


     
  • Adicionando Eventos

    Adicionaremos o evento de click ao button. Para tal, com o button selecionado, clique no ícone de raio na janela Properties, e então clique 2x na caixa de texto do item Click

    X2b8gVW.png




    Isto irá criar um novo evento no arquivo MainPage.xaml.cs , qual responderá pelos cliques no botão recém-criado.
    Dentro do evento do clique, iremos alterar a propriedade Text do nosso TextBlock (TxtMensagem), para tal utilizaremos do código:

    iVUP5k9.png

     
  • XAML (Opcional Porém Útil)
    Peço que volte ao arquivo MainPage.xaml, nele verifique o conteúdo do XAML gerado por nossas ações:

    <Page
        x:Class="HelloWP.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWP"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <Grid>
            <TextBlock x:Name="TxtMensagem" HorizontalAlignment="Left" Height="144" Margin="96,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="228" FontSize="48"/>
            <Button Content="Iniciar" HorizontalAlignment="Left" Height="70" Margin="124,300,0,0" VerticalAlignment="Top" Width="158" Click="Button_Click"/>
        </Grid>
    </Page>
    
    
    - Grid: responsável por agrupar componentes, não sendo possível adicionar componentes na página fora de um grid.
    - TextBlock: componente inserido através do design. Perceba que ele tem propriedades definidas (quais definimos pelo design) como Text, Name, Width
    - Button: componente inserido através do design. Perceba que como não inserimos um nome ele não tem o atributo Name, porém tem o atributo Click, qual indica qual método chamar do arquivo .cs correspondente.

     
  • Rodando Seu App
    Finalizado o desenvolvimento, você poderá executar seu app através de um emulador Windows Phone (qual já deverá vir configurado com seu Visual Studio).  Para tal simplesmente aperte F5 ou clique sobre o botão de Iniciar Debug no menu superior.

    Espere o emulador carregar, e seu aplicativo será iniciado logo em seguida.

    aHWdjha.png


    xFjnAgy.png


     

Editado por Flamer (veja o histórico de edições)

  • Respostas 6
  • Visualizações 1.3k
  • Created
  • Última resposta

Top Posters In This Topic

Postado
  • Autor

Obrigado. Serve como uma pequena introdução a quem deseja criar apps para Windows Phone, além de mostrar semelhança com o desenvolvimento Desktop para quem já assim desenvolve.

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Estatísticas dos Fóruns

  • Tópicos 96.9k
  • Posts 519.7k

Informação Importante

Confirmação de Termo