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

TextBox

TextBox no Windows Phone

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.

Controle TextBox na Toolbox

Figura 2: Controle TextBox na Toolbox

Na janela properties defina as seguintes características:

NametxtTeste
TextDigite
WidthAuto
HeightAuto
HorizontalAlignmentStretch
VerticalAlignmentTop

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:

NamebtnTeste
ContentTestar
WidthAuto
HeightAuto
HorizontalAlignmentLeft
VerticalAlignmentTop

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


NamelblTeste
Text
WidthAuto
HeightAuto
HorizontalAlignmentLeft
VerticalAlignmentTop
Interface da aplicação de exemplo

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>
Interface para teste do Password

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.

Aplicação para teste do RadioButton em execução

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.

Aplicação de teste do slider em execução

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.