RedCorners.Forms.TabBar by itself is a control that presents a list of items (TabBarItem) where the user can tap on any of them to select it. The selected item can be set or retrieved via the SelectedIndex bindable property and the SelectedIndexChangeCommand bindable command.

TabBar powers the TabbedContentView control, which is an amazing alternative for building tabbed views. For more information, read the docs on TabbedContentView.

Tabs are rendered as ImageButton2 controls, that are built from the bindable properties of the TabBar control and the relevant TabBarItem objects.

Each TabBarItem contains the following bindable properties:

  • ImageSource Image: Sets the image source of the button.
  • ImageSource SelectedImage: Optional property, which sets the image source of the button, when it is selected.
  • double Opacity: Sets the default opacity of the button.
  • double SelectedOpacity: Sets the opacity of the button when it is selected.
  • ICommand Command: Sets the command that is executed when the button is pressed.
  • object CommandParameter: Sets the parameter that is used when executing the Command.
  • string Text: Set the button’s text.

Important: If the button is pressed and the CanExecute component of its Command returns false, the tab change will not be performed.


Appearence Properties

The following properties adjust the appearence of the buttons:

  • Thickness ImageMargin
  • Color TextColor
  • double FontSize
  • FontAttributes FontAttributes
  • Color SelectedTextColor
  • double? SelectedFontSize
  • FontAttributes? SelectedFontAttributes
  • string FontFamily
  • GridLength TextHeight
  • double ImageWidthRequest
  • double ImageHeightRequest
  • ImageButtonStyles ImageButtonStyle
  • ImageButtonOrientations ItemOrientation

These properties correspond to the options available for ImageButton2. For more information, refer to the docs for ImageButton2.

The SelectedTextColor, SelectedFontSize and SelectedFontAttributes properties are optional, and override the appearence of the selected button, if set.

double Spacing

This property adjusts the spacing between the items on the TabBar.

StackOrientation Orientation

This property adjusts the direction of the TabBar. Valid values are Horizontal (default), and Vertical.