EP05 Xamarin Forms Tabbed Page

Jan 24, 2022 | Xamarin Forms

Learn how to create Tabbed Pages in Xamarin Forms

https://youtu.be/ORqNg6RALyo
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Tabbed_Page.MainPage"
            xmlns:local="clr-namespace:Tabbed_Page"
            
            BarTextColor="Yellow"
            BarBackgroundColor="Green"
            
            SelectedTabColor="blue"
            UnselectedTabColor="Red"

            
            >

    <ContentPage Title="AA ">
        <ContentPage.Content>
            <StackLayout>
                
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage IconImageSource="img01">
        <ContentPage.Content>
            <StackLayout>

            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="CC" IconImageSource="img02">
        <ContentPage.Content>
            <StackLayout>

            </StackLayout>
        </ContentPage.Content>

    </ContentPage>

    <local:Page4 Title="EE" IconImageSource="img04"></local:Page4>

    <local:Page5></local:Page5>

    <ContentPage Title="CC" IconImageSource="img02">
        <ContentPage.Content>
            <StackLayout>

            </StackLayout>
        </ContentPage.Content>

    </ContentPage>
    <ContentPage Title="CC" IconImageSource="img02">
        <ContentPage.Content>
            <StackLayout>

            </StackLayout>
        </ContentPage.Content>

    </ContentPage>
    

</TabbedPage>
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Tabbed_Page
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Tabbed_Page.Page5" Title="FF" IconImageSource="img05">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Github : https://github.com/nady2999/Xamarin-Forms-Tabbed-Page

Code to Place the Tabbed Page Bar at the bottom of the screen
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"         
            android:TabbedPage.ToolbarPlacement="Bottom"

Pin It on Pinterest

Share This