Controles b�sicos de entradas de dados em Windows Phone

Os controles mais comuns no framework do Silverlight para o Windows Phone s�o: TextBox, PassWordBox, CheckBox, RadioButton, Slider e ListBox.

TextBox

Figura 1: TextBox no Windows Phone

Tem a funç�o de receber a entrada de textos, desde pequenas palavras a textos de m�ltiplas linhas.
Veja um exemplo:

Crie um projeto tipo Windows Phone Application.Abra o arquivo MainPage.xaml. Na caixa de ferramentas (Toolbox), selecione o Textbox e arraste para a tela da aplicaç�o.

Figura 2: Controle TextBox na Toolbox

Na janela properties defina as seguintes caracter�sticas:

Name	txtTeste
Text	Digite
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Top

Caso tenha prefer�ncia em digitar o c�digo aqui est� como fica no XAML:

Agora adicione um bot�o abaixo da caixa de texto que acabou de colocar e defina as caracter�sticas:

Name	btnTeste
Content	Testar
Width	Auto
Height	Auto
HorizontalAlignment	Left
VerticalAlignment	Top

Por fim, abaixo do bot�o, adicione um TextBlock e defina as propriedades:

Name	lblTeste
Text
Width	Auto
Height	Auto
HorizontalAlignment	Left
VerticalAlignment	Top

Figura 3: Interface da aplicaç�o de exemplo

Observaç�o: Por padr�o, nomeie os componentes com uma sigla que indica o que s�o, para que facilite nosso trabalho ao codificar nas classes, como por exemplo, �grd� para Grids, �stck� para StackPanel e �btn� para Buttons.

Agora clique duas vezes no bot�o que adicionou, para criar o evento de clique. Abra o arquivo MainPage.xaml.cs, e adicione o seguinte ao m�todo do evento btnTeste_Click:

Listagem 1: C�digo do evento btnTeste_Click

lblTeste.Text = txtTeste.Text;

Pronto, basta pressionar F5 e testar seu controle de TextBox.

Password

Semelhante ao TextBox, mas tem como caracter�stica mascarar o texto digitado.

Agora neste exemplo faremos um teste para conferir se a senha digita est� correta.

Crie um novo projeto em Windows Phone.

Observaç�o: Os componentes no layout do Windows Phone, no arquivo XAML n�o devem estar �soltos� na p�gina jamais. O correto � sempre mant�-los no interior de um StackPanel, e o StackPanel dentro de um Grid. Isso facilita a organizaç�o dos seus componentes, e te faz digitar menos c�digo para organizar o layout. Neste exemplo seguiremos estas regras para visualizar como fica.

No arquivo MainPage.xaml adicione ao Grid de ContentPanel um StackPanel :

Listagem 2: StackPanel para conter os demais controles


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Name="stckSenha" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">
                
</StackPanel>
</Grid>

Observaç�o: A propriedade de �Orientation� possui duas opç�es, uma de Horizontal e outra de Vertical, a de Horizontal mant�m os componentes no interior do StackPanel orientados horizontalmente e o Vertical como o pr�prio nome j� diz verticalmente. Por padr�o o StackPanel j� vem como Vertical sem voc� precisar colocar esta opç�o.

Agora adicione ao StackPanel um TextBlock:

Listagem 3: Inserindo TextBlock no StackPanel


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckSenha" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">
		<TextBlock Name="lblSenha" Width="Auto" Height="30" VerticalAlignment="Center" Text="Senha :" />
	</StackPanel>
</Grid>

E ent�o agora adicione um PasswordBox abaixo do TextBlock, ficando assim:

Listagem 4: Adicionando um PasswordBox � p�gina


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckSenha" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">
		<TextBlock Name="lblSenha" Width="Auto" Height="30" VerticalAlignment="Center" Text="Senha :" />
		<PasswordBox Name="pswSenha" Width="200" Height="70" VerticalAlignment="Center" />
	</StackPanel>
</Grid>

Agora ser� necess�rio um bot�o que possua um m�todo que verifique a se a senha est� correta, ent�o crie um bot�o:

Listagem 5: Inserindo um bot�o para verificaç�o da senha


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckSenha" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">
		<TextBlock Name="lblSenha" Width="Auto" Height="30" VerticalAlignment="Center" Text="Senha :" />
		<PasswordBox Name="pswSenha" Width="200" Height="70" VerticalAlignment="Center" />
		<Button Name="btnConfere" Width="180" Height="80" Content="Conferir" Tap="btnConfere_Tap_1"/>
	</StackPanel>            
</Grid>

Figura 4: Interface para teste do Password

E ent�o abra o arquivo MainPage.xaml.cs, para que possa adicionar ao m�todo �btnConfere_Tap_1� o teste da senha.

Listagem 6: C�digo da p�gina MainPage.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void btnConfere_Tap_1(object sender, GestureEventArgs e)
        {

        }       
    }
}

Colocaremos uma condiç�o, que verifica se a senha digitada � igual a �12345�, ficando assim:

Listagem 7: C�digo do evento btnConfere_Tap_1


private void btnConfere_Tap_1(object sender, GestureEventArgs e)
{
	if (pswSenha.Password == "12345")
	{
		MessageBox.Show("Senha correta!");
	}
	else
	{
		MessageBox.Show("Senha incorreta!");
	}
}

Para verificar a senha, digitamos o nome do componente que � pswSenha e ent�o ao inv�s de Text, digitamos password para verificar o conte�do do campo e comparar com �12345�. Com isso � exibida uma mensagem de senha correta, ou ent�o de senha incorreta.
Pressione F5 e teste a aplicaç�o.

Checkbox

� utilizada para que o usu�rio possa marcar ou desmarcar uma opç�o.

Neste exemplo o usu�rio marcar� se deseja ou n�o receber notificaç�es do aplicativo.

Crie um projeto, e abra o arquivo MainPage.xaml. Agora dentro do Grid Content Panel, adicione um StackPanel:

Listagem 8: StackPanel para montagem do layout


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckConteudo" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">                
	</StackPanel>
</Grid>

E ent�o dentro do stack adicionaremos um CheckBox com o evento Checked que conter� o m�todo que verifica se o usu�rio deseja ou n�o receber uma notificaç�o.

Listagem 9: Inserindo controles no StackPanel


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckConteudo" Width="450" Height="100" VerticalAlignment="Top" Orientation="Horizontal">
		<CheckBox Name="chkNotificacao" VerticalAlignment="Center" Checked="chkNotificacao_Checked_1"/>
		<TextBlock Name="lblEnvioNotificacao" Width="Auto" Height="30" Text="Desejo receber notificaç�o" />
	</StackPanel>
</Grid>

Agora ent�o adicionaremos ao m�todo �chkNotificacao_Checked_1� uma condicional para verificar se o checkbox est� marcado.

Listagem 10: C�digo do evento chkNotificacao_Checked_1


private void chkNotificacao_Checked_1(object sender, RoutedEventArgs e)
{
	if (chkNotificacao.IsChecked == true)
	{
		MessageBox.Show("Voc� receber� notificaç�es!");
	}
}

Pronto, agora basta apertar F5 e ver o funcionamento do checkbox.

RadioButton

� mais uma forma do usu�rio marcar e desmarcar uma opç�o, abaixo faremos um exemplo com dois RadioButtons, que servir�o para selecionar o sexo de um cliente em um cadastro de formul�rio, por exemplo.

Crie um projeto, e abra o arquivo MainPage.xaml. Dentro do Content Panel, crie o um StackPanel e adicione os seguintes componentes:

Listagem 11: C�digo XAML da interface para teste do RadioButton


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckConteudo" Width="450" Height="400" VerticalAlignment="Top">
		<TextBlock Name="lblSexo" Width="Auto" Height="30" Text="Selecione o sexo:" />
		<RadioButton Name="rdMas" Content="Masculino" GroupName="sexo" />
		<RadioButton Name="rdFeminino" Content="Feminino" GroupName="sexo" />
	</StackPanel>
</Grid>

Os RadioButtons possuem uma propriedade chamada GroupName, que serve para uni-los e fazer com que o usu�rio escolha apenas uma das opç�es, e o content � o valor do RadioButton.

Figura 5: Aplicaç�o para teste do RadioButton em execuç�o

Pressione F5 e teste a aplicaç�o.

Slider

� uma barra utilizada para selecionar um valor num intervalo predefinido. No exemplo trataremos de selecionar um valor no Slider:

Crie um projeto, e abra o arquivo MainPage.xaml, adicione ao Content Panel um Stack Panel com um Slider da seguinte maneira:

Listagem 12: C�digo XAML para teste do Slider


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckConteudo" Width="450" Height="140" VerticalAlignment="Top">
		<Slider Name="sldTeste" Minimum="0" Maximum="100" ValueChanged="sldTeste_ValueChanged_1"/> 
		<TextBlock Name="lblValorTeste" Width="Auto" Height="30" Text="Valor Teste :" />
		<TextBlock Name="lblValor" Width="Auto" Height="30" />
	</StackPanel>
</Grid>

A ideia � que quando o Slider mudar de valor, o n�mero escolhido apareça. Abra o arquivo MainPage.xaml.cs para escrever o m�todo que ir� exibir o valor escolhido no slider. Adicione o seguinte:

Listagem 13: C�digo do evento ValueChanged do Slider


private void sldTeste_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs<double> e)
{
	lblValor.Text = sldTeste.Value.ToString();
}

Neste m�todo, o TextBlock receber� o valor do teste transformado em String toda vez que o evento de �Value Changed� for ativado. Pressione F5 e teste o aplicativo.

Figura 6: Aplicaç�o de teste do slider em execuç�o

ListBox

� um componente que possui uma lista de itens selecion�veis.

No exemplo faremos uma simples lista de supermercado. Crie um projeto, e abra o arquivo MainPage.xaml, adicione ao Grid Content Panel um StackPanel que conter� um listbox com os seguintes itens:

Listagem 14: C�digo da interface para teste do ListBox


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Name="stckConteudo" Width="450" Height="500" VerticalAlignment="Top">
		<ListBox Name="lstCompras" Width="450" Height="200" VerticalAlignment="Top">
			<ListBoxItem>P�o</ListBoxItem>
			<ListBoxItem>Leite</ListBoxItem>
			<ListBoxItem>Ovos</ListBoxItem>
			<ListBoxItem>Caf�</ListBoxItem>
			<ListBoxItem>Manteiga</ListBoxItem>
			<ListBoxItem>Nescau</ListBoxItem>
			<ListBoxItem>Arroz</ListBoxItem>
			<ListBoxItem>Feij�o</ListBoxItem>
			<ListBoxItem>Cerveja</ListBoxItem>
			<ListBoxItem>Suco</ListBoxItem>
			<ListBoxItem>Vinho</ListBoxItem>
			<ListBoxItem>Carne</ListBoxItem>
			<ListBoxItem>Cereal</ListBoxItem>
		</ListBox>
	</StackPanel>
</Grid>

Pressione F5 e veja o resultado.

At� o pr�ximo artigo. Um abraço.