1 August 2022

Tabbed Page in MAUI

 1) Add New page TabbedPageEXP1.xaml & update code as below , and change "ContentPage" to " TabbedPage" in below highlighted in yellow color places

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.TabbedPageEXP1"

             Title="TabbedPageEXP1"

            BarBackgroundColor="DarkBlue"

            BarTextColor="LightSalmon"

            SelectedTabColor="Red"

            UnselectedTabColor="Yellow">

    <ContentPage Title="Page 1" IconImageSource="dotnet_bot.svg">

        <Label Text="Page 1 Text here"></Label>

    </ContentPage>

    <ContentPage Title="Page 2" IconImageSource="dotnet_bot.svg"></ContentPage>

    <ContentPage Title="Page 3" IconImageSource="dotnet_bot.svg"></ContentPage>

    <ContentPage Title="Page 4" IconImageSource="dotnet_bot.svg"></ContentPage>

</TabbedPage>


2) Update TabbedPageEXP1.xaml.cs page as below & change "ContentPage" to " TabbedPage" in below highlighted in yellow color places

namespace MauiApp1;

public partial class TabbedPageEXP1 : TabbedPage

{

public TabbedPageEXP1()

{

InitializeComponent();

}

}

3) Go to MainPage.xaml page and add below code

  <Button

                x:Name="BtnTabbedPageEXP"

                Text="Go to Tabbed Page EXP"

               Clicked="BtnTabbedPageEXP_Clicked"

                HorizontalOptions="Center" />

4) Go to MainPage.xaml.cs page and add below code

private void BtnTabbedPageEXP_Clicked(object sender, EventArgs e)

{

        Navigation.PushAsync(new TabbedPageEXP1());

    }


Output:

Then run the application. it will display Main page then click on "Go to Tabbed Page EXP" button. it will redirect to Tabbed page.




Code in Github: https://github.com/adi501/MAUI

No comments:

Post a Comment