Xamarin.Forms IndicatorView

Article
01/30/2024

Il IndicatorView s’agit d’un contrôle qui affiche les indicateurs qui représentent le nombre d’éléments et la position actuelle, dans un CarouselView:

IndicatorView définit les propriétés suivantes :

Count, de type int, le nombre d’indicateurs.
HideSingle, de type bool, indique si l’indicateur doit être masqué lorsqu’il n’existe qu’un seul. La valeur par défaut est true.
IndicatorColor, de type Color, couleur des indicateurs.
IndicatorSize, de type double, taille des indicateurs. La valeur par défaut est 6.0.
IndicatorLayout, de type Layout<View>, définit la classe de disposition utilisée pour afficher le IndicatorView. Cette propriété est définie par Xamarin.Forms, et n’a généralement pas besoin d’être définie par les développeurs.
IndicatorTemplate, de type DataTemplate, le modèle qui définit l’apparence de chaque indicateur.
IndicatorsShape, de type IndicatorShape, forme de chaque indicateur.
ItemsSource, de type IEnumerable, la collection pour laquelle les indicateurs seront affichés. Cette propriété est automatiquement définie lorsque la CarouselView.IndicatorView propriété est définie.
MaximumVisible, de type int, le nombre maximal d’indicateurs visibles. La valeur par défaut est int.MaxValue.
Position, de type int, l’index d’indicateur actuellement sélectionné. Cette propriété utilise une TwoWay liaison. Cette propriété est automatiquement définie lorsque la CarouselView.IndicatorView propriété est définie.
SelectedIndicatorColor, de type Color, couleur de l’indicateur qui représente l’élément actif dans le CarouselView.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et de style.

Créer un IndicateurView

L’exemple suivant montre comment instancier un IndicatorView en 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>

Dans cet exemple, le IndicatorView rendu est affiché sous le CarouselView, avec un indicateur pour chaque élément dans le CarouselView. Il IndicatorView est rempli avec des données en définissant la CarouselView.IndicatorView propriété sur l’objet IndicatorView . Chaque indicateur est un cercle gris clair, tandis que l’indicateur qui représente l’élément actif dans le CarouselView gris foncé.

Important

La définition de la CarouselView.IndicatorView propriété génère la IndicatorView.Position liaison de propriété à la CarouselView.Position propriété et la IndicatorView.ItemsSource liaison de propriété à la CarouselView.ItemsSource propriété.

Modifier la forme de l’indicateur

La IndicatorView classe a une IndicatorsShape propriété, qui détermine la forme des indicateurs. Cette propriété peut être définie sur l’un des membres d’énumération IndicatorShape :

Circle spécifie que les formes d’indicateur seront circulaires. C’est la valeur par défaut de la propriété IndicatorView.IndicatorsShape.
Square indique que les formes d’indicateur seront carrées.

L’exemple suivant montre une configuration permettant d’utiliser IndicatorView des indicateurs carrés :

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

Modifier la taille de l’indicateur

La IndicatorView classe a une IndicatorSize propriété de type double, qui détermine la taille des indicateurs dans les unités indépendantes de l’appareil. La valeur par défaut de cette propriété est 6.0.

L’exemple suivant montre une configuration permettant d’afficher des IndicatorView indicateurs plus volumineux :

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

Limiter le nombre d’indicateurs affichés

La IndicatorView classe a une MaximumVisible propriété de type int, qui détermine le nombre maximal d’indicateurs visibles.

L’exemple suivant montre une IndicatorView configuration pour afficher un maximum de six indicateurs :

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

Définir l’apparence de l’indicateur

L’apparence de chaque indicateur peut être définie en définissant la IndicatorView.IndicatorTemplate propriété sur un 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>

Éléments spécifiés dans la définition de l’apparence DataTemplate de chaque indicateur. Dans cet exemple, chaque indicateur est un Label indicateur qui affiche une icône de police.

Les captures d’écran suivantes montrent les indicateurs affichés à l’aide d’une icône de police :

Définir les états visuels

IndicatorView a un état visuel qui peut être utilisé pour lancer une Selected modification visuelle vers l’indicateur pour la position actuelle dans le IndicatorView. Un cas d’usage courant est VisualState de modifier la couleur de l’indicateur qui représente la position actuelle :

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

Dans cet exemple, l’état Selected visuel spécifie que l’indicateur qui représente la position actuelle aura sa TextColor valeur noire. Sinon, l’indicateur TextColor sera gris clair :

Screenshot of IndicatorView selected visual state

Pour plus d’informations sur les états visuels, consultez Xamarin.Forms Visual State Manager.