Windows Phone: Inserindo botões de ação nos itens do ListBox

Um dos principais fatores a serem observados e considerados, no desenvolvimento de aplicações para dispositivos móveis, é a facilidade de acesso aos menus e elementos da tela. Como o usuário geralmente utiliza o(s) dedo(s) (ou canetas, em alguns casos) para manipular a interface, é fundamental que ele possa realizar certas ações com facilidade, com o menor número de toques possível.

Porém, é importante lembrar que as dimensões da tela são geralmente bem resumidas, quando comparadas a monitores desktop. Então, deve-se projetar a interface para oferecer uma experiência agradável ao usuário, de forma que utilizar sua aplicação seja algo simples e prático, características das aplicações mobile.

Se observarmos um dos gerenciadores de e-mail do Windows Phone, veremos que quando marcamos uma mensagem, tocando no canto esquerdo da tela, algumas opções são oferecidas abaixo, tais como excluir, mover, marcar como lida, etc. Nesse caso, são várias opções disponíveis para aquele item selecionado, por isso é interessante utilizar a barra de botões e menus na parte inferior da tela.

Por outro lado, se acessarmos a aplicação de chamadas telefônicas, veremos todas as chamadas recentes listadas e, ao lado de cada uma delas, um pequeno botão com o símbolo de um telefone. Ao tocar nesse botão, é iniciada uma chamada para o número, sem que fosse preciso selecionar o item e depois utilizar uma barra te ícones ou menu suspenso, por exemplo. Nesse caso, temos apenas uma opção para cada item, que é efetuar uma ligação. Esse modelo é utilizado para agilizar uma ação muito comum, que é a de ligar para números recentes. Sem esse botão, seria necessário selecionar o item e acessar a opção “ligar para” em outra tela ou em outro menu, o que faria com que o usuário precisasse tocar mais vezes na tela para executar uma ação simples e corriqueira.

Então, com base no que foi dito e buscando seguir o mesmo raciocínio em nossas aplicações, veremos neste artigo como inserir um botão de ação nos itens de uma ListBox.

Tomaremos como situação problema uma aplicação de vendas, da qual trataremos a tela de itens do pedido. Nessa tela, os itens serão listados e em uma ListBox e nosso objetivo é inserir um botão em cada item para removê-lo da lista.

Mãos à obra! Chega de teoria, vamos à parte prática.

Criando o projeto

No Visual Studio (2012, neste caso), crie um novo projeto a partir do menu FILE > New > Project... e na categoria Windows Phone, selecione o template Windows Phone App. Dê um nome à aplicação, que neste exemplo foi denominada BotoesAcaoListBox. Em seguida, na caixa de diálogo que é apresentada, selecione a plataforma Windows Phone OS 7.1, dessa forma a aplicação poderá ser executada tanto na versão 7.x do Windows Phone, quanto na versão 8.

Na página principal, dentro do grid ContentPanel, vamos inserir a ListBox com a formatação dos itens já definida, de forma a exibir a descrição, a quantidade e o subtotal, tudo isso após um botão que será usado para excluir o item.

O código XAML da MainPage deve ficar semelhante ao código apresentado na Listagem 1.

<phone:PhoneApplicationPage 
    x:Class="BotoesAcaoListBox.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" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded_1">

    <!--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 x:Name="ApplicationTitle" Text="MY APPLICATION"
              Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" 
              Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lbxItens">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Button Content="x" Click="Button_Click_1" 
                             CommandParameter="{Binding Path=Codigo}"/>
                            <StackPanel>
                                <TextBlock FontSize="30" Text="{Binding Path=Descricao}"/>
                                
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Quantidade: " Width="120"/>
                                    <TextBlock Text="{Binding Path=Quantidade}" Width="100"/>
                                    <TextBlock Text="Subtotal: " Width="100"/>
                                    <TextBlock Text="{Binding Path=Subtotal}" Width="100"/>
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid> 
</phone:PhoneApplicationPage>

Adicionemos então uma classe ao projeto, chamada Item, com as propriedades já citadas. O código dessa classe é apresentado na Listagem 2.

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

namespace BotoesAcaoListBox
{
    public class Item
    {
        private int _codigo;
        private string _descricao;
        private decimal _quantidade;
        private decimal _subtotal;

        public string Descricao
        {
            get { return _descricao; }
            set { _descricao = value; }
        }

        public decimal Quantidade
        {
            get { return _quantidade; }
            set { _quantidade = value; }
        }

        public decimal Subtotal
        {
            get { return _subtotal; }
            set { _subtotal = value; }
        }

        public int Codigo
        {
            get { return _codigo; }
            set { _codigo = value; }
        }
    }
}

Com o template da ListBox e a classe Item prontos, vamos tratar o evento Click do botão. Na linha 35 vemos que o event handler foi definido, basta codifica-lo usando C# (ou sua linguagem de preferência).

No código C# da página MainPage (arquivo MainPage.xaml.cs), vamos criar o método Button_1_Clickspan>, conforme mostra a Listagem 3. Além disso, vamos criar uma lista com alguns itens e associa-la à ListBox como fonte de dados.

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 BotoesAcaoListBox
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Lista de itens do pedido
        List<Item> itens = new List<Item>();

        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            if (MessageBox.Show("Deseja excluir o item?", "Excluir",
                MessageBoxButton.OKCancel) == MessageBoxResult.OK)
            {
                int codigo = (int)(sender as Button).CommandParameter;
                itens.Remove(itens.First(i => i.Codigo.Equals(codigo)));
                lbxItens.ItemsSource = itens;
            }

            lbxItens.ItemsSource = null;
            lbxItens.ItemsSource = itens;
        }

        private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            itens.Add(new  Item{ 
                Codigo = 1,
                Descricao = "Cabo extensor USB",
                Quantidade = 1,
                Subtotal = 5
            });

            itens.Add(new Item{
                Codigo = 2,
                Descricao = "Tela LCD 21''",
                Quantidade = 1,
                Subtotal = 400
            });

            itens.Add(new Item{
                Codigo = 3,
                Descricao = "Teclado wireless",
                Quantidade = 2,
                Subtotal = 90
            });

            lbxItens.ItemsSource = itens;
        }
    }
}

A propriedade CommandParameter, do Button, permite associar a ele um argumento que pode ser utilizado de diversas formas. No nosso caso, ligamos o CommandParameter à propriedade Codigo do item, já que trabalhamos no template da ListBox.

No event handler do evento Click do botão, utilizamos esse parâmetro para remover o item da lista e atualizar a ListBox.

Executando a aplicação, temos o resultado ilustrado na Figura 1.

Clicando botão, após confirmação, podemos excluir o item no qual tocamos.

Percebemos que para remover o item da lista foi preciso apenas um toque, dispensando o usuário de, por exemplo, selecionar um item e pressionar outro botão ou menu suspenso, por exemplo. Com pequenos detalhes como esse, agilizamos certas tarefas e fazemos com que utilizar nossa aplicação de torne mais simples e prático.

Desta forma concluímos este artigo, o qual espero que tenha sido útil.