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.