Dando continuidade à nossa série de desenvolvimento para Windows Phone, vamos implementar uma aplicação simples mas que abordará novos conceitos de desenvolvimento para Windows Phone. Nesse artigo serei mais direto ao me referir aos templates e ações da IDE, uma vez que estas informações já foram abordadas no artigo anterior.
Você pode acompanhar o artigo anterior no link: //www.devmedia.com.br/rumo-ao-desenvolvimento-mobile-iniciacao-com-windows-phone/24225
Começaremos criando um novo projeto, usando o template Visual C#, opção Silverlight for Windows Phone e no painel central selecionar a opção Windows Phone Aplication. Daremos o nome ao projeto de “usandoBotoes” , escolheremos o Windows Phone OS 7.1 e OK, o projeto está criado.
Mudaremos o título da nossa aplicação, então no lugar de “MY APLICATION”, podemos colocar “Novos Conceitos”, no segundo título “page name” vamos mudar para “UTILIZANDO BOTÕES”.
Percebe-se que, após substituirmos o nome “page name” para “UTILIZANDO BOTÕES”, a descrição ultrapassou os limites da tela, o que no Window Phone é comum, porque pode indicar que temos mais opção à frente, bastando apenas navegar naquela página, mas este não é o nosso caso, temos que alterar o tamanho da fonte.
Para fazer isso temos duas formas, através do código xaml ou através das propriedades edste objeto; para fazer isso através do código clique com o botão direito do mouse no objeto e escolha a opção “View XAML”, o cursor será posicionado no painel central no código referente ao objeto selecionado e basta encontrar a propriedade FontSize e alterar o valor dela para 56; a outra opção é através das propriedades do objeto que pode ser acessada clicando com o botão direito do mouse em cima do objeto e escolhendo a ultima opção que é “Properties”, no painel da direita procurar pela propriedade FonteSize e alterar para 56.
Listagem 1: A propriedade “FonteSize” está no final da declaração do objeto TextBlock
Vamos então adicionar dois objetos à nossa pequena aplicação, do lado esquerdo no template do telefone, selecionar o retângulo logo abaixo do TextBox “Utilizando botões”, mais à esquerda nas abas laterais, selecionar a opção “Toolbox”, aparecerá um menu, escolher a opção “TextBox” e dar um duplo click nesta opção, depois escolher a opção “Button” e dar um duplo click; dê um click no template e poderemos observar que os dois objetos já estão inseridos no template.
O TextBlock está com um tamanho inadequado para a nossa aplicação, para alterar o tamanho dele pode-se simplesmente selecionar o objeto, clicar no canto inferior direito e arrastar até chegar ao tamanho desejado ou acessar o código do painel central referente ao objeto e alterar a propriedade “Height” para 70 e ao final das propriedades do objeto alterar a propriedade “Width” 440, caso esta propriedade não seja encontrada, basta acrescetá-la ao final das propriedade antes do símbolo “/>”, que significa o fechamento da tag.
Listagem 2: mudando o tamanho e a altura do objeto.
Podemos observar que é possível acrescentar e alterar objetos através do código do painel central, então, vamos inserir mais dois objetos através do código, um botão e mais um TextBox. No código do painel central, selecionar todo o código do objeto Button, copiar e colar o código logo abaixo do objeto, nisso vai ser mostrado uma linha ondulada de cor azul em baixo do código que foi colada, isso porque estamos criando um objeto com o mesmo nome de um objeto existente, é um alerta da ferramenta para evitar erro; para mudar o nome do objeto encontrem a propriedade “Name” do objeto e mude para Button2, pronto está mudado o nome e a linha azul vai desaparecer; visualmente não veremos diferença alguma, pois as propriedades de posicionamento do objeto criado estão idênticas às propriedades do objeto copiado, para altera o posicionamento usaremos a propriedade “Margin”, que tem quatro parâmetros que são: margem esquerda, superior, direita e inferior, as duas ultimas são dispensadas quando usamos as propriedades “Height” altura e “Width” largura, no nosso caso vamos alterar os parâmetros para “290, 92,0,0”; pronto, podemos ver que o objeto mudou o posicionamento. Temos agora que copiar mais um objeto, o TextBox, siga os mesmo passos usados para copiar o objeto “Button” no objeto “TextBox”, marcar, copiar e colar o código abaixo do Button2, alterar o nome do objeto (propriedade Name) para TextBox2, alterar também o posicionamento do objeto usando a propriedade de mesmo nome “Margin” para “10,172,0,0”
Temos quatro objetos e vamos fazer mais algumas alterações, vamos acrescentar a propriedade FontSize nos objetos TextBox logo após a propriedade Width, com o valor 25 (FontSize="25"), para alterar o tamanho da fonte, vamos retirar o conteúdo da propriedade Text (Text="") tornando a propriedade sem texto, alteraremos também a descrição dos botões, o primeiro alteraremos para “Abaixo” através da propriedade “Content” (Content="Abaixo"), o segundo alteraremos para “Acima” (Content="Abaixo").
Listagem 3: Mostra as alteração realizadas nos objetos
A nossa aplicação vai transferir o conteúdo do TextBox que está em cima e passar este conteúdo para o TextBox de baixo limpando o conteúdo de cima, clicando no botão “Abaixo” e fará o inverso clicando no botão “Acima”, com a condição de que se o TextBox estiver vazio o a aplicação não vai executar a transferência.
Então vamos implementar o código que fará a aplicação funcionar, dê um duplo click no botão “Abaixo”, vai aparecer o código da aplicação onde temos a classe principal “MainPage” o construtor da classe que vai fazer todas as inicializações padrão e o método click do botão “Acima”. Este método ficará da como o código abaixo, onde this significa “objeto principal”, então a tradução seria, no objeto principal, objeto TextBox1, propriedade texto é diferente de vazio então faça a transferência.
Listagem 4: Clique do Botão 1
private void button1_Click(object sender, RoutedEventArgs e)
{
if (this.textBox1.Text != "")
{
this.textBox2.Text = this.textBox1.Text;
this.textBox1.Text = "";
}
}
Listagem 5 : Clique do Botão 2
private void button2_Click(object sender, RoutedEventArgs e)
{
if (this.textBox2.Text != "")
{
this.textBox1.Text = this.textBox2.Text;
this.textBox2.Text = "";
}
}
Agora é só executar a aplicação no emulador.
É uma aplicação simples, mas creio que para aqueles que estão iniciando puderam aprender sobre algumas propriedades, o que são métodos e a forma de implementá-los, sugiro que criem um terceiro botão para limpar o conteúdos dos dois TextBox para exercitar o aprendizado e até o próximo artigo.
