AppBar

Eine App-Leiste besteht aus einer Symbolleiste und möglicherweise anderen Ansichten. Zeigen Sie eine oder mehrere Aktionen an.

Der Hauptvorteil der Verwendung der Appbar besteht darin, alles anpassen zu können. Anpassungsoptionen wie:

• Benutzerdefinierte Höhe der App-Leiste.
• Fügen Sie beliebige Inhalte ohne Einschränkungen oder Beschränkungen (Ränder, Größe usw.) hinzu.
• Transparente App-Leiste.
• Usw.

HINWEIS : AppBar ist eine plattformübergreifende Ansicht , die übernimmt, wenn die native Navigationsleiste an ihre Grenzen stößt, wie z. B. das Hinzufügen benutzerdefinierter Inhalte, die Positionierung mit Layouts usw.

In Xamarin.Forms wird die App-Leiste normalerweise in der Shell.AppBar- Eigenschaft verwendet, die die App-Leiste als Widget mit fester Höhe oben auf dem Bildschirm platziert.

API

Als nächstes eine Liste mit den AppBar-Eigenschaften und -Ereignissen.

Eigenschaften

| Eigentum | Geben Sie | ein Beschreibung |
|----------|:-------------:|:-------------:|
| Platzierung | AppBarPlatzierung | Die Platzierung der AppBar (oben oder unten). |
| Balkenhöhe | doppelt | Definieren Sie die Höhe der App-Leiste. |
| BalkenHintergrund | Bürste | Ein Pinsel, der den Hintergrund bereitstellt. |
| BalkenHintergrundbild | Bildquelle | Eine ImageSource, die den Hintergrund bereitstellt. |
| BalkenTextFarbe | Farbe | Die in den Texten verwendete Farbe (Titel usw.). |
| NavigationsIcon | Bildquelle | Eine ImageSource, die das Navigationssymbol (Zurück-Schaltfläche usw.) bereitstellt. |
| ZurückButtonTitel | Zeichenfolge | Definieren Sie den Titel der Zurück-Schaltfläche der App-Leiste. |
| Rahmenfarbe | Farbe | Die Rahmenfarbe der App-Leiste. |
| Grenzdicke | Dicke | Die Rahmenbreite der Appbar auf jeder Seite. |
| Schriftfamilie | Zeichenfolge | Die Schriftfamilie, die in den Texten der App-Leiste verwendet wird. |
| Schriftattribute | Schriftattribute | Die Schriftartattribute, die in den Texten der App-Leiste verwendet werden. |
| Schriftgröße | doppelt | Die in den Texten der App-Leiste verwendete Schriftgröße. |
| Titelansicht | Anzeigen | Zeigen Sie eine beliebige Xamarin.Forms-Ansicht in der App-Leiste an. |
| ZurückBefehl | IBefehl | Befehl beim Zurücknavigieren ausgeführt. |
| ZurückBefehlsparameter | Objekt | Der Befehlsparameter, der zum Zurücknavigieren verwendet wird. |

Veranstaltungen

| Veranstaltung | Beschreibung |
|----------|:-------------:|
| BackTapped | Ereignis, das ausgelöst wird, wenn der Benutzer zurücknavigiert. |

Szenarien

Sehen wir uns einige Beispiele an, die gängige Szenarien abdecken.

Einfache App-Leiste

Sehen wir uns ein einfaches Beispiel an:

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Benutzerdefinierte App-Leiste

Anpassen des Erscheinungsbilds mithilfe einer transparenten Leiste mit benutzerdefinierter Höhe und benutzerdefiniertem Inhalt (TitleView).

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

Platzierung

Eine obere App-Leiste (Standardplatzierung) zeigt Navigation und Aktionen oben auf mobilen Bildschirmen an.

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Eine untere App-Leiste zeigt Navigation und Aktionen am unteren Rand der mobilen Bildschirme an.

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Verwenden von Stilen

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

Verwendung von XAML:

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

Verwendung von CSS:

.appBarStyle {
  background: transparent;
  height: 120px;
}

Schwierigkeit: Mittel

Mehr Informationen

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