Shell Navigation ব্যবহার করে Multi-Page App তৈরি

.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 এর মাধ্যমে নেভিগেশন বার তৈরি করা সম্ভব, যা অ্যাপের মধ্যে ভিন্ন ভিন্ন পেজের মধ্যে সুগম নেভিগেশন নিশ্চিত করে।