Xamarin Community Toolkit TabView

  • Artikel

Mit dem TabView Steuerelement kann der Benutzer eine Reihe von Registerkarten und deren Inhalt anzeigen. Dies TabView ist vollständig anpassbar, anders als die nativen Registerkartenleisten.

Syntax

Der folgende Code zeigt ein einfaches Beispiel für eine TabView Implementierung:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="Blue"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">

                <xct:TabViewItem
                    Icon="triangle.png"
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                    <Grid 
                        BackgroundColor="Gray">
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem
                    Icon="circle.png"
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </Grid>

</ContentPage>

Eigenschaften

Die folgenden Eigenschaften sind im TabView Objekt verfügbar:

Eigenschaft Typ BESCHREIBUNG
IsSwipeEnabled bool Aktivieren oder deaktivieren Sie die Wischengeste.
IsTabTransitionEnabled bool Aktivieren oder deaktivieren Sie den Übergang zwischen Registerkarten.
Selectedindex INT Ruft die aktuell ausgewählte Registerkarte ab oder legt sie fest. Standard ist 0.
TabContentBackgroundColor Color Der Hintergrund des Registerkarteninhalts.
TabContentDataTemplate DataTemplate Die Vorlage, die tabView verwendet, um den Inhalt von Registerkartenelementen zu generieren.
TabContentHeight double Die Registerkarteninhaltshöhe.
TabIndicatorColor Color Der TabIndicator-Hintergrund.
TabIndicatorHeight double Die TabIndicator-Höhe.
TabIndicatorPlacement TabIndicatorPlacement Die ausgewählte Registerkartenanzeigeplatzierung (oben, mitte oder unten).
TabIndicatorView View Der TabIndicator-Inhalt.
TabIndicatorWidth double Die TabIndicator-Breite.
TabItems ObservableCollection<TabViewItem> Eigenschaft, die die aktuellen Registerkartenelemente widerspiegelt.
TabItemsSource IList Eine Auflistung, die zum Generieren der TabView-Registerkartenelemente verwendet wird.
TabStripPlacement TabStripPlacement Die TabStrip-Platzierung (oben oder unten).
TabStripBackgroundColor Color Der Color TabStrip-Hintergrund. Dies kann nicht mit TabStripBackgroundViewverwendet werden.
TabStripBackgroundView View Die View Darstellung des TabStrip-Hintergrunds. Dies kann nicht mit TabStripBackgroundColorverwendet werden.
TabStripHeight double Die TabStrip-Höhe.
TabViewItemDataTemplate DataTemplate Die Vorlage, mit der tabView die Kopfzeile von Registerkartenelementen generiert wird.

Die folgenden Eigenschaften sind im TabViewItem Objekt verfügbar:

Eigenschaft Typ BESCHREIBUNG
BadgeBackgroundColor Color Die in der Registerkarte verwendete Signalfarbe.
BadgeBackgroundColorSelected Color Die in der ausgewählten Registerkarte verwendete Signalfarbe.
BadgeBorderColor Color Die in der Registerkarte verwendete Signalrahmenfarbe.
BadgeBorderColorSelected Color Die in der ausgewählten Registerkarte verwendete Signalrahmenfarbe.
BadgeText Zeichenfolge Der in der Registerkarte verwendete Signaltext.
BadgeTextColor Color Die in der Registerkarte verwendete Signaltextfarbe.
BadgeTextColorSelected Color Die in der ausgewählten Registerkarte verwendete Signaltextfarbe.
Inhalt View Der Inhalt der Registerkarte. Alles kann als Inhalt verwendet werden.
CurrentBadgeBackgroundColor Color Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt BadgeBackgroundColor
CurrentBadgeBorderColor Color Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt BadgeBorderColor
CurrentContent View Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt Content
CurrentFontAttributes FontAttributes Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt FontAttributes
CurrentFontFamily Zeichenfolge Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt FontFamily
CurrentFontSize double Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt FontSize
CurrentIcon ImageSource Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt Icon
CurrentTextColor Color Schreibgeschützte Eigenschaft, die die aktuell verwendete Eigenschaft widerspiegelt TextColor
FontAttributes FontAttributes Die schriftartenattribute, die auf der Registerkarte verwendet werden.
FontAttributesSelected FontAttributes Die Schriftartattribute, die auf der ausgewählten Registerkarte verwendet werden.
FontFamily Zeichenfolge Die Schriftartfamilie, die auf der Registerkarte verwendet wird.
FontFamilySelected Zeichenfolge Die Schriftartfamilie, die auf der ausgewählten Registerkarte verwendet wird.
FontSize double Der Schriftgrad, der im Registerkartentext verwendet wird.
FontSizeSelected double Der Schriftgrad, der auf der ausgewählten Registerkarte verwendet wird.
Symbol ImageSource Das Symbol der Registerkarte.
IconSelected ImageSource Die ImageSource, die als Symbol auf der ausgewählten Registerkarte verwendet wird.
Isselected bool Ein Bool, das angibt, ob die Registerkarte ausgewählt ist oder nicht.
TabAnimation ITabViewItemAnimation Die Übergangsanimation einer Registerkarte.
TabWidth double Die Breite eines Registerkartenelements
TapCommand ICommand Befehl, der ausgeführt wird, wenn der Benutzer auf eine Registerkarte tippt.
TapCommandParameter Objekt (object) Der Befehlsparameter "Tippen".
Text Zeichenfolge Der Registerkartentext.
TextColor Color Die Textfarbe der Registerkarte.
TextColorSelected Color Die Textfarbe der ausgewählten Registerkarte.

Ereignisse

Die folgenden Ereignisse sind für das TabView Objekt verfügbar:

Ereignis Typ BESCHREIBUNG
SelectionChanged TabSelectionChangedEventHandler Ereignis, das ausgelöst wird, wenn sich die ausgewählte Registerkarte geändert hat.
Gescrollt TabViewScrolledEventHandler Ereignis, das beim Wischen zwischen Registerkarten ausgelöst wird.

Die folgenden Ereignisse sind für das TabViewItem Objekt verfügbar:

Ereignis Typ BESCHREIBUNG
TabTapped TabTappedEventHandler Ereignis, das ausgelöst wird, wenn der Benutzer auf eine Registerkarte tippt.

Beispiel

TabView-Beispielquelle

Sie können dies in Aktion in der Xamarin Community Toolkit-Beispiel-App sehen.

API