[Spec] AppBar #10774
Description
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;
}