Controles básicos de entradas de dados em Windows Phone

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo os possíveis controles para requisitar entrada de dados pelo usuário em aplicações Windows Phone. Serão apresentados os controles mais utilizados, juntamente com exemplos práticos de uso de cada um.

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.


 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?