[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

[KennyDizi]

i love Transparent appbar

[GiampaoloGabba]

Do you plan this only for shell? It will be available for the standard navigation page?

[kcrg]

It's only spec, but... FINALLY something about transparent action bar.
I've been waiting for this all my life.

Add support for hiding action bar when scrolling, please.

[jsuarezruiz]

@GiampaoloGabba We have to review and complete more tests, but it could also work outside of Shell.
@kcrg Thanks for the feedback. We will review that possibility.

[andreinitescu]

Shell only forces the design to use Shell. There are a lot of existing apps which do not use Shell.

[GiampaoloGabba]

Shell only forces the design to use Shell. There are a lot of existing apps which do not use Shell.

Yupp and don't forget that still a lot of new apps do not use Shell (basically everyone using a MVVM Framework like Prism)

[Deepfreezed]

Support for app bar font icon with bubble text. Something like items in cart...

[d617617]

It is so good beacause most of modern app have Variable transparent appbar.,i had waited for it long time,finally...we will get item!

[KennyDizi]

We should add LeftToolbarItems and RightToolbarItems @jsuarezruiz

[KennyDizi]

It's only spec, but... FINALLY something about transparent action bar.
I've been waiting for this all my life.

Add support for hiding action bar when scrolling, please.

@jsuarezruiz it's a very good thing that we keep waiting for several years.

[Tommigun1980]

Please don't tie this to the Shell in any way. The Shell is a template for quite an antiquated app design that forces the usage of tabs, which are not relevant for a whole lot of apps. The AppBar (and any other Xamarin) feature should not have any dependencies to the Shell.
It would be very wasteful and quite destructive to the Xamarin community if new features are tied to it.

[PureWeen]

Please don't tie this to the Shell in any way.

it's not

The Shell is a template for quite an antiquated app design that forces the usage of tabs, which are not relevant for a whole lot of apps.

No it doesn't. You can structure the shell app to look like a single contenpage, a contentpage with a flyout, a flyout with tabs, etc..

Can you expand on antiquated?

[Tommigun1980]

Please don't tie this to the Shell in any way.

it's not

The Shell is a template for quite an antiquated app design that forces the usage of tabs, which are not relevant for a whole lot of apps.

No it doesn't. You can structure the shell app to look like a single contenpage, a contentpage with a flyout, a flyout with tabs, etc..

Can you expand on antiquated?

Sorry I meant flyout, not tabs. It's so heavily centered around that paradigm that it's not useful for much else than apps that gear towards a specific kind of ui with very limited customisation potential. Flyouts and tabs are of course a staple in a lot of apps, but the absolutely most visually appealing apps often don't use them at all. Heck, the shell's documentation itself says "Shell provides an opinionated navigation experience, based on flyouts and tabs". It's cool and all for those that use it, but building new features exclusively for the shell would be detrimental.

Good to hear the app bar is not for the shell only, as the initial specification made it look like it would be a shell only feature.

Thanks.

[jsuarezruiz]

We cut this Spec from the upcoming Forms releases in order to make additional room for the foundational improvements we need to focus on.

In order to still ship these controls sooner we are planning to move them to the XamarinCommunityToolkit. We have good momentum there ( insert contributor recruiting pitch ;) ) and I hope this will be a reasonable option during this transitional period.

Can follow and comment the Spec in .NET MAUI: dotnet/maui#152

[Tommigun1980]

We cut this Spec from the upcoming Forms releases in order to make additional room for the foundational improvements we need to focus on.

In order to still ship these controls sooner we are planning to move them to the XamarinCommunityToolkit. We have good momentum there ( insert contributor recruiting pitch ;) ) and I hope this will be a reasonable option during this transitional period.

Can follow and comment the Spec in .NET MAUI: dotnet/maui#152

I think this is the correct approach. The app bar is something that people can implement by themselves within the existing APIs if really needed, and would pretty much be a custom component. Xamarin.Forms serves best when it exposes any native functionality and does it as solidly and robustly as possible, while matching the feature set of the UWP XAML as closely as possible.

Thank you.

[domagojmedo]

@jsuarezruiz is this something that we can expect in XCT? I saw that TabView was moved there but this wasn't