TabView

Wir können Tabs mit Shell haben. Was passiert jedoch, wenn wir innerhalb eines bestimmten Abschnitts verschachtelte Registerkarten haben möchten (Beispiel: Raster)?, _was ist, wenn wir jede Registerkarte vollständig anpassen möchten?_. In diesen Fällen bräuchten wir bisher einen benutzerdefinierten Renderer...

Die TabView ist eine Möglichkeit, eine Reihe von Registerkarten und deren jeweiliger Inhalt anzuzeigen. TabView ist nützlich, um mehrere Inhalte anzuzeigen und einem Benutzer die Möglichkeit zu geben, fast alles anzupassen.

HINWEIS : TabView ist eine plattformübergreifende Ansicht , die übernimmt, wenn native Registerkarten an ihre Grenzen stoßen, z.

API

Als nächstes eine Liste mit den TabView-Eigenschaften, -Ereignissen und -Visualstates.

Eigenschaften

TabView-Eigenschaften

| Eigentum | Typ | Beschreibung |
|------------|:------------:|:------------:|
| TabItemsSource | IEzählbar | Eine Auflistung, die zum Generieren der Registerkartenelemente der TabView verwendet wird. |
| TabViewItemDataTemplate | Datenvorlage | die Vorlage, die die Registerkartenansicht verwendet, um die Kopfzeilen der Registerkartenelemente zu generieren. |
| TabContentDataTemplate | Datenvorlage | Die Vorlage, die die Registerkartenansicht verwendet, um den Inhalt von Registerkartenelementen zu generieren. |
| Iszyklisch | Bool | Aktivieren oder deaktivieren Sie die zyklische Registerkartennavigation. |
| IsLazy | Bool | Aktivieren oder deaktivieren Sie das Laden von Lazy-Tabs. |
| AusgewählterIndex | Int | Ruft die aktuell ausgewählte Registerkarte ab oder legt diese fest. Standard ist 0. |
| TabStrip-Platzierung | TabStrip-Platzierung | Die TabStrip-Platzierung (oben oder unten). |
| TabStripHintergrund | Pinsel | Der TabStrip-Hintergrund. |
| TabIndikatorBrush | Pinsel | Der TabIndikator-Hintergrund. |
| TabIndikatorHöhe | doppelt | Die TabIndikator-Höhe. |
| TabIndikatorBreite | doppelt | Die TabIndikator-Breite. |
| TabIndikatorPlatzierung | TabIndikatorPlatzierung | |
| TabIndikatorAnsicht | Ansicht | Der TabIndikator-Inhalt. |
| TabInhaltHintergrund | Pinsel | Der Hintergrund des Tab-Inhalts. |
| TabContentHeight | Doppel | Die Höhe des Tab-Inhalts. |
| TabStripHeight | Doppel | Die TabStrip-Höhe. |
| TabContentHeight | Doppel | Die Höhe des Tab-Inhalts. |
| HasTabStripShadow | Bool | Blendet den TabStrip-Schatteneffekt ein oder aus. |
| IsTabTransitionEnabled | Bool | Aktivieren oder deaktivieren Sie den Übergang zwischen Registerkarten. |
| IstSwipeEnabled | Bool | Aktivieren oder deaktivieren Sie die Wischgeste. |

TabViewItem-Eigenschaften

| Eigentum | Typ | Beschreibung |
|------------|:------------:|:------------:|
| Text | Zeichenfolge | Der Text der Registerkarte. |
| Textfarbe | Farbe | Die Textfarbe der Registerkarte. |
| TextColorSelected | Farbe | Die Textfarbe der ausgewählten Registerkarte. |
| Schriftgröße | Schriftgröße | Die im Tab-Text verwendete Schriftgröße. |
| FontSizeSelected | Schriftgröße | Die in der ausgewählten Registerkarte verwendete Schriftgröße. |
| FontFamily | Zeichenfolge | Die in der Registerkarte verwendete Schriftfamilie. |
| FontFamilySelected | Zeichenfolge | Die in der ausgewählten Registerkarte verwendete Schriftfamilie. |
| Schriftattribute | Schriftattribute | Die in der Registerkarte verwendeten Schriftattribute. |
| FontAttributesSelected | Schriftattribute | Die in der ausgewählten Registerkarte verwendeten Schriftattribute. |
| Symbol | Bildquelle | Das Symbol der Registerkarte. |
| IconAusgewählt | Bildquelle | Die als Symbol in der ausgewählten Registerkarte verwendete ImageSource. |
| Inhalt | Ansicht | Der Inhalt der Registerkarte. Ist View, kann alles als Inhalt verwenden. |
| BadgeText | Bool | Der Badge-Text, der in der Registerkarte verwendet wird. |
| BadgeTextColor | Farbe | Die in der Registerkarte verwendete Badge-Textfarbe. |
| BadgeTextColorSelected | Farbe | Die Farbe des Badges, die in der ausgewählten Registerkarte verwendet wird. |
| AbzeichenHintergrundfarbe | Farbe | Die in der Registerkarte verwendete Badge-Farbe. |
| AbzeichenHintergrundFarbeAusgewählt | Farbe | Die Badge-Farbe, die in der ausgewählten Registerkarte verwendet wird. |
| IstAusgewählt | Bool | ein bool, das angibt, ob die Registerkarte ausgewählt ist oder nicht. |
| TapCommand | IBefehl | Befehl, der ausgeführt wird, wenn der Benutzer auf eine Registerkarte tippt. |
| TapCommandParameter | Objekt | Der Tap-Befehlsparameter. |

Veranstaltungen

TabView-Ereignisse

| Veranstaltung | Beschreibung |
|------------|:-------------:|
| AuswahlGeändert | Ereignis, das ausgelöst wird, wenn die ausgewählte Registerkarte geändert wird. |
| Gescrollt | Ereignis, das ausgelöst wird, wenn zwischen Registerkarten gewischt wird. |

TabViewItem-Ereignisse

| Veranstaltung | Beschreibung |
|------------|:-------------:|
| TabGetippt | Ereignis, das ausgelöst wird, wenn der Benutzer auf eine Registerkarte tippt. |

VisualStates

Der Visual State Manager (VSM) bietet eine strukturierte Möglichkeit, visuelle Änderungen an der Benutzeroberfläche aus Code vorzunehmen.
Das VSM führt das Konzept der visuellen Zustände ein. TabView kann je nach zugrunde liegendem Zustand mehrere unterschiedliche visuelle Erscheinungsbilder aufweisen.

TabView hat vier spezifische VisualStates :

• Aktueller TabVisualState
• NextTabVisualState
• ZurückTabVisualState
• DefaultTabVisualState

Szenarien

Sehen wir uns einige Beispiele für gängige Szenarien an.

Grundlegende Registerkarten

Sehen wir uns ein grundlegendes Beispiel an:

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

TabItemsSource

Verwenden von TabItemsSource (dynamische Registerkarten):

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

Benutzerdefinierte Registerkarten

Das Aussehen jeder Registerkarte kann angepasst werden:

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Zyklische Registerkarten

Möchten Sie zyklisch zwischen den Registerkarten navigieren?

<TabView
    IsCyclical="True">
    ...
</TabView>

Faules Laden

Lazy-Tab-Laden:

<TabView
    IsLazy="True">
    ...
</TabView>

Tab-Übergänge und TabViewItem-Animationen

Kann Xamarin.Forms-Animationen verwenden, um den Übergang zwischen den einzelnen Registerkarten anzupassen, die Registerkarte zu animieren, wenn sie angezeigt oder ausgeblendet wird, oder sogar das Abzeichen zu animieren, wenn sie angezeigt oder ausgeblendet wird.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Verwenden von VisualStates

Kann verschiedene visuelle Zustände verwenden, um die aktuelle Registerkarte, die nächste Registerkarte usw. anzupassen.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

Tabs mit C . erstellen

Sie können XAML oder C# verwenden, um die Benutzeroberfläche in Xamarin.Forms zu erstellen. Sehen wir uns an, wie wir mit C# Registerkarten erstellen würden.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

Verwenden von Stilen

Kann das Erscheinungsbild des Registerkarteninhalts, der Registerkartenleiste, des Registerkartenelements usw. mithilfe von XAML- Stilen oder CSS anpassen.

Verwenden von XAML:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

CSS verwenden:

.customTabItem {
    font-size: medium;
    text-color: red;
}

Schwierigkeit : Mittel

Mehr Informationen

Basierend auf https://github.com/xamarin/Xamarin.Forms/issues/10773