Xamarin Forms - Apresentando e usando TableView - I

 Neste artigo eu vou apresentar a view TableView e mostrar como podemos usar os seus recursos em uma aplicação Xamarin Forms.

A view TableView pode ser usada para exibir listas de dados roláveis ou opções onde há linhas que não compartilham o mesmo modelo.

Ao contrário da ListView, a TableView não possui o conceito de ItemsSource.

Usar uma TableView é útil quando :

Para possuir esse comportamento uma TableView manipula a rolagem colocando linhas em seções.

Assim os elementos em uma TableView são organizados em seções : TableSection

Na raiz da TableView existe o elemento TableRoot que é o pai para um ou mais TableSections.

A seguir temos um exemplo de uma TableView usando o código XAML e a mesma TableView definida via código C# :

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Configurações">
            <SwitchCell Text="Volume" />
            <SwitchCell Text="Wi-Fi" On="true" />
        </TableSection>
    </TableRoot>
</TableView>
 
            TableView tableView = new TableView();
            tableView.Intent = TableIntent.Settings;
            tableView.Root = new TableRoot();
            TableSection ts = new TableSection("Configurações");
            tableView.Root.Add(ts);
            SwitchCell c1 = new SwitchCell();
            c1.Text = "Volume";
            ts.Add(c1);
            SwitchCell c2 = new SwitchCell();
            c2.Text = "Wi-Fi";
            c2.On = true;
            ts.Add(c2);

 

No código acima definimos uma TableView com uma seção com o título de 'Configurações' usando duas células SwitchCell uma On e outra Off.

A TableView expõe a propriedade Intent, que é uma enumeração com as seguintes opções:

- Data - Usada para exibir entradas de dados.
- Form - Usada quando o TableView está atuando como um Formulário.
- Menu - Usada para apresentar um menu de seleções.
- Settings - Usada ao exibir uma lista de configurações.

A opção para Intent que você escolher pode afetar o modo como o TableView aparece em cada plataforma. Mesmo que não haja diferenças claras, é uma prática recomendada selecionar a Intent que mais se aproxima da forma como você pretende usar a tabela: formulário, configurações, menu, etc.

O Xamarin.Forms vem com células embutidas para coletar e exibir informações que podemos usar tanto na view ListView como na view TableView.

A seguir temos as principais células usada para a TableView em um TableSection :

- SwitchCell - É uma célula usada para apresentar e capturar um estado verdadeiro/falso, juntamente com um rótulo de texto;
- EntryCell - É uma célula usada para apresentação e captura de texto;
- TextCell -  É uma célula para exibir texto, opcionalmente com uma segunda linha como texto detalhado;
- ImageCell - É uma célula para exibir texto com uma segunda linha como texto detalhado e uma imagem à esquerda do texto;
- ViewCell - Utilizada para criar células customizadas onde podemos usar os demais controles Xamarin Forms;

Neste artigo vamos apresentar e usar as células SwitchCell, EntryCell e TextCell.

1- SwitchCell

Uma célula SwithCell possui as seguintes propriedades:

Além disso esta célula possui o evento OnChanged que permite responder às mudança no estado da célula.

2- EntryCell

Uma célula EntryCell é útil quando você quer exibir um texto que pode ser editado pelo usuário. Suas principais propriedades são:

Além disso esta célula expõe o evento Completed que é disparado quando o usuário conclui a edição de texto no teclado.

3- TextCell

Uma célula TextCell é possui as seguintes propriedades:

Vejamos a seguir um exemplo de uma TableView usando essas 3 células

Recursos Usados

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community update 15.5 e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_TableView1;

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

  1. Shared Project

  2. Portable Class Library (PCL)

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado.

Definindo o código da MainPage.xaml

Abra o arquivo MainPage.xaml e inclua no código abaixo: (Ao lado vemos a figura do Xamarin.Forms Previewer exibindo o código XAML para o Android)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_TableView1"
             x:Class="XF_TableView1.MainPage"
             Title="Monte o seu Veículo">
    <StackLayout Padding="10">
        <TableView>
            <TableRoot>
                <TableSection  Title="Acessórios">
                    <SwitchCell Text="Ar condicionado Digital"  On="True"></SwitchCell>
                    <SwitchCell Text="Alarme Perimétrico"></SwitchCell>
                    <SwitchCell Text="Direção Eletro-Hidráulica"></SwitchCell>
                    <SwitchCell x:Name="AlertaCinto" Text="Alerta Cinto de Segurança" OnChanged="AlertaCinto_Changed"></SwitchCell>
                    <TextCell Text="Valor Total : 65.900,00" TextColor="Black"></TextCell>
                    <EntryCell Placeholder="Informe o seu nome"></EntryCell>
                </TableSection>
            </TableRoot>
        </TableView>
       <Button x:Name="btnProximo" Text="Avançar" VerticalOptions="End"></Button>
    </StackLayout>
</ContentPage>

Neste código temos:

Um controle StackLayout que esta empilhando os controles :

1- TableView onde definimos um TableSection com o titulo 'Acessórios'

2- 3 SwitchCell exibindo itens de configurações onde o primeiro esta definido como On e o último possui um evento OnChanged definido;

3- 1 TextCell que exibe o valor total na cor Black.

4- 1 EntryCell com placeholder igual 'Informe o seu nome' onde o usuário poderá informar o seu nome;

5- 1 Button na base da tela com o texto 'Avançar';

O código do evento OnChanged é visto a seguir:
 
       private void AlertaCinto_Changed(object sender, ToggledEventArgs e)
        {
            DisplayAlert("Alerta Cinto Segurança", "Você selecionou/deselecionou este acessório", "OK");
        }

O evento OnChanged será disparado quando o SwithCell para o Alerta Cinto de segunraça for ligado ou desligado.

Executando o projeto usando o emulador Genymotion para o Android iremos obter o seguinte resultado:
 

Este exemplo é bem simples e foi feito apenas para mostrar a estrutura da  TableView e a utilização das células EntryCell, SwitchCell e TextCell.

Na próxima parte do artigo veremos como usar as células ImageCell e como criar uma célula customizada usando ViewCell.

Pegue o código do projeto compartilhado aqui :   XF_TableView1.zip (sem as referências)

"Vede quão grande amor nos tem concedido o Pai, que fôssemos chamados filhos de Deus. Por isso o mundo não nos conhece; porque não o conhece a ele."
 1 João 3:1
 

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti