Xamarin Forms  4.4 -  Apresentando SwipeView - II
Hoje vamos apresentar os recursos do novo controle SwipeView lançado na versão 4.4 do Xamarin.Forms.

Continuando a primeira parte do artigo veremos como customizar os itens em um SwipeView.

Customizando os itens de um SwipeView

Podemos customizar os items de um SwipeView definindo os items com o tipo SwipeItemView. Esta classe deriva da classe ContentView e adiciona as seguintes propriedades:

  1. Command - do tipo ICommand - É executado quando um item for tocado;
  2. CommandParameter -  do tipo Object - É o parâmetro que é passado para o Commad;

A classe SwipeItemView também define um evento Invoked que é acionado quando o item é tocado, depois que o Command for executado.

Para mostrar isso podemos incluir um novo arquivo Content Page no projeto chamado SwipViewCustomItem.xaml.

A seguir neste arquivo inclua o código abaixo:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_Swipe1.SwipeViewCustomItem">

        <StackLayout Margin="20">
            <Label Text="Perguntas"
               FontSize="Large"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
           <Label Text="Deslize para a Direita para responder a Pergunta." FontSize="Large" />
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItemView Invoked="OnRespostaIncorretaInvoked">
                            <Grid WidthRequest="100">
                            <Frame BackgroundColor="AntiqueWhite"
                                   CornerRadius="30">
                                    <Label Text="6"
                                       FontSize="Large"    
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                                </Frame>
                            </Grid>
                        </SwipeItemView>
                        <SwipeItemView Invoked="OnRespostaCorretaInvoked">
                            <Grid WidthRequest="100">
                                <Frame BackgroundColor="AntiqueWhite"
                                   CornerRadius="30">
                                    <Label Text="36"
                                       FontSize="Large"    
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                                </Frame>
                            </Grid>
                        </SwipeItemView>
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid HeightRequest="70"
                  WidthRequest="300"
                  BackgroundColor="Yellow">
                    <Label Text="Quanto é sete menos um elevado ao quadrado ?"
                       FontSize="Large"
                       FontAttributes="Bold"    
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                </Grid>
            </SwipeView>
            <SwipeView x:Name="swipeView2">
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItemView Command="{Binding VerificaRespostaCommand}"
                                   CommandParameter="{Binding Source={x:Reference resultadoResposta}, Path=Text}">
                            <StackLayout Margin="10"
                                     WidthRequest="300">
                            <Entry x:Name="resultadoResposta"
                                   Placeholder="Informe sua resposta..."
                                   HorizontalOptions="CenterAndExpand" />
                                <Label Text="Verificar"
                                   FontAttributes="Bold"
                                   HorizontalOptions="Center" />
                            </StackLayout>
                        </SwipeItemView>
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid HeightRequest="70"
                  WidthRequest="300"
                  BackgroundColor="LightGray">
                    <Label Text="Quanto é 2+2 ?" HorizontalOptions="Center" VerticalOptions="Center" />
                </Grid>
            </SwipeView>
        </StackLayout>
</ContentPage>

A seguir vamos definir o código abaixo no arquivo SwipViewCustomItem.xaml.cs :

using System;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XF_Swipe1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SwipeViewCustomItem : ContentPage
    {
        public ICommand VerificaRespostaCommand { get; private set; }
        public SwipeViewCustomItem()
        {
            InitializeComponent();
            VerificaRespostaCommand = new Command<string>(VerificaResposta);
            BindingContext = this;
        }
        async void OnRespostaIncorretaInvoked(object sender, EventArgs e)
        {
            await DisplayAlert("Incorreto!", "Tente novamente.", "OK");
        }
        async void OnRespostaCorretaInvoked(object sender, EventArgs e)
        {
            await DisplayAlert("Correto!", "A resposta é 36.", "OK");
        }
        void VerificaResposta(string resultado)
        {
            if (!string.IsNullOrWhiteSpace(resultado))
            {
                int numero = Convert.ToInt32(resultadoResposta.Text);
                if (numero.Equals(36))
                    OnRespostaCorretaInvoked(swipeView2, EventArgs.Empty);
                else
                    OnRespostaIncorretaInvoked(swipeView2, EventArgs.Empty);
            }
        }
    }

Executando o projeto teremos o resultado a seguir:

Um aplicativo pode entrar em um estado em que a passagem de um item de conteúdo não é uma operação válida. Nesses casos, o SwipeView pode ser desativado definindo sua propriedade IsEnabled como false. Isso impedirá que os usuários possam deslizar o conteúdo para revelar itens de deslize.

Além disso, ao definir a propriedade Command de um SwipeItem ou SwipeItemView, o delegado CanExecute do ICommand pode ser especificado para ativar ou desativar o item do swipe.

No próximo artigo veremos como usar  o novo recurso Image com animação.   

Pegue o projeto aqui :  XF_Swipe2.zip (projeto compartilhado)

"Para que os seus corações sejam consolados, e estejam unidos em amor, e enriquecidos da plenitude da inteligência, para conhecimento do mistério de Deus e Pai, e de Cristo, Em quem estão escondidos todos os tesouros da sabedoria e da ciência."
Colossenses 2:2,3

Referências:

José Carlos Macoratti