Xamarin.FormsIndikator Ansicht IndicatorView

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Das IndicatorView -Steuerelement ist ein Steuerelement, das Indikatoren anzeigt, die die Anzahl der Elemente und die aktuelle Position in einem darstellen CarouselView :The IndicatorView is a control that displays indicators that represent the number of items, and current position, in a CarouselView:

Screenshot von "carouselview" und "indikatorview" unter IOS und AndroidScreenshot of a CarouselView and IndicatorView, on iOS and Android

IndicatorView definiert die folgenden Eigenschaften:IndicatorView defines the following properties:

  • Count, vom Typ int , die Anzahl der Indikatoren.Count, of type int, the number of indicators.
  • HideSingleGibt an, bool ob der Indikator ausgeblendet werden soll, wenn nur ein solcher vorhanden ist.HideSingle, of type bool, indicates whether the indicator should be hidden when only one exists. Der Standardwert ist true.The default value is true.
  • IndicatorColor, vom Typ Color , die Farbe der Indikatoren.IndicatorColor, of type Color, the color of the indicators.
  • IndicatorSize, vom Typ double , die Größe der Indikatoren.IndicatorSize, of type double, the size of the indicators. Der Standardwert ist 6,0.The default value is 6.0.
  • IndicatorLayout``Layout<View>definiert die zum Rendering von verwendete Layoutklasse des Typs IndicatorView .IndicatorLayout, of type Layout<View>, defines the layout class used to render the IndicatorView. Diese Eigenschaft wird von festgelegt Xamarin.Forms und muss in der Regel nicht von Entwicklern festgelegt werden.This property is set by Xamarin.Forms, and does not typically need to be set by developers.
  • IndicatorTemplate, vom Typ DataTemplate , die Vorlage, die die Darstellung der einzelnen Indikatoren definiert.IndicatorTemplate, of type DataTemplate, the template that defines the appearance of each indicator.
  • IndicatorsShape, vom Typ IndicatorShape , die Form jedes Indikators.IndicatorsShape, of type IndicatorShape, the shape of each indicator.
  • ItemsSource, vom Typ IEnumerable , der Auflistung, für die Indikatoren angezeigt werden.ItemsSource, of type IEnumerable, the collection that indicators will be displayed for. Diese Eigenschaft wird automatisch festgelegt, wenn die- CarouselView.IndicatorView Eigenschaft festgelegt wird.This property will automatically be set when the CarouselView.IndicatorView property is set.
  • MaximumVisible, vom Typ int , die maximale Anzahl sichtbarer Indikatoren.MaximumVisible, of type int, the maximum number of visible indicators. Der Standardwert ist int.MaxValue.The default value is int.MaxValue.
  • Position, vom Typ int , der derzeit ausgewählte Indikator Index.Position, of type int, the currently selected indicator index. Diese Eigenschaft verwendet eine- TwoWay Bindung.This property uses a TwoWay binding. Diese Eigenschaft wird automatisch festgelegt, wenn die- CarouselView.IndicatorView Eigenschaft festgelegt wird.This property will automatically be set when the CarouselView.IndicatorView property is set.
  • SelectedIndicatorColor, vom Typ Color , die Farbe des Indikators, der das aktuelle Element in der darstellt CarouselView .SelectedIndicatorColor, of type Color, the color of the indicator that represents the current item in the CarouselView.

Diese Eigenschaften werden von Objekten unterstützt BindableProperty . Dies bedeutet, dass Sie Ziele von Daten Bindungen und formatiert sein können.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Erstellen einer "indikatorview"Create an IndicatorView

Im folgenden Beispiel wird gezeigt, wie ein IndicatorView in XAML instanziiert wird:The following example shows how to instantiate an IndicatorView in 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>

In diesem Beispiel wird der unter IndicatorView dem gerendert CarouselView , mit einem Indikator für jedes Element in der CarouselView .In this example, the IndicatorView is rendered beneath the CarouselView, with an indicator for each item in the CarouselView. Die IndicatorView wird mit Daten aufgefüllt, indem die- CarouselView.IndicatorView Eigenschaft auf das-Objekt festgelegt wird IndicatorView .The IndicatorView is populated with data by setting the CarouselView.IndicatorView property to the IndicatorView object. Jeder Indikator ist ein heller grauer Kreis, während der Indikator, der das aktuelle Element in darstellt, CarouselView dunkelgrau ist.Each indicator is a light gray circle, while the indicator that represents the current item in the CarouselView is dark gray.

Wichtig

CarouselView.IndicatorViewWenn Sie die-Eigenschaft festlegen IndicatorView.Position , wird die-Eigenschaft an die-Eigenschaft gebunden CarouselView.Position , und die-Eigenschaft wird IndicatorView.ItemsSource an die- CarouselView.ItemsSource Eigenschaft gebunden.Setting the CarouselView.IndicatorView property results in the IndicatorView.Position property binding to the CarouselView.Position property, and the IndicatorView.ItemsSource property binding to the CarouselView.ItemsSource property.

Form "Indikator ändern"Change indicator shape

Die- IndicatorView Klasse verfügt über eine- IndicatorsShape Eigenschaft, mit der die Form der Indikatoren bestimmt wird.The IndicatorView class has an IndicatorsShape property, which determines the shape of the indicators. Diese Eigenschaft kann auf einen der Enumerationsmember festgelegt werden IndicatorShape :This property can be set to one of the IndicatorShape enumeration members:

  • CircleGibt an, dass die Indikator Formen zirkulär sein werden.Circle specifies that the indicator shapes will be circular. Dies ist der Standardwert der IndicatorView.IndicatorsShape-Eigenschaft.This is the default value of the IndicatorView.IndicatorsShape property.
  • SquareGibt an, dass die Indikator Formen quadratisch sind.Square indicates that the indicator shapes will be square.

Das folgende Beispiel zeigt einen IndicatorView , der für die Verwendung von quadratischen Indikatoren konfiguriert ist:The following example shows an IndicatorView configured to use square indicators:

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

Indikator Größe ändernChange indicator size

Die- IndicatorView Klasse verfügt über eine- IndicatorSize Eigenschaft vom Typ double , mit der die Größe der Indikatoren in geräteunabhängigen Einheiten bestimmt wird.The IndicatorView class has an IndicatorSize property, of type double, which determines the size of the indicators in device-independent units. Der Standardwert dieser Eigenschaft ist 6,0.The default value of this property is 6.0.

Das folgende Beispiel zeigt einen IndicatorView , der für die Anzeige größerer Indikatoren konfiguriert ist:The following example shows an IndicatorView configured to display larger indicators:

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

Anzahl der angezeigten Indikatoren begrenzenLimit the number of indicators displayed

Die- IndicatorView Klasse verfügt über eine- MaximumVisible Eigenschaft vom Typ int , die die maximale Anzahl der sichtbaren Indikatoren bestimmt.The IndicatorView class has a MaximumVisible property, of type int, which determines the maximum number of visible indicators.

Das folgende Beispiel zeigt einen IndicatorView , der so konfiguriert ist, dass maximal sechs Indikatoren angezeigt werden:The following example shows an IndicatorView configured to display a maximum of six indicators:

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

Indikator Darstellung definierenDefine indicator appearance

Die Darstellung der einzelnen Indikatoren kann definiert werden, indem die-Eigenschaft auf festgelegt wird IndicatorView.IndicatorTemplate DataTemplate :The appearance of each indicator can be defined by setting the IndicatorView.IndicatorTemplate property to a DataTemplate:

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="Black"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Image Source="{FontImage &#xf30c;, FontFamily={OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</StackLayout>

Die in der angegebenen Elemente DataTemplate definieren die Darstellung der einzelnen Indikatoren.The elements specified in the DataTemplate define the appearance of each indicator. In diesem Beispiel ist jeder Indikator ein Image , der ein Schriftart Symbol mithilfe der FontImage Markup Erweiterung anzeigt.In this example, each indicator is an Image that displays a font icon using the FontImage markup extension.

Die folgenden Screenshots zeigen Indikatoren, die mithilfe eines Schriftart Symbols gerendert werden:The following screenshots show indicators rendered using a font icon:

[![Screenshot einer Vorlagen basierten Anzeige Ansicht unter IOS und Android](indicatorview-images/templated.png "Vorlagenbasierte "indikatorview"")](indicatorview-images/templated-large.png#lightbox "Vorlagenbasierte "indikatorview"")Screenshot of a templated IndicatorView, on iOS and Android

Weitere Informationen zur FontImage Markup Erweiterung finden Sie unter fontimage Markup Extension.For more information about the FontImage markup extension, see FontImage markup extension.