Hoje vamos apresentar os recursos do novo controle IndicatorView 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 que já apresentamos no artigo anterior.

Além dele temos o componente IndicatorView que é utilizado junto com o CarouselView e que veremos neste artigo.

Apresentando o novo IndicatorView

O componente IndicatorlView é uma view que exibe os indicadores que representam o número de itens e a posição atual em uma CarouselView:

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("IndicatorView_Experimental");

Temos as seguintes propriedades definidas para este componente:

• Count, do tipo int, Indica o número de indicadores;
• HideSingle, do tipo bool, Indica se o indicador deve estar oculto quando apenas um existe. O valor padrão é true;
• IndicatorColor, do tipo Color, Representa a cor dos indicadores;
• IndicatorSize, do tipo double, Especifica o tamanho dos indicadores. O valor padrão é 6,0;
• IndicatorLayout, do tipo Layout<View>, Define a classe de layout usada para renderizar o IndicatorView;
• IndicatorTemplate, do tipo DataTemplate, Indica o modelo que define a aparência de cada indicador;
• IndicatorsShape, do tipo IndicatorShape, Define a forma de cada indicador;
• ItemsSource, do tipo IEnumerable, Define a coleção para a qual os indicadores serão exibidos. Será definida automaticamente quando a propriedade CarouselView.Indicatorview definida;
• MaximumVisible, do tipo int, Indica o número máximo de indicadores visíveis. O valor padrão é int.MaxValue;
• Position, do tipo int, Representa o índice do indicador selecionado no momento. Usa uma associação de TwoWay e será definida automaticamente quando a propriedade ItemsSourceBy for definida.
• SelectedIndicatorColor, do tipo Color, Especifica a cor do indicador que representa o item atual no CarouselView;

Como exemplo vamos usar o projeto criado no artigo anterior e incluir um IndicatorView vinculando-o ao CarouselView usado no projeto.

Incluindo um IndicatorView

Abra o projeto XF_Carousel1 criado no artigo anterior.

A seguir abra o arquivo MainPage.xaml e altere o seu código incluindo as linhas em azul conforme 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_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" />

                <IndicatorView x:Name="meuIndicatorView"
                   IndicatorColor="LightGray" 
                   SelectedIndicatorColor="Blue"    
                   IndicatorSize="20" 
                   VerticalOptions="Center" 
                   HorizontalOptions="CenterAndExpand"    
                   />

            </StackLayout>

            <CarouselView ItemsSource="{Binding Fotos}" IndicatorView="meuIndicatorView">
                <CarouselView.ItemsLayout>
                    <LinearItemsLayout Orientation="Vertical" />
                </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>

Neste código criamos um IndicatorView que é populado com dados definindos na propriedade IndicatorView para o objeto CarouselView. Cada indicador é um círculo cinza claro, enquanto o indicador que representa o item atual no CarouselView é da cor azul. (Note que estamos usando a rolagem na vertical)

Executando o projeto o resultado obtido será o seguinte:

Por padrão a forma do indicador é um círculo mas podemos usar a propriedade IndicatorsShape, que indica a forma dos indicadores. Essa propriedade pode ser definida como um dos membros de enumeração de IndicatorShape:

• Circle  : Especifica que as formas de indicador serão circulares. Este é o valor padrão da propriedade IndicatorView.IndicatorsShape;
• Square : Indica que as formas de indicador serão quadradas;

Exemplo de código para alterar a forma do indicador para quadrado:

...
<IndicatorView IndicatorsShape="Square"
               ItemsSourceBy="carouselView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

No próximo artigo vamos continuar abordando os novos controles da versão 4.4.

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

"Tendo sido, pois, justificados pela fé, temos paz com Deus, por nosso Senhor Jesus Cristo;
Pelo qual também temos entrada pela fé a esta graça, na qual estamos firmes, e nos gloriamos na esperança da glória de Deus."
Romanos 5:1,2

Referências:

• Seção VB .NET do Site Macoratti.net

• Super DVD .NET - A sua porta de entrada na plataforma .NET

• 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#

• Seção C# do site Macoratti.net

• Seção ASP .NET do site Macoratti .net

• Curso Básico VB .NET - Vídeo Aulas

• Curso C# Básico - Vídeo Aulas

• Curso Fundamentos da Programação Orientada a Objetos com VB .NET

• Macoratti .net | Facebook

• macoratti - YouTube

• Jose C Macoratti (@macorati) | Twitter

• Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net

• Xamarim - Desenvolvimento Multiplataforma com C# ... - Macoratti.net

• Xamarin - Apresentando Xamarin.Forms - 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

José Carlos Macoratti