Using the IndicatorView in Xamarin Forms

IndicatorView teams up with CarouselView to let users know which slide of a carousel they’re on. Today let’s learn how to use this tool!

One way to make our applications more fun and at the same time display more information without needing additional space is when we present it on the same page in a carousel.

The user experience in this case would be much better if we add positioning indicators to it. 🤔 For example, if we are viewing an album of images, it is very good for the user to see indicators that allow them to know the position of each image they are viewing. So, in this article, we’ll see how to achieve this with IndicatorView!

(Image obtained from Microsoft official documentation.)

What Is the IndicatorView?

This control allows us to display indicators to represent the total number and the current position of items in a CarouselView. It contains properties that are backed by BindableProperty objects, which allow us to use data bindings. It’s important to know that this control is available from Xamarin.Forms 4.4 on the iOS and Android platforms, and from 4.5 on the Universal Windows Platform.

⚠ If you want to know more information about CollectionView, you can visit the docs.

✔ Let’s Start Creating the IndicatorView

To start creating this control, it’s important to know about the structure required:

Code implementation:

<StackLayout>
    <CarouselView ItemsSource="{Binding Food}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- Here define the item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</StackLayout>

Let’s Learn Some of My Favorite Properties 💖

IndicatorView gives us a lot of properties that we can use to create amazing things. Let’s learn some of my favorites!

And finally, an example of adding these properties:

<IndicatorView x:Name="indicatorView" 
               IndicatorColor="Pink" 
               SelectedIndicatorColor="White" 
               HorizontalOptions="Center" 
               IndicatorsShape="Square"     
               IndicatorSize="18"
               MaximumVisible="6"
               .... Here you can add all the properties that you need..../>

Let’s Define the Indicator Appearance

To define the indicator elements, you just have to set the IndicatorView.IndicatorTemplateproperty to a DataTemplate. You can learn more about DataTemplate here.

In the following sample, the default image was changed to another called Star.jpg.

  <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Image Source="Star.jpg" />
                </DataTemplate>
  </IndicatorView.IndicatorTemplate> 

To achieve full implementation, just add the previous block into this:

<StackLayout>
    <CarouselView ItemsSource="{Binding Food}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="Black"
                   HorizontalOptions="Center">
        
        <!-- Here add the block explained above-->
     </IndicatorView>
</StackLayout>

Let’s Add Visual States

Visual States are very important—they help us to graphically identify any change made by a certain action. For example, in our Indicator View, we can highlight when an item is selected, either by means of a color or a size different from the others. This allows us to quickly identify where we are.

To develop this example, let’s explain step by step:

1. Create a style.

    <Style x:Key="IndicatorsStyle"
           TargetType="Label">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="TextColor"
                                    Value="Pink" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="TextColor"
                                    Value="Blue" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

2. Once you create the style, you just have to add a simple style, as in the same basic structure explained below:

    <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                   <Label Text="-" Style="{StaticResource IndicatorsStyle}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>

And Done! ✅

I hope this article has been helpful and that you apply what you have learned! 😍

Thanks for reading my article! 💚💕

References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview