IndicatorView

Parcourir l’exemple

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) IndicatorView est 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 .NET MAUI 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, 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 mises en forme.

Créer un IndicatorView

Pour ajouter des indicateurs à une page, créez un IndicatorView objet et définissez ses IndicatorColor propriétés.SelectedIndicatorColor En outre, définissez la CarouselView.IndicatorView propriété sur le nom de l’objet IndicatorView .

L’exemple suivant montre comment créer un IndicatorView code XAML :

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</Grid>

Dans cet exemple, le IndicatorView rendu est affiché sous le CarouselView, avec un indicateur pour chaque élément du CarouselView. Le IndicatorView remplissage 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 actuel 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 d’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 IndicatorShape des membres d’énumération :

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

L’exemple suivant montre un IndicatorView paramètre configuré pour utiliser 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 un IndicatorView paramètre configuré pour afficher des 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 un IndicatorView paramètre configuré 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:

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="ionicons"
                       FontSize="12" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</Grid>

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

La capture d’écran suivante montre les indicateurs rendus à l’aide d’une icône de police :

Définir les états visuels

IndicatorView a un Selected état visuel qui peut être utilisé pour initier une modification visuelle à l’indicateur de 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>

    <Grid RowDefinitions="*,Auto">
        ...
        <IndicatorView x:Name="indicatorView"
                       Grid.Row="1"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="ionicons"
                           FontSize="12"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </Grid>
</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 :

Pour plus d’informations sur les états visuels, consultez États visuels.