AppBar

An app bar consists of a toolbar and potentially other views. Expose one or more actions.

The main benefit of using the appbar is being able to customize everything. Customization options like:

• Custom app bar height.
• Include any content without restrictions or limitations (margins, size, etc.).
• Transparent appbar.
• Etc.

NOTE: AppBar is a cross-platform view that takes over when native navbar hit their limits, such as adding custom content, positioning with layouts, etc.

In Xamarin.Forms, the app bar are typically used in the Shell.AppBar property, which places the app bar as a fixed-height widget at the top of the screen.

API

Next, a list with the AppBar properties and events.

Properties

| Property | Type | Description |
|----------|:-------------:|:-------------:|
| Placement | AppBarPlacement | The AppBar placement (top or bottom). |
| BarHeight | double | Define the app bar height. |
| BarBackground | Brush | A brush that provides the background. |
| BarBackgroundImage | ImageSource | An ImageSource that provides the background. |
| BarTextColor | Color | The color used in the texts (title, etc.). |
| NavigationIcon | ImageSource | An ImageSource that provides the navigation icon (back button, etc). |
| BackButtonTitle | string | Define the app bar back button title. |
| BorderColor | Color | The app bar border color. |
| BorderThickness | Thickness | The appbar border width in every side. |
| FontFamily | string | The font family used in the app bar texts. |
| FontAttributes | FontAttributes | The font attributes used in the app bar texts. |
| FontSize | double | The font size used in the app bar texts. |
| TitleView | View | Display any Xamarin.Forms View in the app bar. |
| BackCommand | ICommand | Command executed navigating back. |
| BackCommandParameter | object | The command parameter used navigating back. |

Events

| Event | Description |
|----------|:-------------:|
| BackTapped | Event that is raised when the user navigate back. |

Scenarios

Let's see some samples covering common scenarios.

Simple app bar

Let's see a basic example:

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

Custom app bar

Customizing the appearance using a transparent bar with a custom height and custom content (TitleView).

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

Placement

A top app bar (default placement) displays navigation and actions at the top of mobile screens.

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

A bottom app bar displays navigation and actions at the bottom of mobile screens.

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

Using Styles

Can customize the appearance of the tab content, tab strip, tab item, etc. using XAML styles or CSS.

Using XAML:

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

Using CSS:

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

Difficulty : Medium

More information

Based on https://github.com/xamarin/Xamarin.Forms/issues/10774