[Spec] AppBar

[jsuarezruiz]

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 xamarin/Xamarin.Forms#10774

[giuseppenovielli]

Please manage and, i think prioritize, support for the standard navigation page!!
Not all use Shell's navigation, mostly Enterprise Application or Big Application based on Xamarin Forms!!

Thanks!!

[bmacombe]

Yes, I would love to use this control and have apps pre Shell that would be difficult to convert to shell

[PureWeen]

It's just a composite Forms View

You could use it as a cell for a CollectionView and have an infinite number of AppBars

[MhAllan]

Why not View type instead of String in things like: BackButtonTitle?

[PureWeen]

These are moving to Xamarin Community Toolkit for now

[Cfun1]

Link where it moved: xamarin/XamarinCommunityToolkit#545