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

Em dezembro de 2019 a Microsoft anunciou a versão 4.4 do Xamarin Forms com uma lista de novos recursos com destaque para o novo CarouselView.

Vejamos então apresentar os principais recursos deste novo controle que pode ser usado no lugar no CarouselPage.

Apresentando o novo CarouselView

O componente CarouselView é uma view usada para apresentar dados em um layout rolável, onde os usuários podem passar o dedo para percorrer uma coleção de itens. Por padrão, o CarouselView exibirá seus itens em uma orientação horizontal.

Atualmente (jan/2020) este recurso é experimental, e pode ser usado adicionando a linha de código a seguir na  classe AppDelegate no projeto iOS, e/ou na classe MainActivity no projeto Android, antes de chamar Forms.Init:


Forms.SetFlags("CarouselView_Experimental");

Embora o CarouselView compartilhe grande parte de sua implementação com o CollectionView este último é usado para apresentar listas de dados de qualquer tamanho, enquanto o CarouselView é usado para realçar informações em uma lista de tamanho limitado.

A exibição dos dados é definida usando as propriedades:

Existe a propriedade ItemsUpdatingScrollMode que representa o comportamento de rolagem quando novos itens são adicionados que pode ter os seguintes valores:

Assim para popular com dados um CarouselView basta definir a propriedade ItemsSource para qualquer coleção que implemente IEnumerable, como um arquivo XML, uma lista de objetos, etc.

Como exemplo vamos criar um projeto que exibe imagens a partir de uma lista de objetos.

Recursos usados:

Criando o projeto no Visual Studio 2019 Community

Abra o VS 2019 Community e clique em Create a New Project;

A seguir selecione :

Selecione o template:  Mobile App (Xamarin.Forms) e clique em Next;

A seguir informe o local e o nome do projeto : XF_Carousel1;

A seguir selecione o template Blank e as plataformas que deseja usar. Eu vou usar somente o Android:

Clique no botão OK.

Neste momento você deve atualizar a versão do seu Xamarin.Forms para 4.4:(Aproveite e atualize também o Xamarin.Essentials)

A seguir ative a utilização do componente CarouselView incluindo o código abaixo no arquivo App.xaml.cs :

public App()
{
    InitializeComponent(); 
    Device.SetFlags(new[] { 
        "CarouselView_Experimental" 
    } );
 
    MainPage = new MainPage();
}

Isso ativa globalmente o componente na sua aplicação.

Incluindo as imagens no projeto Android

Como vamos exibir imagens locais precisamos incluir as imagens na pasta Resources/drawable do projeto Android.

Expanda o projeto Android e inclua as imagens que deseja exibir nesta pasta:

Definindo o modelo de domínio e a view Model

Vamos criar uma pasta Model no projeto e nesta pasta criar a classe Foto que representa os dados de uma foto e define as propriedades Nome e ImagemUrl :

   public class Foto
    {
        public string Nome{get;set;}
        public string ImagemUrl{get;set;}
    }

Agora na mesma pasta crie a classe FotoViewModel onde vamos definir os dados que iremos exibir e usar a coleção ObservableCollection que enviará notificações de alteração para nossa interface.

using System.Collections.ObjectModel;
namespace XF_Carousel1.Model
{
    public class FotoViewModel
    {
        public ObservableCollection<Foto> fotos { get; private set; }
        public ObservableCollection<Foto> Fotos
        {
            get { return fotos; }
            set { fotos = value; }
        }
        public FotoViewModel()
        {
            Fotos = new ObservableCollection<Foto>()
            {
                new Foto() {  Nome="Andrônema", ImagemUrl="galaxia1.jpg" },
                new Foto() {  Nome="Via Láctea", ImagemUrl="galaxia2.jpg" },
                new Foto() {  Nome="Universo", ImagemUrl="galaxia3.jpg" },
                new Foto() {  Nome="Galáxia", ImagemUrl="galaxia4.jpg" },
                new Foto() {  Nome="Sombrero", ImagemUrl="galaxia5.jpg" }
            };
        }
    }
}

Definindo a interface no arquivo MainPage

Vamos definir a interface com o usuário usando o código XAML abaixo no arquivo MainPage.xaml:

<?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_Carousel1.MainPage">

    <Frame Margin="15" Padding="0" VerticalOptions="StartAndExpand"
           BackgroundColor="AntiqueWhite" CornerRadius="5">
        <StackLayout>

            <StackLayout VerticalOptions="Center"
                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                <Label Margin="10,10,10,10" Text="Fotos" FontAttributes="Bold" />

            </StackLayout>

            <CarouselView ItemsSource="{Binding Fotos}" x:Name="fotosCarousel">
                <CarouselView.ItemTemplate>
                    <DataTemplate >
                        <StackLayout>

                            <Frame HasShadow="True"
                               BorderColor="DarkGray"
                               CornerRadius="5"
                               Margin="10"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">

                                <StackLayout>
                                    <Image Source="{Binding ImagemUrl}"
                                          HeightRequest="400"
                                          WidthRequest="400"/>
                                    <Label Text="{Binding Nome}" HorizontalOptions="Center" />
                                </StackLayout>

                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

        </StackLayout>
    </Frame>
</ContentPage>
 

Estou usando um Frame para criar uma 'moldura' e definindo a propriedade ItemsSource do CarouselView para vincular dos dados com nossa propriedade Fotos : ItemsSource="{Binding Fotos}"

A seguir usamos um ItemTemplate e um DataTemplate e aplicamos um Frame onde estamos exibindo as imagens e o nome no CarouselView.

Precisamos agora definir a fonte de dados a partir da nossa view model FotoViewModel no arquivo MainPage.xaml.cs :

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new FotoViewModel();
        }
    }

Agora é só alegria...

Executando o projeto no Emulador Android teremos:

Note que por padrão a rolagem é horizontal, mas podemos alterar a rolagem para vertical. Para controlar o leiaute podemos usar as seguintes propriedades:

Usando a enumeração ItemsLayoutOrientation podemos definir os seguintes valores:

Por padrão, cada item em um CarouselView não possui nenhum espaço vazio ao redor. Esse comportamento pode ser alterado definindo propriedades no layout dos itens usados pelo CarouselView.

Podemos alterar isso usando a propriedade LinearItemsLayout.ItemSpacing pode ser definida como um valor que representa o espaço vazio ao redor de cada item.

Vamos alterar o código do arquivo MainPage.xaml incluindo as linhas de código em azul:

<?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_Carousel1.MainPage">
    <Frame Margin="15" Padding="0" VerticalOptions="StartAndExpand" 
           BackgroundColor="AntiqueWhite" CornerRadius="5">
        <StackLayout>
            <StackLayout VerticalOptions="Center" 
                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                <Label Margin="10,10,10,10" Text="Fotos" FontAttributes="Bold" />
           </StackLayout>
            <CarouselView ItemsSource="{Binding Fotos}" x:Name="fotosCarousel" PeekAreaInsets="120">
                <CarouselView.ItemsLayout>
                    <LinearItemsLayout Orientation="Vertical" ItemSpacing="20"/>
                </CarouselView.ItemsLayout>
                <CarouselView.ItemTemplate>
                    <DataTemplate >
                        <StackLayout>
                            <Frame HasShadow="True"
                               BorderColor="DarkGray"
                               CornerRadius="5"
                               Margin="10"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">
                                <StackLayout>
                                    <Image Source="{Binding ImagemUrl}" HeightRequest="400" WidthRequest="400"/>
                                    <Label Text="{Binding Nome}" HorizontalOptions="Center" />
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
        </StackLayout>
    </Frame>
</ContentPage>

Com este código teremos uma rolagem vertical e agora os itens adjacentes estarão parcialmentes expostos na tela e agora estamos usando um espaçamento de 20 entre os itens.

Agora o resultado obtido será o seguinte:

Além disso podemos definir a opção de Layout da direita para a esquerda definindo sua propriedade FlowDirection como RightToLeft.

No entanto, a propriedade FlowDirection idealmente deve ser definida em um layout de página ou raiz, o que faz com que todos os elementos da página ou layout de raiz respondam à direção do fluxo :

<?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"
             FlowDirection="RightToLeft"
             x:Class="XF_Carousel1.MainPage">

  <Frame Margin="15" Padding="0" VerticalOptions="StartAndExpand"
           BackgroundColor="AntiqueWhite" CornerRadius="5">
        <StackLayout>
            <StackLayout VerticalOptions="Center"
                         HorizontalOptions="FillAndExpand" Orientation="Horizontal">
     ...
     ...
 </Frame>
</ContentPage>

No próximo artigo vamos continuar apresentando o componente IndicatorView.

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

"E Jesus clamou, e disse: Quem crê em mim, crê, não em mim, mas naquele que me enviou.
E quem me vê a mim, vê aquele que me enviou.
Eu sou a luz que vim ao mundo, para que todo aquele que crê em mim não permaneça nas trevas."
João 12:44-46

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 ?

Referências:

José Carlos Macoratti