stormlion227 / stabbedpage.forms Goto Github PK

View Code? Open in Web Editor NEW

16.0 1.0 8.0 1.81 MB

Full customizable TabbedPage control for Xamarin.Forms.

License: MIT License

C# 100.00%

xamarin-forms tabbedpage customizable top bottom

stabbedpage.forms's Introduction

STabbedPage.Forms

Full customizable TabbedPage control for Xamarin.Forms.

Supports Android and iOS.

Screen-Shots

Setup

Install the nuget package in portable and all platform specific projects.

Android

In MainActivity.cs file

    Stormlion.STabbedPage.Droid.Platform.Init(this);

iOS

In AppDelegate.cs file

    Stormlion.STabbedPage.iOS.Platform.Init();

Usage

	<?xml version="1.0" encoding="utf-8" ?>
	<stab:STabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
			  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			  xmlns:stab="clr-namespace:Stormlion.STabbedPage;assembly=Stormlion.STabbedPage"
			  Title="Customizable TabbedPage"
			  x:Class="Test.TabbedPage1"
			  TabBarPosition="Top"
			  TopBarHeight="0"
			  >
		
		<!-- Cell Template -->
		<stab:STabbedPage.TabBarCellTemplate>
			<DataTemplate>
				<Grid BackgroundColor="White">
					<Label Text="{Binding Title}"
     	 				       HorizontalTextAlignment="Center"
					       VerticalTextAlignment="Center"
					       />
				</Grid>
			</DataTemplate>
		</stab:STabbedPage.TabBarCellTemplate>
		
		<!-- Selected Cell Template -->
		<stab:STabbedPage.TabBarSelectedCellTemplate>
			<DataTemplate>
				<Grid BackgroundColor="Orange">
					<Label Text="{Binding Title}"
					       HorizontalTextAlignment="Center"
					       VerticalTextAlignment="Center"
					       TextColor="White"
					       />
				</Grid>
			</DataTemplate>
		</stab:STabbedPage.TabBarSelectedCellTemplate>
		
		<!-- Pages -->
		<ContentPage Title="Tab 1"
			     BackgroundColor="Yellow"
			     >
			<ContentPage.Content>
				<StackLayout>
					<Label Text="Page 1"
					       VerticalOptions="CenterAndExpand" 
					       HorizontalOptions="CenterAndExpand"
					       />
				</StackLayout>
			</ContentPage.Content>
		</ContentPage>
		<ContentPage Title="Tab 2"
			     BackgroundColor="LightGreen"
			     >
			<ContentPage.Content>
				<StackLayout>
					<Label Text="Page 2"
					       VerticalOptions="CenterAndExpand" 
					       HorizontalOptions="CenterAndExpand"
					       />
				</StackLayout>
			</ContentPage.Content>
		</ContentPage>
		<ContentPage Title="Tab 3"
			     BackgroundColor="LightBlue"
			     >
			<ContentPage.Content>
				<StackLayout>
					<Label Text="Page 3"
					       VerticalOptions="CenterAndExpand" 
					       HorizontalOptions="CenterAndExpand"
					       />
				</StackLayout>
			</ContentPage.Content>
		</ContentPage>
	</stab:STabbedPage>

Properties

TabBarPosition ( Top or Bottom )
TabBarCellTemplate
TabBarSelectedCellTemplate
TabBarHeight
SplitterColor and SplitterWidth
TopBarColor and TopBarHeight
BottomBarColor and BottomBarHeight

Contributions

Contributions are welcome!

stabbedpage.forms's People

Contributors

Stargazers

Watchers

Forkers

windperson egaros chrisgate npagare laixianglin jtone123 alexjacostal phenixchao

stabbedpage.forms's Issues

Nice but issues

Hi first of all great effort i can easily customize the tab items.
I am facing one major problem i hope you would have an idea what iam missing.
I have login page and after successful login Mainpage would appear which is STabbedPage contains 4 tabs .
Problem is i have nested navigation inside the child page of STabbedPage but when i click new page load and STabbedPage pulled back but in normal usage of Tab-page is nest navigation does load the page in totally new window it appears inside the same master page.
Please guide me what are the settings are required to achieve the desired result.

Regards

ATIF

Java.Lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.

Custom TabBarCellTemplate not working

Hi @stormlion227,

To provide Icon and Badge for a given TabBarCell, I provided following DataTemplate. But instead of seeing an icon and a badge text on the row 0 of the cell and the label Tab 2 on the row 1, I am seeing the output displayed as shown in the screenshot below.
Can you please help me fix this ?

You could also look my previous GitHub issue that can explain my end goal as well.

<stab:STabbedPage.TabBarCellTemplate>
    <DataTemplate>
        <Grid BackgroundColor="PaleVioletRed"
            ColumnSpacing="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="20"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Label Text="Icon"
                Grid.Row="0" 
                Grid.Column="0"
                HorizontalOptions="EndAndExpand"
                VerticalOptions="EndAndExpand"
 	 			HorizontalTextAlignment="Center"
				VerticalTextAlignment="Center"
				/>
            <Label Text="Badge"
                Grid.Row="0" 
                Grid.Column="1"
                HorizontalOptions="StartAndExpand"
                VerticalOptions="EndAndExpand"                       
 	 			HorizontalTextAlignment="Center"
				VerticalTextAlignment="Center"
				/>
            <Label Text="{Binding Title}"
                Grid.Row="1" 
                Grid.ColumnSpan="2"
                HorizontalOptions="Center"
                VerticalOptions="Center"                       
 	 			HorizontalTextAlignment="Center"
				VerticalTextAlignment="Center"
				/>
        </Grid>
    </DataTemplate>
</stab:STabbedPage.TabBarCellTemplate>

That will really make this Custom TabbedPage very very powerful .
Hope you will consider my feature request.

Thanks,