Curso Windows Phone – Como preencher e identificar os itens selecionados em um ListBox

Olá pessoal, tudo bom?

Nesse post demonstro como preencher e também identificar quais itens foram selecionados em um determinado ListBox. Adianto que há várias formas de se popular um ListBox e neste post estou utilizando apenas uma delas. 🙂

Tela de exemplo da APP desenvolvida para este post

Tela de exemplo da APP desenvolvida para este post

Para popular o ListBox criei uma classe hipotética para representar sabores de Pizza (dados fixos mas poderiam vir do BD, XML ou mesmo WebService) e coloquei alguns valores de tal forma que eu tenha uma lista de sabores representada por um objeto List<Sabor>. Vejamos:

Classe Sabor (arquivo Sabor.cs)


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace PhoneApp1
{
  public class Sabor
  {
    private int _codigo;
    public int Codigo
    {
      get { return _codigo; }
      set { _codigo = value; }
    }

    private string _nome;
    public string Nome
    {
      get { return _nome; }
      set { _nome = value; }
    }

    private string _ingredientes;
    public string Ingredientes
    {
      get { return _ingredientes; }
      set { _ingredientes = value; }
    }

    private bool _selecionado;
    public bool Selecionado
    {
      get { return _selecionado; }
      set { _selecionado = value; }
    }
  }
}

Abaixo temos o código desenvolvido em XAML para representação dos dados de nossa APP de exemplo:

Interface (arquivo MainPage.xaml)


<phone:PhoneApplicationPage
 x:Class="PhoneApp1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 FontFamily="{StaticResource PhoneFontFamilyNormal}"
 FontSize="{StaticResource PhoneFontSizeNormal}"
 Foreground="{StaticResource PhoneForegroundBrush}"
 SupportedOrientations="Portrait" Orientation="Portrait"
 shell:SystemTray.IsVisible="True">

 <!--LayoutRoot is the root grid where all page content is placed-->
 <Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
     <TextBlock Text="BLOG DO EDUARDO H. RIZO" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
     <TextBlock Text="listbox itens" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>

   <!--ContentPanel - place additional content here-->
     <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <ListBox Name="lbSabores" Height="540" >
         <ListBox.ItemTemplate>
           <DataTemplate>
             <StackPanel>
               <CheckBox Height="Auto"
                         Checked="CheckBox_Checked"
                         Unchecked="CheckBox_Unchecked"
                         Content="{Binding Nome}"
                         IsChecked="{Binding Selecionado}" />
               <TextBlock Height="Auto"
                          Text="{Binding Ingredientes}" />
             </StackPanel>
           </DataTemplate>
         </ListBox.ItemTemplate>
       </ListBox>
       <Button Name="btnOK" Content="Itens selecionados" Click="btnOK_Click" />
     </StackPanel>
   </Grid>
</phone:PhoneApplicationPage>

Finalmente o código necessário para manipulação dos dados na interface. Veja a codificação abaixo:

Manipulação da interface (arquivo 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.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp1.Resources;

namespace PhoneApp1
{
  public partial class MainPage : PhoneApplicationPage
  {
     private List<Sabor> Sabores;

     public MainPage()
     {
       InitializeComponent();
       //Método para popular o ListBox
       Preencher();
     }

     protected void Preencher()
     {
       Sabores = new List<Sabor>();
       Sabores.Add(new Sabor { Codigo = 1, Nome = "Napolitana", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
       Sabores.Add(new Sabor { Codigo = 2, Nome = "Portuguesa", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
       Sabores.Add(new Sabor { Codigo = 3, Nome = "Beringela", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
       Sabores.Add(new Sabor { Codigo = 4, Nome = "4 queijos", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
       Sabores.Add(new Sabor { Codigo = 5, Nome = "Calabresa", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
       Sabores.Add(new Sabor { Codigo = 6, Nome = "California", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });

       lbSabores.ItemsSource = Sabores;
     }

     private void CheckBox_Checked(object sender, RoutedEventArgs e)
     {
       var check = sender as CheckBox;
       if (check != null)
       {
         Sabor s = check.DataContext as Sabor;
         s.Selecionado = true;
       }
     }

     private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
     {
       var check = sender as CheckBox;
       if (check != null)
       {
         Sabor s = check.DataContext as Sabor;
         s.Selecionado = false;
       }
    }

    private void btnOK_Click(object sender, RoutedEventArgs e)
    {
      string selecao = "";
      foreach (Sabor s in Sabores)
      {
        selecao += s.Selecionado ? s.Nome + " - " : "";
      }
      MessageBox.Show(selecao);
    }
  }
}

Espero ter ajudado!

Post Relacionado: 

Grande abraço,
Eduardo Henrique Rizo

Anúncios

Coordenador de Internet da Universidade do Oeste Paulista (Unoeste) e professor universitário de disciplinas relacionadas ao desenvolvimento de sistemas para Web, gerenciamento de servidores, serviços e redes.

Marcado com: , , , , , , , , , , , , , ,
Publicado em Windows Phone
45 comentários em “Curso Windows Phone – Como preencher e identificar os itens selecionados em um ListBox
  1. […] Como preencher e identificar os itens selecionados em um ListBox […]

  2. […] Fonte: Curso Windows Phone – Como preencher e identificar os itens selecionados em um ListBox […]

  3. […] Curso Windows Phone – Como preencher e identificar os itens selecionados em um ListBox […]

  4. […] Curso Windows Phone – Como preencher e identificar os itens selecionados em um ListBox […]

    • Ewerton disse:
                  if (radioButtonResp1.IsChecked == false && radioButtonResp2.IsChecked == false
                   && radioButtonResp3.IsChecked == false && radioButtonResp4.IsChecked == false)
                  {
                      MessageBox.Show("Olá");
                  ------->>>>>  exit;   
                  }
      
                  if (radioButtonResp1.IsChecked == true)
                  { 
      
                  }
      
                  if (radioButtonResp2.IsChecked == true)
                  {
      
                  }
      
                  if (radioButtonResp3.IsChecked == true)
                  {
      
                  }
      
                  if (radioButtonResp4.IsChecked == true)
                  {
      
                  }
      

      Pelo código ai aonde tem a seta como seria no C# ? um exit tipo no delphi isto serviria para eu sair já procedimento ou seja neste exemplo não seria verificado os radiobutton

      Até mais.

  5. maiaraestevam disse:

    Não estou conseguindo usar a biblioteca System.Threading.Tasks; :S

  6. Ewerton disse:

    Eu estou precisando que fique Selecionado Somente um sabor
    Como seria ?

    Eu tentei aqui mas não funcionou

    lbSabores.SelectedIndex = -1;
    

    Obrigado desde já

    • Olá Ewerton, tudo bom?
      Basta que você troque o elemento CheckBox por um RadioButton definindo a propriedade GroupName para que os mesmos se tornem exclusivos, ou seja, a seleção de um item desmarca os outros e assim por diante.
      Veja o exemplo abaixo:

      <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
             <ListBox Name="lbSabores" Height="540" >
               <ListBox.ItemTemplate>
                 <DataTemplate>
                   <StackPanel>
                     <RadioButton GroupName="items" Height="Auto" .... />
                     <TextBlock Height="Auto"
                                Text="{Binding Ingredientes}" />
                   </StackPanel>
                 </DataTemplate>
               </ListBox.ItemTemplate>
             </ListBox>
             <Button Name="btnOK" Content="Itens selecionados" Click="btnOK_Click" />
      </StackPanel>
      

      Abraços,
      Eduardo

      • Ewerton disse:

        Muito obrigado,
        Mas que bobeira minha a resposta foi simples, eu queria por que queria que o listbox fosse usado que não pensei em outro componente (controle)
        É que comecei estes dias mas valeu.

        To lendo muito as suas postagens, continue postando assunto relacionados com WP para nós.

      • Ewerton disse:
                    string selecao = "";
                    foreach (Sabor s in Sabores)
                    {
                        if (s.Selecionado == true) 
                        {
                        selecao = s.Ingredientes;
                        }
                    }
                    MessageBox.Show(selecao);
        

        Eu tentei fazer como visto acima.
        Mas não deu o resultado esperado!
        Como eu faria para percorrer os radiobutton e ver qual foi marcado ?
        Neste pegar o s.selecionado ou s.nome ou s.codigo

        Eu sei que o radio button tem como fazer assim;

        if (rdbMasculino.IsChecked.Value)
            {
                sexo = "Masculino";
            }
            else
            {
                sexo = "Feminino";
            }
        

        E se não for pedir muito teria um código genérico que serviria para qualquer controle ?

        Mas acho que eu estou fazendo muito errado eu teria de trocar

        private List Sabores;

        Por outro código ?

        Grato desde já.

      • Ewerton, acho que você está errando apenas a forma de enviar os valores para a variável selecao. Do jeito como está no seu código a variável selecao sempre terá apenas o último valor selecionado e isso está acontecendo porque você não está concatenando os valores…

        Procure fazer assim:

        ...
        ...
            if (s.Selecionado == true) 
               selecao += s.Ingredientes;
        ...
        ...
        

        Repare que coloquei o operador += para que a variável selecao possa ir acumulando os valores dos selecionados.

      • Ewerton disse:

        rs
        Imaginei que estava fazendo algo errado

        Mas aqui eu estou com uma dúvida, respeito de outra questão
        Tem alguma página que eu posso postar ou pode postar em qualquer uma ?

        Ou por exemplo minha dúvida é sobre Banco Dados eu poderia postar em
        https://ehrizo.wordpress.com/2012/06/15/curso-windows-phone-banco-de-dados-local/
        ?

        Abraços

  7. Ewerton disse:

    iii acho que comentei no lugar errado!

    if (radioButtonResp1.IsChecked == false && radioButtonResp2.IsChecked == false
     && radioButtonResp3.IsChecked == false && radioButtonResp4.IsChecked == false)
    {
        MessageBox.Show("Olá");
    ------->>>>>  exit;   
    }
     
    if (radioButtonResp1.IsChecked == true)
    { 
     
    }
     
    if (radioButtonResp2.IsChecked == true)
    {
     
    }
     
    if (radioButtonResp3.IsChecked == true)
    {
     
    }
     
    if (radioButtonResp4.IsChecked == true)
    {
     
    }
    

    Pelo código ai aonde tem a seta como seria no C# ? um exit tipo no delphi isto serviria para eu sair já procedimento ou seja neste exemplo não seria verificado os radiobutton

    desculpe pela comentário lá em cima

  8. Priscila Prezotti disse:

    Boa tarde.

    Não estou conseguindo adicionar o CheckBox dentro da ListBox. Pode me ajudar?

    Obrigada.

  9. Priscila Prezotti disse:

    Com a XAML. Quando eu adiciono um CheckBox o código dele fica abaixo do código da list box. Tentei recortar e colar para ficar igual seu código XAML mas não deu certo. Como devo fazer?

    • Priscila, você deve observar se o seu container de objetos é um StackPanel ou Grid. No meu exemplo usei um StackPanel.
      Outra coisa a verificar é a orientação do StackPanel que está agrupando os objetos que você está usando está na vertical ou horizontal.
      Também repare que o próprio componente CheckBox possui Content que determina o texto a ficar na frente do mesmo. OK?

      []s
      Eduardo

  10. Priscila Prezotti disse:

    Bom dia Eduardo.

    Primeiramente gostaria de agradecer, e muito, pela ajuda. Como deu pra perceber estou começando a desenvolver pra WP agora, por isso estou com muitas dúvidas ainda.

    Voltando ao programa… realmente o container estava como grid. Todas as outras interfaces que criei eram como grid e na verdade eu nunca usei StackPanel. Tentei aqui adicionar um StackPanel do toolbox, coloquei um Listbox nele, mas novamente não consegui colocar o CheckBox dentro do ListBox.

    • Olá Priscila, com certeza você ainda deve estar tendo algum problema com os containers e seus alinhamentos.
      Como você disse que é iniciante, sugiro fazer dois cursos sobre Windows Phone que estão disponíveis gratuitamente no MVA – Microsoft Virtual Academy. Experimente acessar http://aka.ms/mva e faça os cursos sobre Windows Phone.

      PS: Os cursos estão em português.

      Grande abraço,
      Eduardo

  11. Segui teu tutorial (muito bom por sinal), mas ocorre erro no debugar a aplicação!

    O debug é interrompido em Debugger.Break(); da App.xaml.cs e nao apresenta uma Exception util.

    Notei que, removendo {Binding xxx}, a aplicação executa sem problemas.

    Como poderia resolver isso?

    Att

    • Boa tarde Fabrício, tudo bom?
      Bem se quando você tira o Binding a coisa funciona, então de repente você pode ter algum problema com a fonte de dados, mas é difícil afirmar sem ver o erro que está ocorrendo.
      Tente pegar alguma informações da mensagem de erro e post aqui para que nós possamos tentar ajudar.

      []s
      Eduardo

      • Fabrício disse:

        Bom, esta é minha Lista:

        ListaEditais = new List();
        ListaEditais.Add(new Editais { Codigo = 1, Nome = “Edital 1”, Url = “http://www.google.com.br”, Data = “1/1/2014” });
        ListaEditais.Add(new Editais { Codigo = 2, Nome = “Edital 2”, Url = “http://www.terra.com.br”, Data = “2/2/2014” });

        e este o meu XAML:

        No debug, ele passa corretamente pelo metodo MainPage, mas ao abrir a aplicação no emulador, ela se fecha e para no Debugger.Break(); da App.xaml.cs como tinha dito, e a exception é esta:

        Object reference not set to an instance of an object.

        Ou seja, nada especifico =/

        e se eu qualquer textp no lugar dos {Binding, funciona corretamente!

      • Pelo que me parece o programa está tentando fazer binding em algum objeto que ainda não existe.
        Você está criando essa lista de editais em qual evento?

        Se puder mande a parte XAML do teu código tbm.

        []s
        Eduardo

  12. Fabrício disse:

    Como você fez, tenho uma lista global:

    private List ListaEditais;

    e no metodo public MainPage()
    {

    eu populo a lista:

    ListaEditais = new List();
    ListaEditais.Add(new Editais { Codigo = 1, Nome = “Edital 1″, Url = “http://www.google.com.br”, Data = “1/1/2014″ });
    ListaEditais.Add(new Editais { Codigo = 2, Nome = “Edital 2″, Url = “http://www.terra.com.br”, Data = “2/2/2014″ });

    onde editais é uma classe publica:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace appProjec
    {
    public class Editais
    {
    private int _codigo;
    public int Codigo
    {
    get { return _codigo; }
    set { _codigo = value; }
    }

    private string _nome;
    public string Nome
    {
    get { return _nome; }
    set { _nome = value; }
    }

    private string _url;
    public string Url
    {
    get { return _url; }
    set { _url = value; }
    }

    private string _data;
    public string Data
    {
    get { return _data; }
    set { _data = value; }
    }
    }
    }

    e o XAML:

    Acho q esta tudo certo! Não?

    Obrigado por enquanto!

  13. Fabrício disse:

    phone:PhoneApplicationPage
    x:Class=”PanoramaApp1.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
    xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    xmlns:wpControls=”clr-namespace:WPControls;assembly=WPControls”
    mc:Ignorable=”d”
    d:DataContext=”{d:DesignData SampleData/MainViewModelSampleData.xaml}”
    FontFamily=”{StaticResource PhoneFontFamilyNormal}”
    FontSize=”{StaticResource PhoneFontSizeNormal}”
    Foreground=”{StaticResource PhoneForegroundBrush}”
    SupportedOrientations=”Portrait” Orientation=”Portrait”
    shell:SystemTray.IsVisible=”False”>

    </phone:PhoneApplicationPage

    (nao sei se esta aparecendo, qqr cosia deleta que eu posto novamente)

  14. vagabundo05 disse:

    Eu tenho uma ListBox com 2 TextBlock e quer passar dados de uma página para outra, assim como você faria? Espero que você possa me ajudar, obrigado

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Erro: o Twitter não respondeu. Por favor, aguarde alguns minutos e atualize esta página.

Sorocaba e Região
Prestadora de serviços RIZZO GS - Sorocaba/SP

Serviços de limpeza, conservação, recepção, copa, portaria, vigia, zeladoria, jardim, elétrica, hidráulica, pintura, etc.

Contato: (15) 3357-4263 / (15) 3357-4502 - contato@rizzogs.com.br

Website: http://www.rizzogs.com.br

%d blogueiros gostam disto: