Como parte da nossa série de tutoriais do Windows Phone, agora aprenderemos a criar os elementos da interface do usuário para o HelloPhone aplicação. A aplicação é muito simples. Quando concluída, a interface do usuário do aplicativo conterá uma legenda, uma caixa de texto e um botão.
Para usar o aplicativo, você insere algum texto na caixa de texto e, quando clica no botão, o aplicativo exibe um banner com o texto que você digitou. Será algo parecido com a figura a seguir.
1. Em Gerenciador de Soluções, Duplo click MainPage.xaml para abrir este arquivo no designer.
O designer fornece duas visualizações separadas para editar arquivos XAML, desenhar e XAML Visão. No modo Design, você tem um design de emulador onde pode arrastar e soltar controles da caixa de ferramentas, bem como selecionar, redimensionar, mover e definir propriedades para controles existentes. No modo XAML, você tem um editor de marcação que permite editar o código XAML na página. Você pode trabalhar com qualquer um dos modos. Você também tem um modo de divisão, com a janela do editor mostrando ambas as visualizações simultaneamente.
2. Nesta tarefa, estamos nos concentrando principalmente na edição manual do XAML. Uma vez que a parte de codificação é feita, você pode voltar para a visão de designer para ver os resultados. Você também pode ter uma exibição XAML em tela cheia.
3. Na marcação XAML gerada pelo modelo de aplicativo padrão do Windows Phone, localize o Grade elemento de contêiner chamado LayoutRoot. Sua finalidade é organizar os elementos na página. Dentro do seu RowDefinition propriedade, insira uma linha adicional entre as duas linhas existentes e defina o valor de Altura propriedade para Auto. Essa linha em breve incluirá uma caixa de texto e um botão.
4. Raiz Grade elemento também contém alguns elementos aninhados com cada um atribuído a uma linha diferente da grade externa definindo um Grid.Row propriedade. Agora localize o elemento Grid chamado TitleGrid e Defina a propriedade de texto do primeiro elemento de bloco de texto dentro da grade interna para” Windows Phone 7 Series”. similarmente Oi telefone é adicionado ao próximo bloco de texto.
5. Agora, encontre o Grade elemento chamado ContentGrid, atribui-lo a linha 1, que geralmente está vazio inicialmente, e cole a seguinte marcação XAML dentro desse elemento.
6. Para concluir o design da página, adicione uma terceira linha para conter o banner com a mensagem inserida pelo usuário. Para criar essa linha, insira a seguinte marcação XAML imediatamente antes da marca final da grade externa.
7. Clique no desenhar visualizar e examinar o layout dos controles na página.
Em nosso próximo tutorial, vamos aprender como “Lidar com eventos da interface do usuário”.
