![]() |
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:
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)
Colossenses 2:2,3
Referências:
Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
Super DVD C# - Recursos de aprendizagens e vídeo aulas para C#
Curso Fundamentos da Programação Orientada a
Objetos com VB .NET
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Criando sua primeira ... - Macoratti.net
Xamarin.Forms - Olá Mundo - Anatomia da aplicação - Macoratti.net
Xamarin Forms - Usando o plugin CarouselView - Macoratti
Xamarin Forms - Apresentando CollectionView - Macoratti
Xamarin Forms - CollectionView Básico - I - Macoratti