TabbedContentView

RedCorners.Forms.TabbedContentView is an ideal control to use to build a Xamarin.Forms page (or part of it) with a TabBar. Since it is a ContentView2 control, it can be embedded anywhere on a Xamarin.Forms visual tree, giving the developer the flexibility to customize it without having to rewrite the entire UI.

A starter template for this control is included in the RedCorners.Forms Visual Studio Extension.

TabbedContentView uses a RedCorners.Forms.TabBar internally to render a tab bar, and therefore supports all of its features.

TabbedContentView offers a way to add overlay views on top of the entire control, which can be handy when adding modal user interfaces, or a SideBar. This is done by assigning views to its Overlay bindable property.

Transition animations can be used by choosing one from the TabbedContentTransitions enum. Moreover, the TransitionDuration property controls the duration of the transition in milliseconds.

The following transitions are currently available:

public enum TabbedContentTransitions
{
    None = 0,
    Crossfade,
    DipToBackground,
    Slide,
    SlideInverse,
    SlideLeft,
    SlideRight,
    SlideVertically,
    SlideInverseVertically,
    SlideUp,
    SlideDown
 }

The TabBar can be placed on either side of the screen. The position of the TabBar is changed using the TabBarPosition property and supports the following values:

public enum TabBarPositions
{
    Bottom = 0,
    Top,
    Left,
    Right
}

The children of a TabbedContentView are ContentView2 controls. TabbedContentView automatically reads the metadata properties of ContentView2 children in order to build the buttons on its TabBar. The metadata properties include:

  • string Title
  • ImageSource Icon
  • ImageSource SelectedIcon
  • bool IsVisibleAsTab
  • ICommand ShowTabCommand

For example, if you embed a ContentView2 inside a TabbedContentView:

  • The Title property is used as the text for the tab button;
  • Icon and SelectedIcon are used as the images for the tab button, depending on whether the tab is active or not. (Note: SelectedIcon is optional.)
  • IsVisibleAsTab indicates whether this ContentView2 has a button on the tab bar, or is a hidden page that can only be navigated to programmatically.

An optional background view that covers the entire TabBar can be used by assigning it to the TabBarBackground property. This is handy when wanting to put a background image or animation on the tab bar. Alternatively, the background color of the TabBar can be controlled using the TabBarBackgroundColor property.

The TabBar can be entirely hidden by setting the IsTabBarVisible property to false. This is perfect for creating multi-page views that require smooth transitions, as you can still change the pages programmatically by changing the SelectedIndex property of the TabbedContentView.

Properties

These properties adjust the appearance of the TabBar and its buttons. For more information, refer to the TabBar docs.

  • Color TabBarBackgroundColor
  • Color TextColor
  • double FontSize
  • FontAttributes FontAttributes
  • Color SelectedTextColor
  • double? SelectedFontSize
  • FontAttributes? SelectedFontAttributes
  • string FontFamily
  • GridLength TextHeight
  • ImageButtonStyles TabStyle
  • Thickness ImageMargin

TabStyle changes the style of the buttons. You can have icons only, titles only, or both at the same time on the buttons.

[ContentProperty] IList<ContentView2> Children

The children of a TabbedContentView are ContentView2 controls. The metadata properties of ContentView2 controls are used to populate the TabBar buttons.

int SelectedIndex

This property controls the index of the visible child. You can use it to change the current page.

int SelectedTab { get; }

This readonly property returns the index of the selected tab. The children that do not have tab buttons (!IsVisibleAsTab) are not counted here.

TabbedContentTransitions Transition

This property controls the transition used when changing the active tab. The default value is None. See above for the list of available transitions.

double TransitionDuration

This property controls the duration of the transition (in milliseconds). The default value is 250.0.

bool IsTabBarVisible

This property controls the visibility of the TabBar. By default it is true. It can be set to false to simulate multi-page screens that have smooth transitions between them.

TabBarPositions TabBarPosition

This property controls the position of the TabBar. By default it is Bottom. Other available values are:

  • Top,
  • Left,
  • Right

View TabBarBackground

This optional property places an arbitrary view behind the entire TabBar control. It is useful when you want to decorate the tab bar with a custom background image or an animation.

Thickness TabBarPadding

This property controls the padding around the buttons on the TabBar.

double TabBarSizeRequest

This property controls the width or height of the TabBar, depending on its position.

View Overlay

Optional view that is shown on top of the whole control. A great place to put a SideBar.

View Background

Optional view placed on the background of the content part of the TabbedContentView. This comes in handy when having transparent children, or using some of the transitions that hide the previous view without equally showing the next view at the same time (e.g. DipToBackground).

bool FixTabBarPadding

Depending on the value of TabBarPosition, this property adds extra insets on the top or the bottom of the TabBar, to avoid it overlapping with the notch or the task switching bar on the bottom of the screen on iOS devices. For more information, read the docs on NotchSystem.

By default, it is set to true.

bool HasShadow

If this property is true, a subtle shadow is added between the tab bar and the main content. By default it is true.

Updated on 06 Aug 2019