Compartilhar via

Xamarin.Forms IndicatorView

  • Artigo

O IndicatorView é um controle que exibe indicadores que representam o número de itens e a posição atual, em um CarouselView:

Captura de tela de um CarouselView e IndicatorView, no iOS e Android

IndicatorView define as propriedades a seguir:

  • Count, do tipo int, o número de indicadores.
  • HideSingle, do tipo bool, indica se o indicador deve ser oculto quando apenas um existe. O valor padrão é true.
  • IndicatorColor, do tipo Color, a cor dos indicadores.
  • IndicatorSize, do tipo double, 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. Essa propriedade é definida por Xamarin.Forms, e normalmente não precisa ser definida pelos desenvolvedores.
  • IndicatorTemplate, do tipo DataTemplate, o modelo que define a aparência de cada indicador.
  • IndicatorsShape, do tipo IndicatorShape, a forma de cada indicador.
  • ItemsSource, do tipo IEnumerable, a coleção para a qual os indicadores serão exibidos. Essa propriedade será definida automaticamente quando a CarouselView.IndicatorView propriedade for definida.
  • MaximumVisible, do tipo int, o número máximo de indicadores visíveis. O valor padrão é int.MaxValue.
  • Position, do tipo int, o índice indicador atualmente selecionado. Essa propriedade usa uma TwoWay associação. Essa propriedade será definida automaticamente quando a CarouselView.IndicatorView propriedade for definida.
  • SelectedIndicatorColor, do tipo Color, a cor do indicador que representa o item atual no CarouselView.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

Criar um IndicatorView

O exemplo a seguir mostra como instanciar um IndicatorView em XAML:

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</StackLayout>

Neste exemplo, o IndicatorView é renderizado abaixo do CarouselView, com um indicador para cada item no CarouselView. O IndicatorView é preenchido com dados definindo a CarouselView.IndicatorView propriedade para o IndicatorView objeto. Cada indicador é um círculo cinza claro, enquanto o indicador que representa o item atual no CarouselView é cinza escuro.

Importante

A definição da CarouselView.IndicatorView propriedade resulta na vinculação da IndicatorView.Position propriedade à CarouselView.Position propriedade e na vinculação da IndicatorView.ItemsSource propriedade à CarouselView.ItemsSource propriedade.

Alterar a forma do indicador

A IndicatorView classe tem uma IndicatorsShape propriedade, que determina a forma dos indicadores. Essa propriedade pode ser definida como um dos IndicatorShape membros da enumeração:

  • Circle Especifica que as formas do indicador serão circulares. Este é o valor padrão da propriedade IndicatorView.IndicatorsShape.
  • Square indica que as formas do indicador serão quadradas.

O exemplo a seguir mostra um IndicatorView configurado para usar indicadores quadrados:

<IndicatorView x:Name="indicatorView"
               IndicatorsShape="Square"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

Alterar o tamanho do indicador

A IndicatorView classe tem uma IndicatorSize propriedade, do tipo double, que determina o tamanho dos indicadores em unidades independentes de dispositivo. O valor padrão dessa propriedade é 6.0.

O exemplo a seguir mostra um IndicatorView configurado para exibir indicadores maiores:

<IndicatorView x:Name="indicatorView"
               IndicatorSize="18" />

Limitar o número de indicadores exibidos

A IndicatorView classe tem uma MaximumVisible propriedade, do tipo int, que determina o número máximo de indicadores visíveis.

O exemplo a seguir mostra um IndicatorView configurado para exibir um máximo de seis indicadores:

<IndicatorView x:Name="indicatorView"
               MaximumVisible="6" />

Definir a aparência do indicador

A aparência de cada indicador pode ser definida definindo a IndicatorView.IndicatorTemplate propriedade como um DataTemplate:

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</StackLayout>

Os elementos especificados no DataTemplate definem a aparência de cada indicador. Neste exemplo, cada indicador é um Label que exibe um ícone de fonte.

As capturas de tela a seguir mostram indicadores renderizados usando um ícone de fonte:

Captura de tela de um IndicatorView modelo, no iOS e Android

Definir estados visuais

IndicatorView tem um Selected estado visual que pode ser usado para iniciar uma alteração visual no indicador para a posição atual no IndicatorView. Um caso de uso comum para isso VisualState é alterar a cor do indicador que representa a posição atual:

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="IndicatorLabelStyle"
               TargetType="Label">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <StackLayout>
        ...
        <IndicatorView x:Name="indicatorView"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </StackLayout>
</ContentPage>

Neste exemplo, o Selected estado visual especifica que o indicador que representa a posição atual terá seu TextColor definido como preto. Caso contrário, o TextColor indicador será cinza claro:

Captura de tela do estado visual selecionado do IndicatorView

Para obter mais informações sobre estados visuais, consulte Xamarin.Forms Visual State Manager.