IndicatorView

Esplorare l'esempio

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) IndicatorView è un controllo che visualizza gli indicatori che rappresentano il numero di elementi e la posizione corrente in un CarouselViewoggetto :

IndicatorView definisce le proprietà seguenti:

• Count, di tipo int, il numero di indicatori.
• HideSingle, di tipo bool, indica se l'indicatore deve essere nascosto quando ne esiste solo uno. Il valore predefinito è true.
• IndicatorColor, di tipo Color, il colore degli indicatori.
• IndicatorSize, di tipo double, la dimensione degli indicatori. Il valore predefinito è 6,0.
• IndicatorLayout, di tipo Layout<View>, definisce la classe di layout usata per eseguire il rendering di IndicatorView. Questa proprietà è impostata da .NET MAUI e in genere non deve essere impostata dagli sviluppatori.
• IndicatorTemplate, di tipo DataTemplate, il modello che definisce l'aspetto di ogni indicatore.
• IndicatorsShape, di tipo IndicatorShape, la forma di ogni indicatore.
• ItemsSource, di tipo IEnumerable, raccolta per cui verranno visualizzati gli indicatori. Questa proprietà verrà impostata automaticamente quando la CarouselView.IndicatorView proprietà è impostata.
• MaximumVisible, di tipo int, il numero massimo di indicatori visibili. Il valore predefinito è int.MaxValue.
• Position, di tipo int, indice dell'indicatore attualmente selezionato. Questa proprietà usa un'associazione TwoWay . Questa proprietà verrà impostata automaticamente quando la CarouselView.IndicatorView proprietà è impostata.
• SelectedIndicatorColor, di tipo Color, il colore dell'indicatore che rappresenta l'elemento corrente in CarouselView.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Creare un indicatoreView

Per aggiungere indicatori a una pagina, creare un IndicatorView oggetto e impostarne IndicatorColor le proprietà e SelectedIndicatorColor . Impostare inoltre la CarouselView.IndicatorView proprietà sul nome dell'oggetto IndicatorView .

L'esempio seguente illustra come creare un oggetto IndicatorView in 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>

In questo esempio viene eseguito il IndicatorView rendering di sotto , CarouselViewcon un indicatore per ogni elemento nell'oggetto CarouselView. L'oggetto IndicatorView viene popolato con i dati impostando la CarouselView.IndicatorView proprietà sull'oggetto IndicatorView . Ogni indicatore è un cerchio grigio chiaro, mentre l'indicatore che rappresenta l'elemento corrente in CarouselView è grigio scuro.

Importante

L'impostazione della CarouselView.IndicatorView proprietà comporta l'associazione IndicatorView.Position di proprietà alla CarouselView.Position proprietà e l'associazione IndicatorView.ItemsSource di proprietà alla CarouselView.ItemsSource proprietà .

Cambia forma indicatore

La IndicatorView classe ha una IndicatorsShape proprietà che determina la forma degli indicatori. Questa proprietà può essere impostata su uno dei membri dell'enumerazione IndicatorShape :

• Circle specifica che le forme dell'indicatore saranno circolari. Questo è il valore predefinito per la proprietà IndicatorView.IndicatorsShape.
• Square indica che le forme dell'indicatore saranno quadrate.

L'esempio seguente mostra un oggetto IndicatorView configurato per l'uso degli indicatori quadrati:

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

Modificare le dimensioni dell'indicatore

La IndicatorView classe ha una IndicatorSize proprietà di tipo double, che determina le dimensioni degli indicatori in unità indipendenti dal dispositivo. Il valore predefinito di questa proprietà è 6,0.

L'esempio seguente mostra un oggetto IndicatorView configurato per visualizzare indicatori di dimensioni maggiori:

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

Limitare il numero di indicatori visualizzati

La IndicatorView classe ha una MaximumVisible proprietà di tipo int, che determina il numero massimo di indicatori visibili.

L'esempio seguente mostra un IndicatorView oggetto configurato per visualizzare un massimo di sei indicatori:

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

Definire l'aspetto dell'indicatore

L'aspetto di ogni indicatore può essere definito impostando la IndicatorView.IndicatorTemplate proprietà su :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>

Gli elementi specificati nell'oggetto DataTemplate definiscono l'aspetto di ogni indicatore. In questo esempio, ogni indicatore è un oggetto Label che visualizza un'icona del carattere.

Lo screenshot seguente mostra gli indicatori visualizzati usando un'icona del tipo di carattere:

Impostare gli stati di visualizzazione

IndicatorView ha uno Selected stato di visualizzazione che può essere usato per avviare una modifica visiva all'indicatore per la posizione corrente in IndicatorView. Un caso d'uso comune consiste VisualState nel modificare il colore dell'indicatore che rappresenta la posizione corrente:

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

In questo esempio, lo Selected stato di visualizzazione specifica che l'indicatore che rappresenta la posizione corrente verrà TextColor impostato su nero. In caso contrario, l'indicatore TextColor sarà grigio chiaro:

Per altre informazioni sugli stati di visualizzazione, vedere Stati di visualizzazione.