Usando o menu de contexto em um item do listbox 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 criar um menu suspenso/menu de contexto em um item de um ListBox, apresentando opções para o usuário quando este pressionar e segurar um item da lista.

Em muitas situações é necessário disponibilizar ao usuário um menu que não cause um grande impacto no seu layout. Nesse artigo será mostrado como exibir um menu suspenso a partir do evento de Hold de um Item numa ListBox, ou seja, quando o usuário pressionar e segurar o item da lista.

Neste exemplo criaremos uma lista de clientes em que será possível removê-los dessa lista ao segurar o item e pressionar excluir.

Então, para iniciar crie um projeto de Windows Phone no Visual Studio.

Criação do projeto para Windows Phone no Visual Studio

Um dos componentes do Kit de ferramentas do Silverlight é o ContextMenu, usado para áreas como a lista de aplicações no menu do Windows Phone, em que é possível exibir ao usuário opções como “fixar na tela inicial”, “desinstalar” e etc.

Ao criar o projeto é exibida uma caixa com a opção de escolha da versão do Windows Phone, escolha a 7.1, pois assim o seu aplicativo funcionará em todas as versões de Windows Phone disponíveis.

Para começar a usar o contextMenu você deverá adicionar a referência para Microsoft.Phone.Controls.Toolkit.dll. Vá para o Solution Explorer, clique com o botão direito em References e depois Add reference. Será exibido o Reference Manager conforme a Figura 2, em que é possível ver quais DLLs você está referenciando ao seu projeto.

Adicionando a referência à DLL Microsoft.Phone.Controls.Toolkit

Figura 2: Adicionando a referência à DLL Microsoft.Phone.Controls.Toolkit

Agora você deve clicar em Extensions no menu do lado esquerdo e marcar a DLL, como mostra a Figura 2. Para utilizar no XAML a propriedade toolkit:ContextMenu você deve adicionar uma declaração que inclua o namespace toolkit, inclua a referência (xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit") conforme a Listagem 1.

Listagem 1: Referência para ser adicionada na tag PhoneApplicationPage

<phone:PhoneApplicationPage 
    x:Class="TesteMenuLista.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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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"> 

Agora então será adicionado um StackPanel para conter a listbox com o item que possui a opção de excluir. Foi definido o mesmo tamanho de 450 de largura e 400 de altura para o StackPanel e o ListBox, e o VerticalAlignment para Top, isso manterá os controles no topo.

Listagem 2: Content Panel com o listbox em que cada item possuirá o seu próprio menu

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Width="450" Height="400" VerticalAlignment="Top">
                <ListBox Name="lstClientes" Width="450" Height="400" VerticalAlignment="Top">
                    <ListBoxItem>
                        <TextBlock FontSize="40">Nabil Safatli</TextBlock>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>                                
                                <toolkit:MenuItem Header="excluir item" Tap="MenuItem_Tap_1"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </ListBoxItem>
                    <ListBoxItem>
                        <TextBlock FontSize="40">João Paulo</TextBlock>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="excluir item" Tap="MenuItem_Tap_1"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </ListBoxItem>
                    <ListBoxItem>
                        <TextBlock FontSize="40">Fernanda Lima</TextBlock>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="excluir item" Tap="MenuItem_Tap_1"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </ListBoxItem>
                    <ListBoxItem>
                        <TextBlock FontSize="40">Pedro Rodrigues</TextBlock>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="excluir item" Tap="MenuItem_Tap_1"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </ListBoxItem>
                    <ListBoxItem>
                        <TextBlock FontSize="40">Marcos Luiz</TextBlock>
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu>
                                <toolkit:MenuItem Header="excluir item" Tap="MenuItem_Tap_1"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </ListBoxItem>
                </ListBox>
            </StackPanel>
        </Grid>

Para utilizar o ContextMenu deve-se referenciar o toolkit e assim utilizar quantas opções forem necessárias. Foi criada uma lista com os usuários em que cada item possui o ContextMenu e o Textblock com o nome do cliente, já o MenuItem possuirá o evento Tap que será responsável pela exclusão do item da lista.

Para criar este método abra o arquivo MainPage.xaml.cs e crie o método MenuItem_Tap_1 conforme mostra a Listagem 3. O listbox possui um método chamado RemoveAt, que exclui um ListBoxItem de uma lista conforme o índice passado, então será informado o índice do item selecionado na lista como parâmetro, e que por fim será excluído.

Listagem 3: Método de exclusão de um ListBoxItem

private void MenuItem_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
lstClientes.Items.RemoveAt(lstClientes.SelectedIndex);
}

Um mesmo método será utilizado para todos os itens do menu, pois ele pode ser reutilizado por ser indiferente quanto ao item selecionado.

Observação: Lembre que para excluir o item da lista você deve selecioná-lo antes.

Pressione F5 e teste sua aplicação, ela deve estar conforme a Figura 3.

Aplicação em funcionamento com a opção de excluir

Figura 3: Aplicação em funcionamento com a opção de excluir

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?