Usando o controle ListPicker no 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 como utilizar o controle ListPicker em aplicações Silverlight para Windows Phone, oferecendo ao usuário uma lista de itens selecionáveis.

Exemplo de ListPicker

Figura 1: Exemplo de ListPicker

Introdução

ListPicker é um controle do Silverlight para Windows Phone. É usado para a escolha de um item a partir de uma lista, como se fosse uma ComboBox. Quando você tem uma pequena lista de itens entre um e quatro, serão exibidos como uma ComboBox e se for mais que 4 serão exibidos como uma ListBox em outra página.

O exemplo que será utilizado será um formulário em que o usuário envia os seus dados pessoais, Nome, Email, Data de Nascimento e o país em que está residindo (usando o ListPicker para selecionar o País). Os dados serão exibidos ao se clicar em um botão.

Primeiro Passo: você deve fazer o download de uma ferramenta do Silverlight para Windows Phone neste link: http://silverlight.codeplex.com/downloads/get/270984.

Após a instalação, abra um novo projeto para Windows Phone 7.1 no Visual Studio. Chame-o de TestListPicker.

Agora você deve saber que está utilizando uma nova DLL no seu projeto, e para isso deverá adicioná-la ao seu projeto, vá em References e Add Reference como mostra a imagem abaixo.

Adicionando referência à DLL externa

Figura 2: Adicionando referência à DLL externa

E então selecione Extensions, depois marque a opção de Microsoft.Phone.Controls.Toolkit. E finalize apertando Ok.

Selecionando a biblioteca

Figura 3: Selecionando a biblioteca

Agora vá para a página MainPage.xaml, e adicione um StackPanel no ContentPanel com as seguintes propriedades:

Listagem 1: StackPanel usado no exemplo

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

Observação: Cada dado terá um TextBlock e um TextBox, e para que fiquem colocados corretamente na tela, cada um deverá ter seu próprio StackPanel.

Agora insira um TextBlock junto a um TextBox para que seja inserido o Nome:

Listagem 2: StackPanel para o nome

<StackPanel Name="stckNome" Width="450" Height="100" Orientation="Horizontal">
	<TextBlock Name="lblNome" Width="100" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="25" Text="Nome"/>
	<TextBox Name="txtNome" Width="300" Height="80" HorizontalAlignment="Left" VerticalAlignment="Center" />
</StackPanel>

E então mais um grupo para que seja inserido o Email:

Listagem 3: StackPanel para o email

<StackPanel Name="stckEmail" Width="450" Height="100" Orientation="Horizontal">
	<TextBlock Name="lblEmail" Width="100" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="25" Text="Email"/>
	<TextBox Name="txtEmail" Width="300" Height="80" HorizontalAlignment="Left" VerticalAlignment="Center" />
</StackPanel>

Insira agora um grupo de StackPanel para a data de nascimento:

Listagem 4: StackPanel para a data de nascimento

<StackPanel Name="stckNascimento" Width="450" Height="100" Orientation="Horizontal">
	<TextBlock Name="lblDataNascimento" Width="230" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="25" Text="Data de Nascimento"/>
	<TextBox Name="txtNascimento" Width="220" Height="80" HorizontalAlignment="Left" VerticalAlignment="Center" />
</StackPanel>

Agora finalmente o que realmente importa, o ListPicker com os países selecionáveis. Devemos antes de tudo, declarar a utilização desse toolkit, no início do xaml em Phone Application Page.

Listagem 5: Declarando a utilização do toolkit

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Para utilizar o ListPicker devemos definir o Item Template e o FullModeItemTemplate:

Listagem 6: Definição do ItemTemplate e FullmodeItemTemplate

<phone:PhoneApplicationPage.Resources>
	<DataTemplate x:Name="lpkItemTemplate">
		<TextBlock Text="{Binding Pais}" />
	</DataTemplate>
	<DataTemplate x:Name="lpkFullItemTemplate">
		<TextBlock Text="{Binding Pais}" />
	</DataTemplate>
</phone:PhoneApplicationPage.Resources>

Então adicione o StackPanel com o ListPicker junto ao resto do conteúdo:

Listagem 7: StackPanel com o ListPicker

<StackPanel Name="stckPais" Width="450" Height="100" Orientation="Horizontal">
	<TextBlock Name="lblPais" Width="100" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="25" Text="País"/>
	<toolkit:ListPicker FullModeItemTemplate="{Binding lpkFullItemTemplate}" ItemTemplate="{Binding lpkItemTemplate}" x:Name="lpkPais"/>
</StackPanel>

Agora abra o MainPage.xaml.cs e crie um vetor de string com os países que colocará para que o usuário selecione.

Listagem 8: Vetor com os nomes dos países utilizados

String[] Pais = {"Brasil","Argentina","Venezuela","Peru","Síria","Austrália","México","Japão","Rússia"};

Observação: ItemSource obtém ou define um conjunto, gerando o conteúdo do ItemsControl. Ou seja, no exemplo ele irá adicionar para a lista o vetor de países que você criou.

Coloque no construtor da classe o ItemSource dos países.

Listagem 9: Iniciando os itens do ListPicker

// Constructor
public MainPage()
{
InitializeComponent();
this.lpkPais.ItemsSource = Pais;
}

Agora você deverá criar o botão para que exiba os dados selecionados. Vá para a página MainPage.xaml e adicione o botão abaixo dos StackPanels, com as seguintes propriedades:

Listagem 10: Botão enviar

<Button Name="btnEnviar" Width="200" Height="100" Foreground="White" Content="Enviar" Tap="btnEnviar_Tap_1"/>
Layout da tela após inserção dos códigos

Figura 4: Layout da tela após inserção dos códigos

Agora você deve adicionar o evento que trata os dados a serem exibidos na página MainPage.xaml.cs adicionando o seguinte ao método btnEnviar_Tap_1:

Listagem 11: Código do método btnEnviar_Tap_1

String dados = "Nome: " + txtNome.Text + "\nData de Nascimento: " + txtNascimento.Text + "\nEmail:" + txtEmail.Text + "\nPaís: " + lpkPais.SelectedItem;
MessageBox.Show(dados);

A classe MainPage.xaml.cs ficará assim:

Listagem 12: 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 TestListPicker
{
    public partial class MainPage : PhoneApplicationPage
    {
        String[] Pais = { "Brasil", "Argentina", "Venezuela", "Peru", "Síria", "Austrália", "México", "Japão", "Rússia" };
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.lpkPais.ItemsSource = Pais;
        }

        private void btnEnviar_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
        {
            String dados = "Nome: " + txtNome.Text + "\nData de Nascimento: " + txtNascimento.Text + "\nEmail:" + txtEmail.Text + "\nPaís: " + lpkPais.SelectedItem;
            MessageBox.Show(dados);
        }

    }
}

Agora Pressione F5 e teste sua aplicação.

Aplicação em execução

Figura 5: Aplicação em execução

Um abraço e até o próximo artigo.

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