Mobile App Development Shell Flyout এবং TabBar ব্যবহার গাইড ও নোট

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 একসাথে ব্যবহার করে একটি শক্তিশালী এবং মসৃণ নেভিগেশন অভিজ্ঞতা তৈরি করতে পারেন।