.NET MAUI Shell এর মাধ্যমে অ্যাপ্লিকেশন স্ট্রাকচার করা

.NET MAUI Shell হল একটি শক্তিশালী ফিচার যা আপনার .NET MAUI অ্যাপ্লিকেশনের নেভিগেশন এবং স্ট্রাকচার পরিচালনা করতে সহায়ক। এটি একটি হাই-লেভেল API যা অ্যাপ্লিকেশনটির নেভিগেশন, ইউআই কন্ট্রোল (যেমন, সাইড মেনু, ট্যাব বার) এবং সিঙ্গেল পেজ থেকে মাল্টিপল পেজে স্যুইচিং সহজ করে তোলে। এটি মূলত Xamarin.Forms Shell এর উন্নত সংস্করণ, যা এখন .NET MAUI তে ব্যবহৃত হচ্ছে।

.NET MAUI Shell এর সুবিধাসমূহ:

1. নেভিগেশন সিমপ্লিফিকেশন: Shell এর মাধ্যমে আপনি একক পেজ থেকে অনেক পেজে নেভিগেট করতে পারেন।
2. নেভিগেশন স্ট্রাকচার: ট্যাব, সাইড মেনু, স্ট্যাক পেজ ইত্যাদি ব্যবহার করে অ্যাপ্লিকেশনের স্ট্রাকচার খুব সহজে তৈরি করা যায়।
3. ডিপেনডেন্সি ইনজেকশন: সহজে ডিপেনডেন্সি ইনজেকশন সাপোর্ট করে অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে ডাটা শেয়ার করতে।

Shell এর মাধ্যমে অ্যাপ্লিকেশন স্ট্রাকচার করা

.NET MAUI Shell দিয়ে অ্যাপ্লিকেশন স্ট্রাকচার করার জন্য, আমরা প্রথমে Shell উপাদান তৈরি করি এবং তারপর TabBar, FlyoutMenu, এবং ContentPage ব্যবহার করে অ্যাপ্লিকেশনটির স্ট্রাকচার ডিজাইন করি।

1. Basic Shell Structure

একটি সহজ Shell অ্যাপ্লিকেশন স্ট্রাকচার তৈরি করতে, আপনি Shell উপাদানকে রুট উপাদান হিসেবে ব্যবহার করতে পারেন। তার মধ্যে TabBar, FlyoutItem, এবং ContentPage ব্যবহার করা হয়।

AppShell.xaml (Shell Structure)

<?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"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <!-- Flyout Menu (Side Menu) -->
    <FlyoutItem Title="Home" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>

    <!-- Tab Bar Example -->
    <TabBar>
        <ShellContent Title="Page 1" Icon="page1.png" ContentTemplate="{DataTemplate local:Page1}" />
        <ShellContent Title="Page 2" Icon="page2.png" ContentTemplate="{DataTemplate local:Page2}" />
    </TabBar>

</Shell>

AppShell.xaml.cs (Shell Code Behind)

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

এখানে, FlyoutItem এবং TabBar ব্যবহার করা হয়েছে।

• FlyoutItem সাইড মেনুর জন্য, যেখানে আপনি বিভিন্ন পেজ লিঙ্ক করতে পারেন।
• TabBar ট্যাব বার তৈরি করার জন্য, যেখানে আপনি পেজের মধ্যে সুইচ করতে পারেন।

2. Flyout Menu (Side Menu) তৈরি করা

Shell এর মাধ্যমে একটি সাইড মেনু তৈরি করা খুবই সহজ। সাইড মেনুতে বিভিন্ন পেজের লিঙ্ক এবং অন্যান্য ফিচার যুক্ত করা যায়।

FlyoutItem Example

<FlyoutItem Title="Settings" Icon="settings.png">
    <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
</FlyoutItem>

এখানে, FlyoutItem ব্যবহার করা হয়েছে SettingsPage এর জন্য একটি লিঙ্ক হিসেবে। আপনি আরও অনেক ফিচার বা পেজ যোগ করতে পারেন।

3. Tab Bar Example

Shell তে ট্যাব বার যোগ করতে, TabBar উপাদান ব্যবহার করতে হয়, যা সাধারণত অ্যাপ্লিকেশনের নেভিগেশন ব্যাবহারকারী অভিজ্ঞতা উন্নত করে।

TabBar Example

<TabBar>
    <ShellContent Title="Home" Icon="home.png" ContentTemplate="{DataTemplate local:HomePage}" />
    <ShellContent Title="Profile" Icon="profile.png" ContentTemplate="{DataTemplate local:ProfilePage}" />
</TabBar>

এখানে, TabBar তে দুটি ট্যাব তৈরি করা হয়েছে: Home এবং Profile। প্রতিটি ট্যাব একটি কন্টেন্ট পেজ (যেমন, HomePage, ProfilePage) লোড করবে।

4. Navigating Between Pages

Shell অ্যাপ্লিকেশন স্ট্রাকচারে Navigation সহজে পরিচালিত হতে পারে। আপনি একটি পেজ থেকে অন্য পেজে নেভিগেট করতে Shell.Current.GoToAsync() মেথড ব্যবহার করতে পারেন।

Navigation Example (Code Behind)

private async void OnNavigateButtonClicked(object sender, EventArgs e)
{
    // Navigate to a new page using Shell
    await Shell.Current.GoToAsync("//HomePage");
}

এখানে, GoToAsync() মেথড ব্যবহার করে একটি নির্দিষ্ট পেজে নেভিগেট করা হচ্ছে। //HomePage নির্দেশ করে যে এটি রুট পেজ থেকে HomePage তে যাবে।

5. Deep Linking in Shell

.NET MAUI Shell তে Deep Linking সমর্থন করা হয়, যার মাধ্যমে নির্দিষ্ট পেজে সরাসরি নেভিগেট করা যায়।

Deep Linking Example

// AppShell.xaml.cs
public AppShell()
{
    InitializeComponent();
    
    // Example of deep linking to a page
    Routing.RegisterRoute("details", typeof(DetailsPage));
}

// Go to specific page programmatically
await Shell.Current.GoToAsync("details?id=1");

এখানে, Routing.RegisterRoute ব্যবহার করে DetailsPage কে রেজিস্টার করা হয়েছে, এবং তারপর GoToAsync এর মাধ্যমে ডিপ লিঙ্কিং করা হয়েছে, যেখানে পেজের জন্য প্যারামিটার পাঠানো হয়েছে।

6. Shell-Based Navigation Best Practices

• State Preservation: Shell এর মাধ্যমে আপনি অ্যাপ্লিকেশনের নেভিগেশন এবং স্টেট সেভ করতে পারবেন, যাতে ব্যবহারকারী যখন ফিরে আসে, তখন পূর্বের অবস্থান থেকে শুরু হয়।
• Dynamic Routing: আপনি dynamic routing ব্যবহার করতে পারেন যেখানে বিভিন্ন প্যারামিটার সহ পেজে নেভিগেট করতে পারবেন। এতে আপনার অ্যাপ্লিকেশন আরও নমনীয় হয়ে ওঠে।
• Tabbed Navigation: ট্যাব ব্যবহারের মাধ্যমে একাধিক পেজের মধ্যে সুইচ করা সহজ এবং দ্রুত হয়।
• Flyout Menu (Drawer Navigation): সাইড মেনুর মাধ্যমে অ্যাপের সব পেজ এক জায়গায় সহজে দেখতে এবং অ্যাক্সেস করতে পারবেন।

Conclusion

• .NET MAUI Shell অ্যাপ্লিকেশন ডিজাইন এবং নেভিগেশনকে অনেক সহজ এবং কার্যকরী করে তোলে।
• আপনি Flyout Menu, TabBar, এবং ShellContent ব্যবহার করে অ্যাপের নেভিগেশন এবং স্ট্রাকচারকে মডুলার এবং কাস্টমাইজ করতে পারেন।
• Deep Linking এবং Routing সমর্থন করার মাধ্যমে, Shell আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী এবং নমনীয় করে তোলে।

এই কৌশলগুলি ব্যবহার করে আপনি একটি সুন্দর এবং কার্যকরী নেভিগেশন ব্যবস্থা তৈরি করতে পারবেন, যা আপনার .NET MAUI অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।

.NET MAUI তে Shell হল একটি নতুন উপায় যা অ্যাপ্লিকেশনের নেভিগেশন এবং UI স্ট্রাকচারকে সহজ এবং পরিষ্কারভাবে সাজানোর জন্য ব্যবহৃত হয়। Shell অ্যাপ্লিকেশন তৈরি করার জন্য একটি সমন্বিত এবং ক্ষমতাশালী কাঠামো প্রদান করে, যা অ্যাপ্লিকেশনের বিভিন্ন অংশে navigation এবং UI elements এর জন্য সেন্ট্রাল কন্ট্রোল দেয়।

এটি .NET MAUI এবং Xamarin.Forms এ ব্যবহৃত হয় এবং অ্যাপ্লিকেশন নেভিগেশন এবং স্ট্রাকচারকেও সহজ এবং পরিষ্কার করে তোলে। Shell এর মাধ্যমে আপনি অ্যাপ্লিকেশনটির মূল কাঠামো এবং ব্যবহারের ধরণ সহজভাবে সংজ্ঞায়িত করতে পারেন।

Shell এর মূল বৈশিষ্ট্য:

1. Declarative Navigation:
   • Shell এর মাধ্যমে navigation কন্ট্রোলটি declaratively করা যায়। আপনি UI এর জন্য নেভিগেশন স্ট্রাকচার তৈরি করতে পারেন যেখানে প্রতিটি পেজের জন্য কাস্টম রুট এবং প্যারামিটার সেট করা যায়।
2. Flyout Menu (Sidebar):
   • Flyout Menu বা সাইডবার সহজভাবে অ্যাপ্লিকেশনের জন্য নেভিগেশন প্রদান করতে পারে, যেখানে আপনি অ্যাপ্লিকেশনের বিভিন্ন সেকশন বা পেজে নেভিগেট করতে পারবেন।
3. Tabbed Navigation:
   • Shell তে Tabbed Navigation সহজভাবে বাস্তবায়ন করা যায়, যেখানে আপনি একাধিক ট্যাব দ্বারা বিভিন্ন পেজে নেভিগেট করতে পারেন।
4. Search Handler:
   • Search Handler এর মাধ্যমে অ্যাপ্লিকেশনের মধ্যে সার্চ ফিচার যোগ করা যায়। এটি ইউজারদের অ্যাপ্লিকেশনের মধ্যে ডেটা বা কনটেন্ট খুঁজে পেতে সাহায্য করে।
5. Routing:
   • Shell-এ routing এবং URL-based navigation ব্যবহার করা যায়, যার মাধ্যমে অ্যাপ্লিকেশনটির বিভিন্ন স্ক্রিন বা পেজে রুট নির্ধারণ করা হয়।
6. Flyout Header and Footer:
   • Shell আপনাকে ফ্লাইআউট মেনুর হেডার এবং ফুটার কাস্টমাইজ করার সুযোগ দেয়।

.NET MAUI Shell এ অ্যাপ্লিকেশন স্ট্রাকচার তৈরি করা:

Shell ব্যবহার করে অ্যাপ্লিকেশন স্ট্রাকচার করার জন্য আপনাকে প্রথমে Shell পেজ তৈরি করতে হবে এবং তার মধ্যে FlyoutMenu বা TabbedPage যোগ করতে হবে।

Step 1: Basic Shell Setup

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"
       xmlns:local="clr-namespace:YourApp"
       x:Class="YourApp.AppShell">

    <!-- Flyout Menu (Sidebar) Setup -->
    <FlyoutItem Title="Home">
        <TabBar>
            <Tab Title="Home">
                <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
            </Tab>
            <Tab Title="Settings">
                <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
            </Tab>
        </TabBar>
    </FlyoutItem>
</Shell>

এখানে, FlyoutItem ব্যবহার করা হয়েছে যাতে ফ্লাইআউট মেনুর মধ্যে Home এবং Settings নামে দুটি ট্যাব যুক্ত করা যায়। প্রতিটি ট্যাবের জন্য ShellContent অ্যাড করা হয়েছে, যা HomePage এবং SettingsPage কে নির্দেশ করে।

Step 2: Page Setup

এখন HomePage এবং SettingsPage তৈরি করা হবে। এই পেজগুলো .NET MAUI এর ContentPage হতে হবে, এবং এগুলির মধ্যে আপনি কাস্টম UI উপাদান যুক্ত করতে পারবেন।

HomePage.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="YourApp.HomePage">
    <StackLayout>
        <Label Text="Welcome to the Home Page!"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

SettingsPage.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="YourApp.SettingsPage">
    <StackLayout>
        <Label Text="Settings Page"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Step 3: AppShell.xaml.cs

আপনার AppShell.xaml.cs ফাইলে Shell এর কনফিগারেশন থাকে এবং সেখানে নেভিগেশন বা অন্যান্য কার্যক্রম পরিচালিত হয়।

AppShell.xaml.cs:

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

এখানে, AppShell ক্লাসের মধ্যে Shell কন্ট্রোলটি প্রাথমিকভাবে কনফিগার করা হয়েছে।

Shell এর কিছু অতিরিক্ত বৈশিষ্ট্য:

1. Flyout Menu Customization:
   • আপনি FlyoutMenu এর উপরে কাস্টম হেডার বা ফুটার যোগ করতে পারেন।

<FlyoutHeader>
    <Label Text="Welcome to My App!" />
</FlyoutHeader>
<FlyoutFooter>
    <Button Text="Log Out" />
</FlyoutFooter>

2. Navigation with Shell:
   • Shell দিয়ে আপনি PushAsync বা PopAsync ইত্যাদি মেথড ব্যবহার না করেই navigation পরিচালনা করতে পারেন। Shell আপনাকে পেজের জন্য routes বা URLs ব্যবহার করার সুযোগ দেয়।

await Shell.Current.GoToAsync("settings");

এখানে, "settings" একটি route যা SettingsPage এর দিকে নির্দেশ করে।

3. Search Handler:
   • আপনি Shell এর মধ্যে SearchHandler ব্যবহার করে অ্যাপ্লিকেশনের মধ্যে সার্চ ফিচার যোগ করতে পারেন।

<Shell.SearchHandler>
    <SearchHandler Placeholder="Search..." />
</Shell.SearchHandler>

4. TabbedPage:
   • TabbedPage ব্যবহার করে আপনি সহজেই অ্যাপের মধ্যে ট্যাববেসড নেভিগেশন তৈরি করতে পারেন।

<TabBar>
    <Tab Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </Tab>
    <Tab Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </Tab>
</TabBar>

Shell এর সুবিধা:

1. Declarative Navigation: Shell এর মাধ্যমে নেভিগেশন খুব সহজ এবং declarative পদ্ধতিতে পরিচালনা করা যায়।
2. Centralized Navigation: Shell অ্যাপ্লিকেশনের নেভিগেশন এক জায়গায় সংজ্ঞায়িত এবং কন্ট্রোল করা সহজ।
3. Built-in Navigation Patterns: Flyout, Tabbed, Stack, Modal navigation সহ একাধিক নেভিগেশন প্যাটার্নের সুবিধা।
4. Cleaner and Maintainable Code: Shell অ্যাপ্লিকেশনের কোডকে আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

Conclusion:

.NET MAUI Shell আপনার অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়াকে সহজ করে তোলে, যেখানে আপনি FlyoutMenu, TabbedNavigation, Search Handler এবং Routing এর মাধ্যমে কার্যকরী এবং স্মুথ নেভিগেশন তৈরি করতে পারেন। এটি অ্যাপ্লিকেশনের কাঠামোকে পরিষ্কার, সহজ এবং রক্ষণাবেক্ষণযোগ্য রাখে, এবং এটি cross-platform অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক হিসেবে কাজ করে।

.NET MAUI তে Shell Navigation এবং Routing অ্যাপ্লিকেশনের নেভিগেশন এবং পেজগুলির মধ্যে সঠিকভাবে স্থানান্তর পরিচালনা করতে ব্যবহৃত হয়। Shell একটি উচ্চস্তরের নেভিগেশন কন্টেইনার, যা আপনার অ্যাপের UI কে আরও সংগঠিত এবং সহজে নেভিগেটেবল করে তোলে। Routing আপনাকে নির্দিষ্ট পেজের মধ্যে স্থানান্তরের জন্য URL নির্ধারণ করার সুযোগ দেয়, যা অ্যাপ্লিকেশনটি আরও সহজে ব্যবহারযোগ্য এবং স্কেলযোগ্য করে তোলে।

1. Shell Navigation

Shell হল .NET MAUI-তে ব্যবহৃত একটি নেভিগেশন কন্টেইনার, যা অ্যাপের স্ট্রাকচারকে সহজ এবং কাস্টমাইজযোগ্য করে তোলে। এটি Tabbed, Flyout, এবং NavigationPage এর মাধ্যমে নেভিগেশন পরিচালনা করে।

Shell Navigation ব্যবহার করা:

1. Shell Structure তৈরি করা:

Shell তে আপনি Flyout (সাইড মেনু), TabBar, বা Master-Detail এর মতো নেভিগেশন ব্যবহার করতে পারেন। নেভিগেশন এবং রুটিং-এর জন্য XAML এ Shell উপাদান ব্যবহৃত হয়।

Shell.xaml (App Shell)

<?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"
       xmlns:local="clr-namespace:ShellNavigationApp"
       x:Class="ShellNavigationApp.AppShell">

    <!-- Flyout Menu -->
    <FlyoutItem Title="Home">
        <Tab>
            <ShellContent Title="Home Page" ContentTemplate="{DataTemplate local:HomePage}" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Settings">
        <Tab>
            <ShellContent Title="Settings Page" ContentTemplate="{DataTemplate local:SettingsPage}" />
        </Tab>
    </FlyoutItem>
</Shell>

এখানে:

• FlyoutItem ব্যবহার করে আপনি সাইড মেনু তৈরি করেছেন।
• ShellContent এর মাধ্যমে প্রতিটি পেজের জন্য XAML টেমপ্লেট ডিফাইন করেছেন।
• local:HomePage এবং local:SettingsPage হল HomePage.xaml এবং SettingsPage.xaml-এর জন্য তৈরি করা পেজ।

2. Shell Navigation Methods

Shell তে নেভিগেশন করার জন্য আপনাকে PushAsync, PopAsync, GoToAsync ইত্যাদি মেথড ব্যবহার করতে হয়।

Navigate to a Page using Shell Navigation:

// Navigating to a new page
await Shell.Current.GoToAsync("settings"); // "settings" is the route defined in Shell.xaml

// Pushing a page onto the navigation stack
await Shell.Current.Navigation.PushAsync(new SettingsPage());

GoToAsync মেথডে আপনি route ব্যবহার করে পেজে নেভিগেট করতে পারেন, যা আপনাকে আরও পরিচ্ছন্নভাবে নেভিগেশন করতে সহায়ক হয়।

2. Routing in .NET MAUI

Routing ব্যবহৃত হয় Shell এর মাধ্যমে নির্দিষ্ট পেজে যাওয়ার জন্য। Routes আপনাকে প্রতিটি পেজের জন্য একটি URL বা রুট পাথ তৈরি করতে দেয়, যা আপনাকে Shell থেকে পেজে নেভিগেট করতে সাহায্য করে।

Routing Setup:

AppShell.xaml-এ প্রতিটি পেজের জন্য একটি Route নির্ধারণ করতে হবে।

AppShell.xaml (Defining Routes)

<?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"
       xmlns:local="clr-namespace:ShellNavigationApp"
       x:Class="ShellNavigationApp.AppShell">

    <ShellContent Route="home" Title="Home Page" ContentTemplate="{DataTemplate local:HomePage}" />
    <ShellContent Route="settings" Title="Settings Page" ContentTemplate="{DataTemplate local:SettingsPage}" />
</Shell>

এখানে, Route প্রপার্টি ব্যবহার করে প্রতিটি পেজের জন্য একটি URL Path বা রুট তৈরি করা হয়েছে। এর ফলে, GoToAsync এর মাধ্যমে আপনি নির্দিষ্ট রুট ব্যবহার করে পেজে নেভিগেট করতে পারবেন।

Navigating using Routes (URL-based navigation):

// Navigating to a page via Route
await Shell.Current.GoToAsync("settings"); // Navigating to the settings page using route

// Navigating with parameters
await Shell.Current.GoToAsync("home?userId=123"); // Navigating to home page with a parameter

এখানে, আপনি settings রুটে যাওয়ার জন্য GoToAsync মেথড ব্যবহার করেছেন। এছাড়া, parameterized routingও সম্ভব, যেখানে আপনি রুটের সাথে প্যারামিটার পাস করতে পারেন।

3. Passing Parameters Between Pages using Routing

Routing ব্যবহারের সময়, আপনি প্যারামিটার পাসও করতে পারেন। এক পেজ থেকে অন্য পেজে প্যারামিটার পাস করতে Query Parameters ব্যবহার করা হয়।

Passing Parameters via Route

<ShellContent Route="home">
    <ShellContent.Content>
        <local:HomePage />
    </ShellContent.Content>
</ShellContent>

Navigating with Parameters:

// Navigating with parameters
await Shell.Current.GoToAsync("home?userId=123"); // Passing userId as a query parameter

এখানে, userId প্যারামিটারটি home রুটে পাঠানো হচ্ছে। এটি পরে পেজে গ্রহণ করা যাবে।

Receiving Parameters in the Target Page:

public partial class HomePage : ContentPage
{
    public HomePage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        // Retrieving the parameter
        var userId = Shell.Current.CurrentState.QueryParameters["userId"];
        Console.WriteLine($"User ID: {userId}");
    }
}

এখানে, QueryParameters ব্যবহার করে userId প্যারামিটারটি HomePage-এ রিসিভ করা হচ্ছে।

4. Shell Navigation and Back Navigation

Shell Navigation-এর সাথে Back Navigation-এর কাজ খুবই সহজ। আপনি GoToAsync("..") ব্যবহার করে পূর্ববর্তী পেজে ফিরে যেতে পারেন।

// Going back to the previous page
await Shell.Current.GoToAsync("..");

এটি আপনার অ্যাপ্লিকেশনের স্ট্যাক থেকে পূর্ববর্তী পেজে ফিরে যাবে।

Conclusion:

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

এই কৌশলগুলি আপনার .NET MAUI অ্যাপ্লিকেশনকে আরও দক্ষ এবং ব্যবহারকারী-বান্ধব করে তুলবে।

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

Flyout এবং TabBar উভয়ই Shell এর অংশ হিসেবে ব্যবহৃত হয়, যেখানে Flyout একটি সাইড মেনু (side menu) বা ড্রয়ার হিসেবে কাজ করে এবং TabBar বিভিন্ন ট্যাব বা পেজ সুইচিংয়ের জন্য ব্যবহৃত হয়।

1. Shell Flyout:

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

Flyout সাধারণত Shell এর মধ্যে থাকে এবং বিভিন্ন ShellContent এর মাধ্যমে পেজ এবং নেভিগেশন সম্পাদন করা হয়।

Flyout ব্যবহার করা:

1. Shell Layout তৈরি করা:

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

    <!-- FlyoutItems for navigation -->
    <FlyoutItem Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>
    <FlyoutItem Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>
    
</Shell>

এখানে, দুটি FlyoutItem তৈরি করা হয়েছে—একটি Home এবং একটি Settings পেজের জন্য। প্রতিটি FlyoutItem এর মধ্যে একটি ShellContent রয়েছে যা পেজের কন্টেন্ট প্রদর্শন করবে। ContentTemplate এর মাধ্যমে আমরা কোন পেজটি দেখাতে চাই সেটি নির্দেশ করি।

2. Shell Page (MainShell.xaml.cs) তৈরি করা:

using Microsoft.Maui.Controls;

namespace MauiApp
{
    public partial class MainShell : Shell
    {
        public MainShell()
        {
            InitializeComponent();
        }
    }
}

এখানে MainShell হল মূল Shell পেজ যা Flyout মেনু কনফিগারেশনকে পরিচালনা করে।

2. TabBar:

TabBar হল একটি ট্যাব নেভিগেশন কন্ট্রোল যা সাধারণত অ্যাপের নেভিগেশনের জন্য ব্যবহৃত হয় যেখানে একাধিক পেজের মধ্যে সুইচ করার জন্য ট্যাবগুলি থাকে। TabBar একটি Shell এর অংশ এবং এটি অ্যাপের বিভিন্ন বিভাগে দ্রুত নেভিগেশন করতে সাহায্য করে।

TabBar ব্যবহার করা:

1. TabBar Layout তৈরি করা:

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

    <!-- TabBar for navigation -->
    <TabBar>
        <Tab Title="Home" Icon="home.png">
            <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
        </Tab>
        <Tab Title="Settings" Icon="settings.png">
            <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
        </Tab>
    </TabBar>
    
</Shell>

এখানে, দুটি Tab তৈরি করা হয়েছে—একটি Home এবং একটি Settings ট্যাবের জন্য। Icon অ্যাট্রিবিউট ব্যবহার করে প্রতিটি ট্যাবের জন্য একটি আইকন দেওয়া হয়েছে এবং ContentTemplate ব্যবহার করে পেজের কন্টেন্ট নির্ধারণ করা হয়েছে।

2. Shell Page (MainShell.xaml.cs) তৈরি করা:

using Microsoft.Maui.Controls;

namespace MauiApp
{
    public partial class MainShell : Shell
    {
        public MainShell()
        {
            InitializeComponent();
        }
    }
}

TabBar এখানে দুটি ট্যাব দেখাচ্ছে, যা ব্যবহারকারীকে Home এবং Settings পেজে দ্রুত নেভিগেট করতে দেয়।

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

Flyout এবং TabBar একসাথে ব্যবহার করা:

Flyout এবং TabBar একসাথে ব্যবহার করতে হলে, আপনি উভয় কন্ট্রোলকে একই Shell এ অন্তর্ভুক্ত করতে পারেন। এটি আপনার অ্যাপের নেভিগেশনকে আরও শক্তিশালী করে তোলে।

উদাহরণ:

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

    <!-- Flyout menu -->
    <FlyoutItem Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>

    <FlyoutItem Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>

    <!-- TabBar for navigation -->
    <TabBar>
        <Tab Title="Dashboard" Icon="dashboard.png">
            <ShellContent ContentTemplate="{DataTemplate local:DashboardPage}" />
        </Tab>
        <Tab Title="Profile" Icon="profile.png">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
        </Tab>
    </TabBar>

</Shell>

এখানে, Flyout এবং TabBar একসাথে ব্যবহৃত হয়েছে, যেখানে Flyout মেনু থেকে মূল পেজগুলি নির্বাচিত হতে পারে এবং TabBar ব্যবহার করে বিভিন্ন বিভাগে নেভিগেট করা যায়।

উপসংহার:

• Flyout এবং TabBar হল Shell কন্ট্রোলের অংশ, যা ব্যবহারকারীদের অ্যাপের মধ্যে দ্রুত নেভিগেট করতে সহায়ক।
• Flyout একটি সাইড মেনু হিসেবে কাজ করে এবং TabBar ট্যাবের মাধ্যমে একাধিক পেজে দ্রুত সুইচ করতে দেয়।
• আপনি Flyout এবং TabBar একসাথে ব্যবহার করে একটি শক্তিশালী এবং মসৃণ নেভিগেশন অভিজ্ঞতা তৈরি করতে পারেন।

Shell URI Routing এবং Navigation Parameters .NET MAUI অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ অংশ, যা ডেভেলপারদের অ্যাপ্লিকেশনের মধ্যে স্ক্রীন (পেজ) নেভিগেশন এবং ডেটা পাস করার সুবিধা দেয়। Shell হল .NET MAUI এর একটি বৈশিষ্ট্য যা অ্যাপ্লিকেশনের নেভিগেশন এবং স্ট্রাকচারকে সহজ এবং সোজা করে তোলে।

এখানে Shell URI Routing এবং Navigation Parameters ব্যবহারের মাধ্যমে কিভাবে স্ক্রীন নেভিগেশন এবং ডেটা পাস করা যায় তা ব্যাখ্যা করা হবে।

1. Shell URI Routing

Shell URI Routing হল .NET MAUI তে একটি শক্তিশালী নেভিগেশন সিস্টেম, যা ডেভেলপারদের অ্যাপ্লিকেশন স্ক্রীনগুলোকে ইউআরআই (URI) এর মাধ্যমে রুটিং করার সুযোগ দেয়। আপনি Shell এর মাধ্যমে স্ক্রীনগুলোর মধ্যে সহজে নেভিগেট করতে পারেন এবং নির্দিষ্ট স্ক্রীন (পেজ) এ ডেটা পাস করতে পারেন।

Step 1: Shell URI Routing এর জন্য Shell Structure তৈরি করা

প্রথমে, 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"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <ShellContent Route="home" ContentTemplate="{DataTemplate local:HomePage}" />
    <ShellContent Route="details" ContentTemplate="{DataTemplate local:DetailPage}" />
    
</Shell>

এখানে, ShellContent এর মধ্যে Route প্রপার্টি দ্বারা স্ক্রীন রুট করা হয়েছে, যেমন:

• home: হোম পেজের জন্য রুট।
• details: ডিটেইল পেজের জন্য রুট।

Step 2: URI Routing এর মাধ্যমে স্ক্রীন নেভিগেট করা

আপনি Shell এর মাধ্যমে স্ক্রীন নেভিগেশন করতে পারেন। এর জন্য, GoToAsync মেথড ব্যবহার করতে হবে।

// Navigate to the "details" page
await Shell.Current.GoToAsync("details");

এখানে, "details" রুটে পেজ নেভিগেট হবে।

Step 3: Query Parameters ব্যবহার করে ডেটা পাস করা

এখন, URI এর মাধ্যমে আপনি প্যারামিটার পাস করতে পারেন। GoToAsync মেথডের মধ্যে কুইরি প্যারামিটার পাস করা যাবে।

// Navigate to "details" page with a query parameter
await Shell.Current.GoToAsync("details?itemId=123&itemName=TestItem");

এখানে, "itemId" এবং "itemName" কুইরি প্যারামিটার হিসাবে পাস করা হয়েছে।

Step 4: Query Parameters গ্রহন করা

ডিটেইল পেজে কুইরি প্যারামিটার গ্রহন করতে, QueryProperty অ্যাট্রিবিউট ব্যবহার করতে হবে।

public partial class DetailPage : ContentPage
{
    public string ItemId { get; set; }
    public string ItemName { get; set; }

    public DetailPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // Access the query parameters
        ItemId = (string)Shell.Current?.Parameters["itemId"];
        ItemName = (string)Shell.Current?.Parameters["itemName"];
    }
}

এখানে, Shell.Current?.Parameters ব্যবহার করে কুইরি প্যারামিটারগুলি এক্সেস করা হয়েছে এবং সেগুলি পেজে প্রদর্শন করা হয়েছে।

2. Navigation Parameters

Navigation Parameters ব্যবহার করে, আপনি এক পেজ থেকে অন্য পেজে ডেটা পাঠাতে পারেন। যখন আপনি একটি পেজ নেভিগেট করেন, তখন প্যারামিটার পাস করা যায় এবং পরবর্তী পেজে সেগুলি এক্সেস করা যায়।

Step 1: Navigation Parameters পাঠানো

NavigateAsync মেথড ব্যবহার করে আপনি প্যারামিটার পাস করতে পারেন।

// Pass parameters while navigating to the DetailsPage
await Navigation.PushAsync(new DetailPage(), true, new Dictionary<string, object>
{
    { "ItemId", 123 },
    { "ItemName", "TestItem" }
});

এখানে, ItemId এবং ItemName প্যারামিটার পাস করা হয়েছে DetailPage-এ।

Step 2: Navigation Parameters গ্রহণ করা

DetailPage-এ প্যারামিটারগুলি গ্রহণ করার জন্য OnAppearing বা OnNavigatedTo মেথড ব্যবহার করতে হবে।

public partial class DetailPage : ContentPage
{
    public int ItemId { get; set; }
    public string ItemName { get; set; }

    public DetailPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        // Access the navigation parameters
        if (Navigation.NavigationStack.LastOrDefault() is DetailPage lastPage)
        {
            ItemId = (int)Navigation.GetParam("ItemId");
            ItemName = (string)Navigation.GetParam("ItemName");
        }
    }
}

এখানে, Navigation.GetParam("ItemId") এবং Navigation.GetParam("ItemName") ব্যবহার করে প্যারামিটারগুলো গ্রহণ করা হচ্ছে।

3. Conclusion

• Shell URI Routing: এটি আপনাকে অ্যাপ্লিকেশনের স্ক্রীনগুলির মধ্যে সহজভাবে নেভিগেট করতে সহায়তা করে। আপনি স্ক্রীনগুলোর রুট ব্যবহার করতে পারেন এবং কুইরি প্যারামিটার পাস করতে পারেন।
• Navigation Parameters: এটি আপনাকে পেজগুলোর মধ্যে ডেটা পাঠানোর সুযোগ দেয়। আপনি ডেটা পাস করতে পারেন এবং পরবর্তী পেজে সেই ডেটা গ্রহণ করতে পারেন।

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