Exemplo de ListPicker
Figura 1. Exemplo de ListPicker

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.

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:


<!--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>
Listagem 1. StackPanel usado no exemplo
Nota: 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:


<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>
Listagem 2. StackPanel para o nome

E então mais um grupo para que seja inserido 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>
Listagem 3. StackPanel para o email

Insira agora um grupo de 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>
Listagem 4. StackPanel para a data de nascimento

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.


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Listagem 5. Declarando a utilização do toolkit

Para utilizar o ListPicker devemos definir o Item Template e o 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>
Listagem 6. Definição do ItemTemplate e FullmodeItemTemplate

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


<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>
Listagem 7. StackPanel com o ListPicker

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


String[] Pais = {"Brasil","Argentina","Venezuela","Peru","Síria","Austrália","México","Japão","Rússia"};
Listagem 8. Vetor com os nomes dos países utilizados
Nota: 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.


// Constructor
public MainPage()
{
InitializeComponent();
this.lpkPais.ItemsSource = Pais;
}
Listagem 9. Iniciando os itens do ListPicker

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:


<Button Name="btnEnviar" Width="200" Height="100" Foreground="White" 
Content="Enviar" Tap="btnEnviar_Tap_1"/>
Listagem 10. Botão enviar
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:


String dados = "Nome: " + txtNome.Text + "\nData de Nascimento: " + txtNascimento.Text + 
"\nEmail:" + txtEmail.Text + "\nPaís: " + lpkPais.SelectedItem;
MessageBox.Show(dados);
Listagem 11. Código do método btnEnviar_Tap_1

A classe MainPage.xaml.cs ficará assim:


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);
        }

    }
}
Listagem 12. Código da página MainPage.xaml.cs

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.