Navigation এবং Multi-Page অ্যাপ্লিকেশন তৈরি

.NET MAUI তে Navigation এবং Multi-Page অ্যাপ্লিকেশন তৈরি করা সহজ এবং কার্যকর। এই ধরনের অ্যাপ্লিকেশনগুলিতে আপনি একাধিক পেজ তৈরি করেন এবং ব্যবহারকারীদের মধ্যে বিভিন্ন পেজে নেভিগেট করার জন্য Navigation এর সুবিধা ব্যবহার করেন।

1. Navigation Stack

Navigation Stack হল সেই প্রক্রিয়া যেখানে অ্যাপ্লিকেশনের বিভিন্ন পেজগুলি একটি স্ট্যাক (stack) হিসেবে সাজানো থাকে। ব্যবহারকারী একটি পেজ থেকে অন্য পেজে যেতে পারেন এবং পুরানো পেজে ফিরে আসার জন্য "Back" বাটন ব্যবহার করা যায়।

.NET MAUI তে Navigation কার্যকর করার জন্য আমরা সাধারণত NavigationPage ব্যবহার করি।

2. Multi-Page অ্যাপ্লিকেশন তৈরি:

কিভাবে NavigationPage ব্যবহার করবেন:

NavigationPage এর মাধ্যমে আমরা একটি পেজে নেভিগেট করতে পারি এবং আগের পেজে ফিরে যেতে পারি। এটি সাধারণত প্রথম পেজকে একটি root page হিসেবে রাখে, যেখানে বিভিন্ন পেজে নেভিগেট করা যাবে।

Multi-Page অ্যাপ্লিকেশন উদাহরণ:

1. প্রথম পেজ (MainPage.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.MainPage">

    <StackLayout>
        <Label Text="Welcome to .NET MAUI!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Go to Second Page"
                Clicked="OnGoToSecondPageClicked"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

এখানে একটি Button রয়েছে, যেটির ক্লিক করার মাধ্যমে ব্যবহারকারী দ্বিতীয় পেজে নেভিগেট করবেন।

MainPage.xaml.cs:

private async void OnGoToSecondPageClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new SecondPage());
}

এখানে, Navigation.PushAsync(new SecondPage()) ব্যবহৃত হয়েছে যাতে SecondPage-এ নেভিগেট করা যায়।

2. দ্বিতীয় পেজ (SecondPage.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.SecondPage">

    <StackLayout>
        <Label Text="This is the Second Page"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Go Back"
                Clicked="OnGoBackClicked"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

এখানে, দ্বিতীয় পেজের উপরেও একটি Button রয়েছে যা Go Back টেক্সট সহ। এর মাধ্যমে ব্যবহারকারী প্রথম পেজে ফিরে আসতে পারবেন।

SecondPage.xaml.cs:

private async void OnGoBackClicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

এখানে, Navigation.PopAsync() ব্যবহৃত হয়েছে যাতে ব্যবহারকারী দ্বিতীয় পেজ থেকে প্রথম পেজে ফিরে যেতে পারেন।

3. App.xaml.cs-এ NavigationPage সেট করা:

এখন, অ্যাপ্লিকেশনকে NavigationPage এর মাধ্যমে সেটআপ করতে হবে যাতে প্রথম পেজে নেভিগেট করার জন্য এটি স্বয়ংক্রিয়ভাবে Navigation সমর্থন করে।

App.xaml.cs:

public App()
{
    InitializeComponent();

    MainPage = new NavigationPage(new MainPage());
}

এখানে, NavigationPage ব্যবহার করা হয়েছে MainPage কে প্রথম পেজ হিসেবে সেট করতে এবং ব্যবহারকারী নেভিগেট করার সময় Navigation Stack ব্যবহার করার সুবিধা পাবে।

4. Multiple Pages Example:

আপনি আরও অনেক পেজ যোগ করতে পারেন এবং একাধিক পেজের মধ্যে নেভিগেশন করতে পারেন।

ThirdPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.ThirdPage">

    <StackLayout>
        <Label Text="Welcome to the Third Page"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Go Back to Second Page"
                Clicked="OnGoBackToSecondPageClicked"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

ThirdPage.xaml.cs:

private async void OnGoBackToSecondPageClicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

এখানে, আপনি তৃতীয় পেজের জন্যও একইভাবে Go Back ফাংশনালিটি ব্যবহার করেছেন।

5. ফুল Multi-Page অ্যাপ্লিকেশন:

এখন, এই নেভিগেশন অ্যাপ্লিকেশনটি Multiple Pages ব্যবহারের মাধ্যমে কার্যকর করতে পারেন। MainPage, SecondPage, ThirdPage এর মতো পেজগুলোর মধ্যে ব্যবহারকারীরা সহজেই নেভিগেট করতে পারবেন।

মনে রাখবেন:

• PushAsync() ব্যবহার করে নতুন পেজে যেতে পারেন।
• PopAsync() ব্যবহার করে আগের পেজে ফিরে আসতে পারেন।
• NavigationPage ব্যবহার করে পুরো অ্যাপ্লিকেশনটির জন্য নেভিগেশন সমর্থন নিশ্চিত করা হয়।

6. Navigating with Parameters (প্যারামিটার সহ নেভিগেশন):

কখনও কখনও, আপনি পরবর্তী পেজে কিছু ডেটা পাস করতে চান। এটি করা যায় প্যারামিটার সহ নেভিগেশন ব্যবহার করে।

MainPage.xaml.cs (প্যারামিটার সহ):

private async void OnGoToSecondPageClicked(object sender, EventArgs e)
{
    var data = "Hello from MainPage!";
    await Navigation.PushAsync(new SecondPage(data));
}

SecondPage.xaml.cs (প্যারামিটার গ্রহণ):

public SecondPage(string data)
{
    InitializeComponent();
    Label.Text = data;
}

এভাবে, আপনি পরবর্তী পেজে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন।

সারাংশ:

• NavigationPage ব্যবহার করে আপনি একাধিক পেজের মধ্যে নেভিগেট করতে পারেন।
• PushAsync() এবং PopAsync() মেথড ব্যবহার করে পেজগুলির মধ্যে নেভিগেট করা যায়।
• Multiple Pages অ্যাপ্লিকেশন তৈরি করার সময় বিভিন্ন পেজের মধ্যে ডেটা পাস করতে পারেন।
• Navigation প্রক্রিয়া স্বয়ংক্রিয়ভাবে একটি Back Stack তৈরি করে, যা ব্যবহারকারীদের আগের পেজে ফিরে যাওয়ার সুবিধা দেয়।

এইভাবে, .NET MAUI তে আপনি সহজেই Multi-Page অ্যাপ্লিকেশন তৈরি করতে পারেন এবং Navigation ব্যবহার করে অ্যাপ্লিকেশনটি আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন।

NavigationPage হল .NET MAUI অ্যাপ্লিকেশনে একটি বিশেষ ধরনের Page যা একটি Stack-based navigation সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি প্রধানত Stack-based navigation model অনুসরণ করে যেখানে পৃষ্ঠাগুলি একটি স্ট্যাক (stack) হিসাবে সঞ্চিত হয় এবং ব্যবহারকারী এগুলি "push" এবং "pop" করতে পারেন।

NavigationPage ডেভেলপারদেরকে একটি নেভিগেশন বার সহ ইউজার ইন্টারফেস প্রদান করতে সহায়তা করে, যেখানে ব্যবহারকারী অ্যাপ্লিকেশনের মধ্যে বিভিন্ন পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে পারেন। এটি সাধারণত এক পৃষ্ঠা থেকে আরেকটি পৃষ্ঠায় যাওয়ার জন্য ব্যবহৃত হয়, যেমন: একটি হোম পেজ থেকে বিস্তারিত পৃষ্ঠায় যাওয়ার জন্য।

NavigationPage এর মূল সুবিধা:

1. Stack-based Navigation: NavigationPage ব্যবহৃত হলে, পৃষ্ঠাগুলি স্ট্যাকের মধ্যে সঞ্চিত হয়। যখন আপনি নতুন পৃষ্ঠা নেভিগেট করেন, তা স্ট্যাকের উপরে পুশ হয় এবং যখন আপনি আগের পৃষ্ঠায় ফিরে আসেন, তখন স্ট্যাক থেকে পপ হয়।
2. Navigation Bar: NavigationPage একটি নেভিগেশন বার (এবং এর সাথে ব্যবহৃত Back বাটন) প্রদর্শন করে, যা ব্যবহারকারীদের জন্য পৃষ্ঠার মধ্যে নেভিগেশন সহজ করে তোলে।
3. Push এবং Pop: আপনি এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় push করে নেভিগেট করতে পারেন এবং আগের পৃষ্ঠায় ফিরে আসতে pop করতে পারেন।
4. Simple Navigation: এটি .NET MAUI অ্যাপ্লিকেশনে সহজ এবং সাধারণ পৃষ্ঠা নেভিগেশন সম্ভব করে, যেখানে আপনি একাধিক পৃষ্ঠার মধ্যে খুব সহজে পেতে পারেন।

NavigationPage এর ব্যবহার:

1. NavigationPage তৈরি করা: নেভিগেশন বার সহ অ্যাপ্লিকেশন পৃষ্ঠা তৈরি করার জন্য, আপনি NavigationPage ব্যবহার করবেন। উদাহরণস্বরূপ:

<NavigationPage>
    <x:Arguments>
        <ContentPage Title="Home">
            <StackLayout>
                <Button Text="Go to Details" Clicked="OnDetailsClicked"/>
            </StackLayout>
        </ContentPage>
    </x:Arguments>
</NavigationPage>

2. NavigationPage থেকে নতুন পৃষ্ঠা নেভিগেট করা (Push): যখন ব্যবহারকারী একটি বাটনে ক্লিক করবেন, তখন আপনি নতুন একটি পৃষ্ঠা পুশ করতে পারেন। এখানে একটি উদাহরণ:

async void OnDetailsClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new DetailsPage());
}

এটি DetailsPage কে পুশ করবে এবং ব্যবহারকারী সেই পৃষ্ঠায় চলে যাবে।

3. আগের পৃষ্ঠায় ফিরে আসা (Pop): পৃষ্ঠাটি খোলার পর, ব্যবহারকারী পূর্ববর্তী পৃষ্ঠায় ফিরে যেতে পারেন। PopAsync() ব্যবহার করে আপনি পূর্ববর্তী পৃষ্ঠায় ফিরে আসতে পারেন:

async void OnBackClicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

NavigationPage এর অন্যান্য বৈশিষ্ট্য:

1. Title: প্রতিটি পৃষ্ঠায় একটি Title সেট করা যায়, যা নেভিগেশন বারে প্রদর্শিত হয়। উদাহরণ:

   <ContentPage Title="Details">
       <!-- Content here -->
   </ContentPage>
   

2. BarTextColor: নেভিগেশন বারের টেক্সটের রং পরিবর্তন করা যায়:

   NavigationPage.SetBarTextColor(this, Color.White);
   

3. BarBackgroundColor: নেভিগেশন বারের ব্যাকগ্রাউন্ড রং পরিবর্তন করা যায়:

   NavigationPage.SetBarBackgroundColor(this, Color.Blue);
   

4. Automatic Back Button: NavigationPage নিজে থেকেই Back বাটন তৈরি করে, যা পৃষ্ঠার উপরের দিকে ডিফল্টভাবে প্রদর্শিত হয়।

সারাংশ:

NavigationPage .NET MAUI অ্যাপ্লিকেশনে পৃষ্ঠা নেভিগেশনকে সহজ এবং কার্যকর করে তোলে। এটি স্ট্যাক-বেসড নেভিগেশন মডেল ব্যবহার করে এবং push ও pop অ্যাকশন দ্বারা পৃষ্ঠাগুলির মধ্যে নেভিগেশন পরিচালনা করে। আপনি সহজেই নেভিগেশন বারের শিরোনাম, রং ইত্যাদি কাস্টমাইজ করতে পারেন এবং ব্যবহারকারীকে অ্যাপ্লিকেশনের বিভিন্ন অংশে সহজে নেভিগেট করতে সহায়তা করতে পারেন।

.NET MAUI এ Shell হল একটি আধুনিক এবং শক্তিশালী উপাদান যা সহজে নেভিগেশন এবং পেজ পরিচালনা করতে সাহায্য করে। Shell ব্যবহার করে আপনি সহজেই অ্যাপ্লিকেশনের মধ্যে বিভিন্ন পেজের মধ্যে নেভিগেট করতে পারেন এবং একটি পরিষ্কার এবং সুসংগঠিত স্ট্রাকচার তৈরি করতে পারেন।

এখানে Shell Navigation ব্যবহার করে একটি Multi-Page App তৈরি করার ধাপগুলো দেওয়া হল।

১. প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন .NET MAUI প্রজেক্ট তৈরি করুন।

1. Visual Studio খুলুন এবং "Create a new project" নির্বাচন করুন।
2. "MAUI App" টেমপ্লেট নির্বাচন করুন।
3. প্রজেক্টের নাম এবং লোকেশন নির্বাচন করুন এবং "Create" ক্লিক করুন।

২. Shell Layout তৈরি করা

এখন, AppShell.xaml ফাইলটি তৈরি করুন যা নেভিগেশন এবং অ্যাপের রুট ফাইল হবে।

AppShell.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="MauiApp1.AppShell">

    <!-- Define the Shell route and pages -->
    <TabBar>
        <ShellContent Title="Home" Icon="home.png" Route="home">
            <ContentPage>
                <StackLayout>
                    <Label Text="Welcome to Home Page"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand" />
                    <Button Text="Go to Details Page"
                            Clicked="OnGoToDetailsPageClicked" />
                </StackLayout>
            </ContentPage>
        </ShellContent>

        <ShellContent Title="Details" Icon="details.png" Route="details">
            <ContentPage>
                <StackLayout>
                    <Label Text="Welcome to Details Page"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand" />
                </StackLayout>
            </ContentPage>
        </ShellContent>
    </TabBar>

</Shell>

এখানে:

• TabBar ব্যবহার করা হয়েছে যাতে দুটি ShellContent পেজ থাকে। একটিতে Home পেজ এবং অন্যটিতে Details পেজ।
• Route ব্যবহার করে প্রতিটি পেজের রুট নির্ধারণ করা হয়েছে (যেমন home, details).
• Button ব্যবহার করে Home Page থেকে Details Page তে নেভিগেট করা হবে।

৩. Shell Navigation Implement করা

এখন, Home Page থেকে Details Page তে নেভিগেট করার জন্য কোড যুক্ত করি।

HomePage.xaml.cs:

using Microsoft.Maui.Controls;

namespace MauiApp1
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }

        // Button click event to navigate to the details page
        private async void OnGoToDetailsPageClicked(object sender, EventArgs e)
        {
            // Use Shell navigation to go to the Details Page
            await Shell.Current.GoToAsync("details");
        }
    }
}

এখানে:

• OnGoToDetailsPageClicked ইভেন্টে Shell.Current.GoToAsync("details") ব্যবহার করে Details পেজে নেভিগেট করা হয়েছে।

৪. App.xaml.cs এ Shell Register করা

এখন, App.xaml.cs ফাইলে AppShell ক্লাসটি রেজিস্টার করা হবে।

App.xaml.cs:

using Microsoft.Maui.Controls;

namespace MauiApp1
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            // Register the AppShell as the main page
            MainPage = new AppShell();
        }
    }
}

এখানে, AppShell কে MainPage হিসেবে সেট করা হয়েছে।

৫. চিত্র বা আইকন যোগ করা (ঐচ্ছিক)

AppShell.xaml এ Icon অ্যাট্রিবিউট ব্যবহার করে প্রতিটি ট্যাবের জন্য আইকন যোগ করা যেতে পারে। আপনি home.png, details.png আইকন ফাইল ব্যবহার করতে পারেন, যেগুলি অ্যাপের রিসোর্স ফোল্ডারে রাখতে হবে।

৬. অ্যাপটি রান করা

এখন, Visual Studio থেকে F5 প্রেস করে অ্যাপটি রান করুন। প্রথম পেজে গেলে আপনি "Go to Details Page" বাটনটি দেখতে পাবেন। এটি ক্লিক করলে অ্যাপটি Details পেজে নেভিগেট করবে।

সারাংশ:

এই টিউটোরিয়ালে আমরা .NET MAUI Shell Navigation ব্যবহার করে একটি Multi-Page App তৈরি করেছি। Shell এর সাহায্যে সহজেই বিভিন্ন পেজের মধ্যে নেভিগেট করা যায় এবং অ্যাপের স্ট্রাকচার পরিষ্কার থাকে।

• ShellContent ব্যবহার করে পেজগুলোকে গোষ্ঠীভুক্ত করা হয় এবং GoToAsync() মেথড ব্যবহার করে একটি পেজ থেকে অন্য পেজে নেভিগেট করা হয়।
• TabBar অথবা Flyout এর মাধ্যমে নেভিগেশন বার তৈরি করা সম্ভব, যা অ্যাপের মধ্যে ভিন্ন ভিন্ন পেজের মধ্যে সুগম নেভিগেশন নিশ্চিত করে।

.NET MAUI (Multi-platform App UI) অ্যাপ্লিকেশন তৈরিতে বিভিন্ন ধরনের navigation কন্ট্রোল প্রদান করে। এর মধ্যে Flyout Navigation এবং Tabbed Navigation হল দুইটি জনপ্রিয় ধরনের নেভিগেশন প্যাটার্ন, যা ডেভেলপারদের অ্যাপ্লিকেশনের বিভিন্ন স্ক্রীন বা পেজের মধ্যে সহজে নেভিগেট করার সুযোগ দেয়।

নিচে Flyout এবং Tabbed Navigation তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হয়েছে।

Flyout Navigation তৈরি করা

Flyout Navigation একটি সাইড মেনু বা স্লাইডআউট মেনু হিসেবে কাজ করে, যা সাধারণত অ্যাপ্লিকেশনের প্রধান স্ক্রীনের একপাশে থাকে এবং ব্যবহারকারী একাধিক পেজের মধ্যে নেভিগেট করতে পারে।

Flyout Navigation এর উদাহরণ:

1. MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MauiApp1.MainPage">

    <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           x:Class="MauiApp1.AppShell">

        <!-- Flyout Menu Items -->
        <FlyoutItem Title="Home">
            <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
        </FlyoutItem>
        <FlyoutItem Title="Settings">
            <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
        </FlyoutItem>
        <FlyoutItem Title="Profile">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
        </FlyoutItem>

    </Shell>
</ContentPage>

2. AppShell.xaml.cs:

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
    }
}

এখানে:

• FlyoutItem হলো স্লাইডআউট মেনুর একটি আইটেম।
• ShellContent এর মাধ্যমে নির্দিষ্ট স্ক্রীন বা পেজের জন্য কন্টেন্ট দেওয়া হয়।
• ContentTemplate="{DataTemplate local:HomePage}" এখানে HomePage, SettingsPage, এবং ProfilePage ডেফাইন করা স্ক্রীন বা পেজগুলো।

Flyout Navigation এর বৈশিষ্ট্য:

• FlyoutItem: মেনু আইটেম যা ব্যবহারকারীর কাছে দৃশ্যমান হবে।
• ShellContent: প্রতিটি মেনু আইটেমের সাথে যুক্ত স্ক্রীন বা কন্টেন্ট প্রদর্শন করা হয়।
• FlyoutHeader এবং FlyoutFooter: কাস্টম হেডার বা ফুটার যোগ করার জন্য ব্যবহার করা হয়।

Tabbed Navigation তৈরি করা

Tabbed Navigation হল একটি নেভিগেশন প্যাটার্ন যা স্ক্রীনের উপরের বা নীচে ট্যাব ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে পরিবর্তন করতে সাহায্য করে। এটি খুবই জনপ্রিয় বিশেষত মোবাইল অ্যাপ্লিকেশনের জন্য।

Tabbed Navigation এর উদাহরণ:

1. MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MauiApp1.MainPage">

    <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           x:Class="MauiApp1.AppShell">

        <!-- Tabbed Navigation -->
        <TabBar>
            <Tab Title="Home">
                <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
            </Tab>
            <Tab Title="Settings">
                <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
            </Tab>
            <Tab Title="Profile">
                <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
            </Tab>
        </TabBar>

    </Shell>
</ContentPage>

2. AppShell.xaml.cs:

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
    }
}

এখানে:

• TabBar হল ট্যাবগুলি ধারণ করার জন্য একটি কন্টেইনার, যার মধ্যে একাধিক Tab থাকে।
• প্রতিটি Tab একটি স্ক্রীন বা পেজের সাথে যুক্ত থাকে যা ShellContent এর মাধ্যমে ডিফাইন করা হয়।
• Title অ্যাট্রিবিউট দিয়ে প্রতিটি ট্যাবের নাম নির্ধারণ করা হয়।

Tabbed Navigation এর বৈশিষ্ট্য:

• TabBar: সমস্ত ট্যাব একসাথে রাখার জন্য ব্যবহৃত হয়।
• Tab: প্রতিটি ট্যাবের জন্য উপাদান যেমন স্ক্রীন বা পেজ ডিফাইন করা হয়।
• ShellContent: প্রতিটি ট্যাবের কন্টেন্ট ডিফাইন করা হয়।

Flyout এবং Tabbed Navigation এর মধ্যে পার্থক্য:

• Flyout Navigation: সাইড মেনু ভিত্তিক নেভিগেশন পদ্ধতি। এটি বেশিরভাগ সময় বড় অ্যাপ্লিকেশন বা এমন অ্যাপ্লিকেশনের জন্য ব্যবহার করা হয় যেখানে অনেক পেজ বা অপশন থাকতে পারে।
• Tabbed Navigation: উপরের বা নীচে ট্যাবের মাধ্যমে পেজ স্যুইচিং করতে ব্যবহৃত হয়। এটি সাধারণত ছোট অ্যাপ্লিকেশনের জন্য বা যেখানে কিছু নির্দিষ্ট স্ক্রীন থাকে, সেখানে উপকারী।

সারাংশ:

• Flyout Navigation এবং Tabbed Navigation উভয়ই .NET MAUI তে খুবই সহজে ইমপ্লিমেন্ট করা যায় এবং তারা আপনাকে আপনার অ্যাপ্লিকেশনে উন্নত নেভিগেশন প্যাটার্ন যোগ করার সুযোগ দেয়।
• Flyout Navigation সাইডবার মেনু ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশে নেভিগেট করতে সহায়তা করে, আর Tabbed Navigation ট্যাবের মাধ্যমে স্ক্রীনের বিভিন্ন অংশে পরিবর্তন করার সুবিধা দেয়।

Modal Pages এবং Parameters Passing .NET MAUI তে দুইটি গুরুত্বপূর্ণ কনসেপ্ট যা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং ডাটা শেয়ারিং প্রক্রিয়াকে সহজ করে তোলে। Modal Pages ব্যবহার করে আপনি একটি নতুন পেজ প্রদর্শন করতে পারেন, এবং Parameters Passing এর মাধ্যমে আপনি এক পেজ থেকে আরেক পেজে ডাটা পাস করতে পারেন।

1. Modal Pages

Modal Pages এমন পেজ যেখানে ব্যবহারকারী সেই পেজটি বন্ধ না করা পর্যন্ত আগের পেজে ফিরে যেতে পারে না। সাধারণত এটি অ্যাপের ফ্লো নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যেমন লগইন পেজ, ডায়ালগ বক্স ইত্যাদি।

Modal পেজে যাবার জন্য Navigation.PushModalAsync() মেথড ব্যবহার করা হয়, এবং modal পেজ বন্ধ করার জন্য Navigation.PopModalAsync() ব্যবহার করা হয়।

Modal Page Example:

নিচে একটি উদাহরণ দেওয়া হল যেখানে একটি Modal পেজ তৈরি করা হয়েছে।

MainPage.xaml (মূল পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.MainPage">
    
    <Button Text="Open Modal Page"
            Clicked="OnOpenModalPageClicked" />
</ContentPage>

MainPage.xaml.cs (মূল পেজের কোড)

public MainPage()
{
    InitializeComponent();
}

private async void OnOpenModalPageClicked(object sender, EventArgs e)
{
    // Modal page open করা হচ্ছে
    await Navigation.PushModalAsync(new ModalPage());
}

ModalPage.xaml (Modal পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.ModalPage">
    
    <StackLayout>
        <Label Text="This is a modal page!" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Close" Clicked="OnCloseButtonClicked" />
    </StackLayout>
</ContentPage>

ModalPage.xaml.cs (Modal পেজের কোড)

public ModalPage()
{
    InitializeComponent();
}

private async void OnCloseButtonClicked(object sender, EventArgs e)
{
    // Modal page বন্ধ করা হচ্ছে
    await Navigation.PopModalAsync();
}

এখানে, MainPage থেকে ModalPage খোলা হচ্ছে এবং ModalPage-এ একটি "Close" বাটন রয়েছে যা ব্যবহারকারীকে modal পেজ বন্ধ করতে সহায়ক হবে।

2. Parameters Passing

Modal পেজে ডাটা পাঠানোর জন্য Parameters Passing ব্যবহার করা হয়। আপনি যখন একটি Modal পেজ চালু করেন, তখন আপনি প্যারামিটার হিসেবে ডাটা পাঠাতে পারেন, এবং সেই পেজে সেই ডাটা অ্যাক্সেস করতে পারেন।

Parameters Passing Example:

নিচে একটি উদাহরণ দেওয়া হল যেখানে প্যারামিটার পাস করে Modal পেজে ডাটা পাঠানো হচ্ছে।

MainPage.xaml (মূল পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.MainPage">
    
    <Button Text="Open Modal Page with Parameter"
            Clicked="OnOpenModalPageClicked" />
</ContentPage>

MainPage.xaml.cs (মূল পেজের কোড)

public MainPage()
{
    InitializeComponent();
}

private async void OnOpenModalPageClicked(object sender, EventArgs e)
{
    var data = "Hello from MainPage!";
    // Modal page open করা হচ্ছে এবং parameter পাঠানো হচ্ছে
    await Navigation.PushModalAsync(new ModalPage(data));
}

ModalPage.xaml (Modal পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.ModalPage">
    
    <StackLayout>
        <Label x:Name="lblMessage" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Close" Clicked="OnCloseButtonClicked" />
    </StackLayout>
</ContentPage>

ModalPage.xaml.cs (Modal পেজের কোড)

public partial class ModalPage : ContentPage
{
    public ModalPage(string message)
    {
        InitializeComponent();
        // Modal পেজে প্যারামিটার পাস করা হচ্ছে
        lblMessage.Text = message;
    }

    private async void OnCloseButtonClicked(object sender, EventArgs e)
    {
        // Modal page বন্ধ করা হচ্ছে
        await Navigation.PopModalAsync();
    }
}

এখানে, MainPage থেকে একটি স্ট্রিং প্যারামিটার "Hello from MainPage!" ModalPage এ পাস করা হচ্ছে, এবং ModalPage-এ একটি লেবেলে সেট করা হচ্ছে।

3. Data Passing between Pages (Non-modal pages)

আপনি PushAsync বা PopAsync ব্যবহার করে নন-মডাল পেজের মধ্যে ডাটা পাস করতে পারেন। এই ক্ষেত্রে আপনি পেজে ডাটা পাস করার জন্য একটি কনস্ট্রাক্টর বা Property ব্যবহার করতে পারেন।

Non-modal Page Example:

MainPage.xaml (মূল পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.MainPage">
    
    <Button Text="Open Another Page with Data"
            Clicked="OnOpenAnotherPageClicked" />
</ContentPage>

MainPage.xaml.cs (মূল পেজের কোড)

private async void OnOpenAnotherPageClicked(object sender, EventArgs e)
{
    var data = "Hello from MainPage!";
    // Non-modal page open করা হচ্ছে এবং parameter পাঠানো হচ্ছে
    await Navigation.PushAsync(new AnotherPage(data));
}

AnotherPage.xaml (অন্য পেজ)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MAUIApp.AnotherPage">
    
    <StackLayout>
        <Label x:Name="lblData" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Back" Clicked="OnBackButtonClicked" />
    </StackLayout>
</ContentPage>

AnotherPage.xaml.cs (অন্য পেজের কোড)

public partial class AnotherPage : ContentPage
{
    public AnotherPage(string message)
    {
        InitializeComponent();
        // Data পাস করা হচ্ছে
        lblData.Text = message;
    }

    private async void OnBackButtonClicked(object sender, EventArgs e)
    {
        // পেছনে ফিরে আসা
        await Navigation.PopAsync();
    }
}

এখানে, MainPage থেকে AnotherPage তে ডাটা পাস করা হচ্ছে।

সারাংশ:

• Modal Pages ব্যবহার করে আপনি একটি পেজকে মোডাল পেজ হিসেবে প্রদর্শন করতে পারেন, যা বন্ধ না করা পর্যন্ত আগের পেজে ফিরে যাওয়া সম্ভব নয়। এটি ডায়ালগ বক্স বা অন্যান্য সাধারণ অ্যাকশনগুলির জন্য ব্যবহৃত হয়।
• Parameters Passing এর মাধ্যমে আপনি একটি পেজ থেকে আরেক পেজে ডাটা পাঠাতে পারেন, যেমন Modal পেজে বা Non-modal পেজে।