Easily create customizable tabbed pages with options for top or bottom positioning, customizable header height, color, and content, tab page/content change events, and more! Perfect for creating a seamless user experience.
The control can be installed via NuGet package manager. Search for HTabBar and install into your project.
To use the HTabControl in your XAML pages, add the following namespace to your XAML file:
xmlns:htab="clr-namespace:Xam.HTabView.Control;assembly=HTabBar"<htab:HTabControl
x:Name="MyHTabControl"
HeaderColor="Gray"
SelectedIndex="{Binding Index}">
<htab:HTabControl.HTabPages>
<htab:HTabPage>
<htab:HTabPage.Header>
<htab:HTabHeader Title="Tab1">
</htab:HTabHeader>
</htab:HTabPage.Header>
<htab:HTabPage.CustomContentPage>
<local:Tab1ContentPage></local:Tab1ContentPage>
</htab:HTabPage.CustomContentPage>
</htab:HTabPage>
<htab:HTabPage>
<htab:HTabPage.Header>
<htab:HTabHeader IsVisible="False">
<Label Text="Tab2"></Label>
</htab:HTabHeader>
</htab:HTabPage.Header>
<htab:HTabPage.Content>
<StackLayout>
<Label Text="This Page Displays Tab2 Content"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</htab:HTabPage.Content>
</htab:HTabPage>
<htab:HTabPage>
<htab:HTabPage.Header>
<htab:HTabHeader>
<Label Text="Tab3"></Label>
</htab:HTabHeader>
</htab:HTabPage.Header>
<htab:HTabPage.Content>
<StackLayout>
<Label Text="This Page Displays Tab3 Content"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</htab:HTabPage.Content>
</htab:HTabPage>
<htab:HTabPage>
<htab:HTabPage.Header>
<htab:HTabHeader>
<Label Text="Tab4"></Label>
</htab:HTabHeader>
</htab:HTabPage.Header>
<htab:HTabPage.Content>
<StackLayout>
<Label Text="This Page Displays Tab4 Content"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</htab:HTabPage.Content>
</htab:HTabPage>
</htab:HTabControl.HTabPages>
</htab:HTabControl>
The following properties are available for HTabControl:
- HeaderColor (Color): Color of the tab header
- SelectedIndex (int): Index of the currently selected tab
- HTabPages (ObservableCollection): Collection of tab pages
- HeaderFontFamily: The font family to be used for the header titles.
- HeaderFontSize: The font size to be used for the header titles.
- HeaderTextColor: The color to be used for the header titles.
- TabBarHeight: The height of the tab bar.
- IsPanEnabled: A boolean indicating whether or not swiping between tabs is enabled.
- Add support for more header customization options such as font color, background color, and more.
- Implement additional tab transition animations for a more visually dynamic user experience.
- Explore the possibility of adding more tab positioning options beyond top and bottom.
- Continuously update and maintain the package to ensure compatibility with the latest Xamarin.Forms updates and enhancements.
Contributions to this project are welcome! If you find a bug or have an idea for a new feature, please open an issue or submit a pull request.
This project is licensed under the MIT License MIT
For support, email [email protected].
This control is based on the original idea by Rajesh Angappan. Significant modifications and additions have been made by myself.