Xamarin.Forms IndicatorView

Das Beispiel herunterladen

Ist IndicatorView ein Steuerelement, das Indikatoren anzeigt, die die Anzahl der Elemente und die aktuelle Position in einem CarouselViewdarstellen:

IndicatorView definiert die folgenden Eigenschaften:

• Count, vom Typ int, die Anzahl der Indikatoren.
• HideSinglegibt an bool, ob der Indikator ausgeblendet werden soll, wenn nur einer vorhanden ist. Standardwert: true.
• IndicatorColor, vom Typ Color, die Farbe der Indikatoren.
• IndicatorSize, vom Typ double, die Größe der Indikatoren. Der Standardwert ist 6.0.
• IndicatorLayoutvom Typ Layout<View>definiert die Layoutklasse, die zum Rendern von IndicatorViewverwendet wird. Diese Eigenschaft wird durch Xamarin.Formsfestgelegt und muss in der Regel nicht von Entwicklern festgelegt werden.
• IndicatorTemplate, vom Typ DataTemplate, die Vorlage, die die Darstellung der einzelnen Indikatoren definiert.
• IndicatorsShape, vom Typ IndicatorShape, die Form jedes Indikators.
• ItemsSource, vom Typ IEnumerable, die Auflistung, für die Indikatoren angezeigt werden. Diese Eigenschaft wird automatisch festgelegt, wenn die CarouselView.IndicatorView -Eigenschaft festgelegt wird.
• MaximumVisible, vom Typ int, die maximale Anzahl sichtbarer Indikatoren. Standardwert: int.MaxValue.
• Position, vom Typ int, der aktuell ausgewählte Indikatorindex. Diese Eigenschaft verwendet eine TwoWay Bindung. Diese Eigenschaft wird automatisch festgelegt, wenn die CarouselView.IndicatorView -Eigenschaft festgelegt wird.
• SelectedIndicatorColor, vom Typ Color, die Farbe des Indikators, der das aktuelle Element im CarouselViewdarstellt.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Erstellen einer IndicatorView

Das folgende Beispiel zeigt, wie ein IndicatorView in XAML instanziieren:

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

In diesem Beispiel wird der IndicatorView unter CarouselViewgerendert, mit einem Indikator für jedes Element im CarouselView. Der IndicatorView wird mit Daten aufgefüllt, indem die CarouselView.IndicatorView -Eigenschaft auf das IndicatorView -Objekt festgelegt wird. Jeder Indikator ist ein hellgrauer Kreis, während der Indikator, der das aktuelle Element im CarouselView darstellt, dunkelgrau ist.

Wichtig

Das Festlegen der CarouselView.IndicatorView -Eigenschaft führt zu der IndicatorView.Position -Eigenschaftsbindung an die CarouselView.Position -Eigenschaft und der IndicatorView.ItemsSource -Eigenschaftsbindung an die CarouselView.ItemsSource -Eigenschaft.

Indikatorform ändern

Die IndicatorView -Klasse verfügt über eine IndicatorsShape -Eigenschaft, die die Form der Indikatoren bestimmt. Diese Eigenschaft kann auf eines der IndicatorShape Enumerationsmber festgelegt werden:

• Circle gibt an, dass die Indikatorformen kreisförmig sind. Dies ist der Standardwert der IndicatorView.IndicatorsShape-Eigenschaft.
• Square gibt an, dass die Indikatorformen quadratisch sind.

Im folgenden Beispiel wird ein IndicatorView für die Verwendung quadratischer Indikatoren konfiguriert:

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

Ändern der Indikatorgröße

Die IndicatorView -Klasse verfügt über eine IndicatorSize -Eigenschaft vom Typ double, die die Größe der Indikatoren in geräteunabhängigen Einheiten bestimmt. Der Standardwert dieser Eigenschaft ist 6.0.

Das folgende Beispiel zeigt einen IndicatorView , der für die Anzeige größerer Indikatoren konfiguriert ist:

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

Begrenzen der Anzahl der angezeigten Indikatoren

Die IndicatorView -Klasse verfügt über eine MaximumVisible -Eigenschaft vom Typ int, die die maximale Anzahl sichtbarer Indikatoren bestimmt.

Das folgende Beispiel zeigt eine IndicatorView konfigurierte, um maximal sechs Indikatoren anzuzeigen:

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

Definieren der Anzeigedarstellung

Die Darstellung jedes Indikators kann definiert werden, indem Sie die IndicatorView.IndicatorTemplate -Eigenschaft auf einen DataTemplatefestlegen:

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

Die in DataTemplate angegebenen Elemente definieren die Darstellung der einzelnen Indikatoren. In diesem Beispiel ist jeder Indikator ein Label Zeichen, das ein Schriftartensymbol anzeigt.

Die folgenden Screenshots zeigen Indikatoren, die mithilfe eines Schriftartsymbols gerendert werden:

Festlegen von visuellen Zuständen

IndicatorView verfügt über einen Selected visuellen Zustand, der verwendet werden kann, um eine visuelle Änderung des Indikators für die aktuelle Position in der IndicatorViewzu initiieren. Ein gängiger Anwendungsfall hierfür VisualState ist das Ändern der Farbe des Indikators, der die aktuelle Position darstellt:

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

In diesem Beispiel gibt der Selected visuelle Zustand an, dass der Indikator, der die aktuelle Position darstellt, auf schwarz festgelegt ist TextColor . Andernfalls ist der TextColor des Indikators hellgrau:

Weitere Informationen zu visuellen Zuständen finden Sie unter Xamarin.Forms: Visual State-Manager.

Verwandte Links

• IndicatorView (Beispiel)
• Xamarin.Forms CarouselView
• Xamarin.Forms: Visual State-Manager