Allows the developer to customize the look & feel of the top bar of the application.
The Class of an Application Bar can be changed at runtime using the Class property of the Application Bar Control.

Properties

  • Background Color - Sets a color for the background of the Bar.
    • On iOS 7, the background color has transparency by default. If you want no transparency, you need to set the background color with alpha = 0.
  • Background Image - Sets an image for the background of the Bar. See sample
  • Status Bar Color - Sets a color for the background of the Status Bar.
    • On Android 5 or greater, we can set the color for the status bar. The guidelines of Material Design indicates that "toolbars and larger color blocks should use the primary 500 color, which should be the main color of your app. The status bar should be the darker 700 tint of your primary color".
    • On IOS this property is not taken into account. 
  • Title Image - Sets an image to show instead of the title
  • Icon - Sets an image of the image shown at the left of the title (only Android)
  • Forecolor - Sets a color for the title (if title image is not set)
  • Font - Sets fonts properties for the title (if title image is not set)
  • Default Button Class - Class of type button that will be used for the buttons on the Application Bar
  • Back Button Class - Button class type that will be used for the back button
  • Back Button Image - Image that will be shown where the back button appears
  • Back Button Text - Text that will be shown where the back button appears
     

Samples

Application Bars with BackgroundImage - iPhone

Sample ApplicationBars iOs

Application Bars with Backgroundcolor - Android

Application Bar with backgrondcolor - Android
 

Standard Size for Android

Default 48 dip
Large portrait 48 dip
Large portrait mdpi 56 dip
Large landscape 40 dip
XLarge 56 dip

For more information click here.
 

Standard Size for iOS

The high is 44 dip, except in iPhone landscape that is 32 dip.
In retina screens are double pixels, 88 and 64 respectively.

For more information, click here.
 

Availability

Android Limitations

  • For the "Default Button Class" only the properties "Font Size" and "Forecolor" of the selected button class are taken.
  • Back Button Image is not supported on Android apps.
     

Tips

  • On iOS, the text color of the search box icon for the grid control adopts the Forecolor when is set at design-time. 
    If the grid is on the top of the panel, it also adopts the background color, checking if the forecolor is dark (in another case, it'll be set as it).
    Otherwise (the grid has other controls above it), it only adopts a minimalist light aspect, without a background color. In this scenario, if the forecolor of the Application Bar class is light, It'll adopt it, without checking if it is light or not. Maybe is desirable to preserve the light title on the application bar, and to avoid the described behavior on the search box text it is recommended to design two Application Bar classes; one for the text of the search box set at design-time, and another one for the title of the application bar set at run-time through the ClientStart event. This action will force to adopt independent theme classes for the default search box control and the application bar.
    On Android, the text color of the search box depends on Base Color Scheme property value.