Curso Windows Phone: Exemplo de binding usando Listbox

Publicado por ehrizoem

Olá pessoal, tudo bom?

Segue um post sobre como fazer o binding de uma lista de objetos (nesse caso uma lista de sabores de pizza) em um Listbox através dos recursos do XAML/WPF.

1º Passo: Preparar as classes que irão representar os dados que desejamos associar ao Listbox

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

Classe ListaSabores.cs

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

namespace PhoneApp1
{
  public class ListaSabores : ObservableCollection<Sabor>
  {
    public ListaSabores()
    {
      Add(new Sabor { Codigo = 1, Nome = "Napolitana", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
      Add(new Sabor { Codigo = 2, Nome = "Portuguesa", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
      Add(new Sabor { Codigo = 3, Nome = "Beringela", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = true });
      Add(new Sabor { Codigo = 4, Nome = "4 queijos", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
      Add(new Sabor { Codigo = 5, Nome = "Calabresa", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
      Add(new Sabor { Codigo = 6, Nome = "California", Ingredientes = "Ingrediente 1, Ingrediente 2, Ingrediente 3", Selecionado = false });
    }
  }
}

2º Passo: Ajustar a página XAML onde o conteúdo será exibido

Nesse caso criamos um recurso local na página que aponta para a classe ListaSabores.cs e configuramos o Listbox para usar esse recurso local e exibir as propriedades existentes nele. Veja o código:

<phone:PhoneApplicationPage
  x:Class="PhoneApp1.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  ...
  xmlns:local="clr-namespace:PhoneApp1" <!-- Referência ao namespace da Aplicação -->
  ...
  shell:SystemTray.IsVisible="True">

  <!-- Definição do recurso para a página -->
  <phone:PhoneApplicationPage.Resources>
    <local:ListaSabores x:Key="MeusDados" />
  </phone:PhoneApplicationPage.Resources>

  ...
  ...
     <ListBox Name="lbSabores" Height="540" ItemsSource="{StaticResource MeusDados}">
       <ListBox.ItemTemplate>
         <DataTemplate>
           <StackPanel>
             <CheckBox Height="Auto" Content="{Binding Nome}" IsChecked="{Binding Selecionado}" />
             <TextBlock Height="Auto" Text="{Binding Ingredientes}" />
           </StackPanel>
         </DataTemplate>
       </ListBox.ItemTemplate>
     </ListBox>
  ...
  ...

Espero ter ajudado!

Posts Relacionados: 

Grande abraço,
Eduardo Henrique Rizo

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

13 comentários em “Curso Windows Phone: Exemplo de binding usando Listbox”

  1. Pingback: Free: Curso Windows Phone – Vários tópicos | Blog do Eduardo H. Rizo

  2. Arthur Rocha diz:

    Muito bom o Post Eduardo, Parabéns.

    Se poder fazer um post mostrando como fazer animação em Blend, como por exemplo fazer tremer um stackpanel ao selecionar nele via uma Listbox. Eu agradeceria, pois tem pouca informação de Blend.

    Responder

  4. Pingback: Curso Windows Phone – Como obter acesso a controles dentro do ItemTemplate do ListBox | Blog do Eduardo H. Rizo

  5. Pingback: [Desenvolvimento] Como obter acesso a controles dentro do ItemTemplate do ListBox - Windows Phone Brasil

  6. Priscila Prezotti diz:

    Boa tarde Eduardo!
    Consegui fazer o binding e listar o que eu gostaria no ListBox porém não consigo usar a função SelectedItem para “capturar” qual item do LB foi selecionado pelo usuário. Pode me ajudar por favor?

    Muito obrigada!

    Responder
      1. Priscila Prezotti diz:

        Aqui o código XAML

        E o código XAML.CS

        public partial class CartaoInserirValor : PhoneApplicationPage
        {
        public CartaoInserirValor()
        {
        InitializeComponent();
        // Set the data context of the listbox control to the sample data
        DataContext = App.ViewModel;

        var ctx = new TCC2014Entities2(new Uri(“http://localhost:55473/WcfDataServiceSP.svc/”));
        var coll = new System.Data.Services.Client.DataServiceCollection(ctx);

        lbTodos.ItemsSource = coll;
        var qry1 = “/usp_ListaCartao?numMesa=%27” + (Application.Current as App).MesaSelecionada + “%27”;

        //coll.LoadCompleted += new EventHandler(coll_LoadCompleted);

        coll.LoadAsync(new Uri(qry1, UriKind.Relative));
        }

        private void btAdd_Click_1(object sender, RoutedEventArgs e)
        {
        tbteste.Text = Convert.ToString(lbTodos.SelectedIndex);
        ADD();
        }

        private void btSub_Click_1(object sender, RoutedEventArgs e)
        {
        SUB();
        }

        private void ADD()
        {
        if (null != lbTodos.SelectedItem)
        {
        lbSelecionados.Items.Add(lbTodos.SelectedItem);
        lbTodos.Items.Remove(lbTodos.SelectedItem);
        }

        }

        private void SUB()
        {
        if (null != lbSelecionados.SelectedItem)
        {
        lbTodos.Items.Add(lbSelecionados.SelectedItem);
        lbSelecionados.Items.Remove(lbSelecionados.SelectedItem);
        }

        }

        São dois ListBox, o da direita está sendo populado corretamente , gostaria de, qnd clicar no botão bt_Add, o item selecionado ser removido deste listbox e ser adicionado no outro lb. Já fiz isso antes e funcionou, mas agora usando itemsource e binding da erro na hora de remover o item.

        Passei o dia tentando, se conseguir me ajudar serei mtmt grata! =D

  7. Pingback: Curso Windows Phone – Como ler dados de documentos XML usando LINQ como forma de consulta | Blog do Eduardo H. Rizo

Deixe um comentário