Microsoft Technologies Navigation এবং Page Management Techniques গাইড ও নোট

Windows Application Development-এ, বিশেষ করে WPF, UWP, এবং WinUI অ্যাপ্লিকেশনে Navigation এবং Page Management অত্যন্ত গুরুত্বপূর্ণ। অ্যাপ্লিকেশনগুলোর মধ্যে বিভিন্ন পেজের মধ্যে সহজে নেভিগেট করা, ডেটা ট্রান্সফার করা এবং ইউজার এক্সপেরিয়েন্স উন্নত করার জন্য এই টেকনিকগুলি ব্যবহার করা হয়। নেভিগেশন এবং পেজ ম্যানেজমেন্টের মাধ্যমে একাধিক পেজ তৈরি করে ইউজারকে আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করা সম্ভব।

এই টিউটোরিয়ালে আমরা Navigation এবং Page Management সম্পর্কিত বিভিন্ন টেকনিক আলোচনা করব, যেগুলি WPF, UWP, এবং WinUI অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়।

১. Navigation in WPF (Hyperlink, NavigationWindow, Frame)

WPF অ্যাপ্লিকেশনে নেভিগেশন সাধারণত NavigationWindow, Frame, বা Hyperlink ব্যবহার করে করা হয়।

NavigationWindow

NavigationWindow হল WPF এর একটি উইন্ডো টাইপ, যা Page নামক কন্টেন্ট লোড করতে ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনটিকে একাধিক পেজ নিয়ে কাজ করার সুযোগ দেয়।

উদাহরণ:

<NavigationWindow x:Class="MyApp.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Title="Navigation Example" Height="350" Width="525">
    <NavigationWindow.Content>
        <Frame Source="Page1.xaml"/>
    </NavigationWindow.Content>
</NavigationWindow>

ব্যাখ্যা:

• Frame ব্যবহার করে একটি পেজ (যেমন Page1.xaml) লোড করা হয়েছে।
• অ্যাপ্লিকেশনটি একাধিক পেজ দিয়ে কাজ করবে, যেগুলি পরস্পরের মধ্যে নেভিগেট করা যাবে।

Frame এবং Page

Frame কন্ট্রোলটি ব্যবহার করে UI-এর মধ্যে পেজ লোড করা এবং নেভিগেট করা হয়। একাধিক Page ব্যবহার করে অ্যাপ্লিকেশনটি বিভিন্ন অংশে বিভক্ত করা যায়।

উদাহরণ:

MainWindow.xaml:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Navigation Example" Height="350" Width="525">
    <Frame Name="MainFrame" NavigationUIVisibility="Hidden"/>
</Window>

Page1.xaml:

<Page x:Class="MyApp.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Page 1">
    <Button Content="Go to Page 2" Click="NavigateToPage2"/>
</Page>

Page1.xaml.cs:

private void NavigateToPage2(object sender, RoutedEventArgs e)
{
    MainFrame.Navigate(new Page2());
}

ব্যাখ্যা:

• Frame কন্ট্রোল দিয়ে একটি পেজের ভিতরে অন্য পেজ লোড করা হচ্ছে।
• একটি পেজ থেকে অন্য পেজে নেভিগেট করার জন্য Navigate() মেথড ব্যবহার করা হয়েছে।

২. Navigation in UWP (Frame, NavigationService)

UWP অ্যাপ্লিকেশনেও Frame এবং NavigationService ব্যবহার করে পেজ নেভিগেট করা হয়। UWP অ্যাপ্লিকেশনগুলিতে Page এর সাথে নেভিগেশন করতে সক্ষম।

উদাহরণ:

MainPage.xaml:

<Page x:Class="MyApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Main Page">

    <Button Content="Go to Next Page" Click="GoToNextPage"/>
</Page>

MainPage.xaml.cs:

private void GoToNextPage(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(SecondPage));
}

ব্যাখ্যা:

• Frame.Navigate(typeof(Page)) ব্যবহার করে নতুন পেজে নেভিগেট করা হয়।
• Button এর ক্লিক ইভেন্টে পেজ নেভিগেশন ঘটানো হয়।

৩. Navigation in WinUI (NavigationView, Frame)

WinUI, যা Microsoft-এর আধুনিক UI লাইব্রেরি, NavigationView এবং Frame কন্ট্রোল ব্যবহার করে পেজ নেভিগেশন সমর্থন করে।

উদাহরণ:

MainPage.xaml:

<Window x:Class="MyApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp"
        Title="WinUI Navigation" Height="450" Width="800">
    <NavigationView>
        <Frame Name="ContentFrame"/>
    </NavigationView>
</Window>

MainPage.xaml.cs:

private void GoToPage(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(typeof(SecondPage));
}

ব্যাখ্যা:

• NavigationView WinUI অ্যাপ্লিকেশনের মধ্যে নেভিগেশন ব্যবস্থাপনাকে সহজ করে তোলে।
• Frame ব্যবহার করে পেজে নেভিগেট করা হয় এবং ContentFrame.Navigate এর মাধ্যমে নতুন পেজ লোড করা হয়।

৪. Page Management Techniques

Data Passing Between Pages

পেজের মধ্যে ডেটা পাস করার জন্য কিছু টেকনিক ব্যবহৃত হয়, যেমন:

• Query Strings: একটি পেজ থেকে অন্য পেজে URL মাধ্যমে ডেটা পাঠানো।
• DataContext: ডেটা বাইন্ডিং-এর মাধ্যমে এক পেজ থেকে অন্য পেজে ডেটা পাঠানো।

উদাহরণ:

Page1.xaml.cs:

private void NavigateToPage2(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(Page2), "Some data to pass");
}

Page2.xaml.cs:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string passedData = e.Parameter as string;
    // Use the passedData
}

Back Navigation and History Management

GoBack() মেথড ব্যবহার করে ইউজারকে পূর্ববর্তী পেজে নেভিগেট করা যায়।

উদাহরণ:

private void GoBack(object sender, RoutedEventArgs e)
{
    if (this.Frame.CanGoBack)
    {
        this.Frame.GoBack();
    }
}

৫. State Management and Navigation

নেভিগেশনের সময় অ্যাপ্লিকেশনের স্টেট (ডেটা বা পেজের অবস্থা) সংরক্ষণ এবং পুনরুদ্ধার করার জন্য Suspension এবং Resumption ব্যবহার করা হয়, যা অ্যাপ্লিকেশনের ক্লোজ এবং রিস্টার্টের পরেও ইউজারের অভিজ্ঞতা সংরক্ষণ করে।

উপসংহার

Navigation এবং Page Management Techniques WPF, UWP, এবং WinUI অ্যাপ্লিকেশনগুলির মধ্যে UI কে ম্যানেজ এবং নেভিগেট করার জন্য অপরিহার্য টেকনিক। Frame, Page, Navigate(), CanGoBack(), এবং Data Passing এর মতো টেকনিকগুলি ইউজারকে একাধিক পেজের মধ্যে সহজভাবে নেভিগেট করার সুযোগ দেয় এবং অ্যাপ্লিকেশনের কার্যকারিতা এবং অভিজ্ঞতা উন্নত করে।

Windows Application Development-এ Frame এবং Page কন্ট্রোল ব্যবহার করে সহজে একটি নেভিগেশন সিস্টেম তৈরি করা যায়। Frame হলো একটি কন্ট্রোল যা বিভিন্ন পেজের মধ্যে নেভিগেশন করতে সাহায্য করে এবং Page হলো একটি UI উপাদান যা বিভিন্ন কন্ট্রোল এবং কনটেন্ট ধারণ করে।

এই টিউটোরিয়ালে XAML এবং C# ব্যবহার করে একটি মৌলিক নেভিগেশন সিস্টেম তৈরি করার প্রক্রিয়া দেখানো হবে।

Frame এবং Page এর ভূমিকা

• Frame: Frame হলো একটি কন্ট্রোল যা একাধিক Page কন্ট্রোলের মধ্যে নেভিগেশন সিস্টেম পরিচালনা করে।
• Page: Page হলো একটি কন্ট্রোল যা UI কন্ট্রোল, লেআউট এবং কনটেন্ট ধারণ করে, যা Frame এর মধ্যে প্রদর্শিত হয়।

Frame এবং Page ব্যবহার করে Navigation System তৈরি

এই উদাহরণে একটি সিম্পল অ্যাপ্লিকেশন তৈরি করা হবে, যেখানে দুটি পেজ থাকবে এবং একটি Frame এর মাধ্যমে তাদের মধ্যে নেভিগেট করা যাবে।

ধাপ ১: নতুন প্রজেক্ট তৈরি

1. Visual Studio খুলুন এবং একটি নতুন WPF Application প্রজেক্ট তৈরি করুন।
2. প্রজেক্টের নাম দিন, যেমন NavigationExample।

ধাপ ২: MainWindow.xaml তৈরি করা

MainWindow.xaml ফাইলটি প্রথম পেজ হিসেবে কাজ করবে। এখানে একটি Frame থাকবে, যা দুটি পেজের মধ্যে নেভিগেট করবে।

MainWindow.xaml:

<Window x:Class="NavigationExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Navigation Example" Height="350" Width="525">
    <Grid>
        <Frame Name="MainFrame" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

• এখানে একটি Frame কন্ট্রোল ব্যবহার করা হয়েছে যা MainFrame নামে পরিচিত।
• NavigationUIVisibility="Hidden" ব্যবহার করে নেভিগেশন বারটি লুকানো হয়েছে, কারণ আমরা নেভিগেশনটি কোডবিহাইন্ডে হ্যান্ডেল করব।

ধাপ ৩: Page তৈরি করা

এখন দুটি Page তৈরি করবো, যেগুলি বিভিন্ন কন্ট্রোল ধারণ করবে এবং Frame এর মাধ্যমে নেভিগেট হবে।

1. FirstPage.xaml:
   • এটি প্রথম পেজ হিসেবে কাজ করবে।

<Page x:Class="NavigationExample.FirstPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="First Page">
    <Grid>
        <Button Content="Go to Second Page" HorizontalAlignment="Center" VerticalAlignment="Center" Click="NavigateToSecondPage"/>
    </Grid>
</Page>

• Button ব্যবহার করা হয়েছে, যার Click ইভেন্টটি NavigateToSecondPage মেথডের সাথে সংযুক্ত।

2. SecondPage.xaml:
   • এটি দ্বিতীয় পেজ হিসেবে কাজ করবে।

<Page x:Class="NavigationExample.SecondPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Second Page">
    <Grid>
        <Button Content="Go to First Page" HorizontalAlignment="Center" VerticalAlignment="Center" Click="NavigateToFirstPage"/>
    </Grid>
</Page>

• এই পেজেও একটি Button রয়েছে, যা দ্বিতীয় পেজ থেকে প্রথম পেজে নেভিগেট করবে।

ধাপ ৪: কোড-বিহাইন্ড তৈরি করা

এখন আমরা C# কোড ব্যবহার করে পেজগুলোতে নেভিগেশন ইভেন্ট হ্যান্ডল করব।

1. FirstPage.xaml.cs:

using System.Windows;
using System.Windows.Controls;

namespace NavigationExample
{
    public partial class FirstPage : Page
    {
        public FirstPage()
        {
            InitializeComponent();
        }

        private void NavigateToSecondPage(object sender, RoutedEventArgs e)
        {
            // Navigate to SecondPage
            this.NavigationService.Navigate(new SecondPage());
        }
    }
}

• NavigateToSecondPage মেথডটি SecondPage এ নেভিগেট করতে সাহায্য করবে।

2. SecondPage.xaml.cs:

using System.Windows;
using System.Windows.Controls;

namespace NavigationExample
{
    public partial class SecondPage : Page
    {
        public SecondPage()
        {
            InitializeComponent();
        }

        private void NavigateToFirstPage(object sender, RoutedEventArgs e)
        {
            // Navigate to FirstPage
            this.NavigationService.Navigate(new FirstPage());
        }
    }
}

• NavigateToFirstPage মেথডটি FirstPage এ নেভিগেট করতে সাহায্য করবে।

ধাপ ৫: MainWindow.xaml.cs সেটআপ করা

এখন আমরা MainWindow.xaml.cs ফাইলে প্রথম পেজের জন্য Frame সেট আপ করব।

using System.Windows;

namespace NavigationExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MainFrame.Navigate(new FirstPage());  // Navigate to FirstPage when the application starts
        }
    }
}

• MainFrame.Navigate(new FirstPage()) ব্যবহার করে অ্যাপ্লিকেশন শুরু হলে প্রথম পেজটি লোড হবে।

উপসংহার

এখন আপনার অ্যাপ্লিকেশন প্রস্তুত, এবং এটি দুটি পেজের মধ্যে সঠিকভাবে নেভিগেট করবে। প্রথম পেজ থেকে দ্বিতীয় পেজে এবং দ্বিতীয় পেজ থেকে প্রথম পেজে ক্লিকের মাধ্যমে নেভিগেট করা যাবে। Frame এবং Page কন্ট্রোলের মাধ্যমে এই ধরণের নেভিগেশন সিস্টেম তৈরি করা খুবই সহজ এবং কার্যকরী।

এটি WPF অ্যাপ্লিকেশনের জন্য একটি মৌলিক নেভিগেশন সিস্টেম তৈরি করার প্রক্রিয়া। আপনার প্রয়োজন অনুযায়ী, আরও পেজ এবং কন্ট্রোল যুক্ত করে এই সিস্টেমটি উন্নত করা যেতে পারে।

Windows Presentation Foundation (WPF), UWP (Universal Windows Platform), এবং WinUI অ্যাপ্লিকেশন তৈরি করার সময় Navigation History এবং Back/Forward Button-এর মাধ্যমে ব্যবহারকারীর গতিবিধি ট্র্যাক করা এবং নেভিগেশন ইতিহাস বজায় রাখা একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। এই টিউটোরিয়ালে Navigation History এবং Back/Forward Buttons কিভাবে কার্যকরভাবে ইমপ্লিমেন্ট করা যায় তা দেখানো হবে।

Navigation History কী?

Navigation History ব্যবহারকারী যখন অ্যাপ্লিকেশনে বিভিন্ন পৃষ্ঠায় (Pages) নেভিগেট করেন, তখন সেগুলোর একটি ইতিহাস তৈরি হয়। এই ইতিহাস ব্যবহারকারীকে Back এবং Forward বাটন ব্যবহার করে পূর্ববর্তী পৃষ্ঠায় ফিরে যেতে বা পরবর্তী পৃষ্ঠায় যেতে সাহায্য করে।

Back/Forward Button Implementation

WPF, UWP বা WinUI এ Back এবং Forward বাটন ইমপ্লিমেন্ট করার জন্য NavigationService বা Frame ব্যবহার করা হয়। চলুন দেখা যাক কিভাবে Back এবং Forward বাটন কার্যকরভাবে ইমপ্লিমেন্ট করা যায়।

WPF Example: Back and Forward Button Using NavigationService

WPF-এ Frame কন্ট্রোল ব্যবহার করে পেজ নেভিগেশন এবং ইতিহাস পরিচালনা করা হয়। Back এবং Forward বাটন ব্যবহারকারীকে সহজে পূর্ববর্তী বা পরবর্তী পৃষ্ঠায় নেভিগেট করতে সাহায্য করে।

Step 1: Page Navigation Setup

MainWindow.xaml:

<Window x:Class="NavigationHistoryExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Navigation History Example" Height="350" Width="525">
    <Grid>
        <Frame Name="mainFrame" NavigationUIVisibility="Hidden" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button Content="Back" Click="BackButton_Click" Width="100" Margin="10"/>
            <Button Content="Forward" Click="ForwardButton_Click" Width="100" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

Step 2: Back and Forward Button Code

MainWindow.xaml.cs:

using System.Windows;

namespace NavigationHistoryExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            mainFrame.Navigate(new Page1());
        }

        private void BackButton_Click(object sender, RoutedEventArgs e)
        {
            if (mainFrame.CanGoBack)
            {
                mainFrame.GoBack();
            }
        }

        private void ForwardButton_Click(object sender, RoutedEventArgs e)
        {
            if (mainFrame.CanGoForward)
            {
                mainFrame.GoForward();
            }
        }
    }
}

Step 3: Create Pages for Navigation

Page1.xaml:

<Page x:Class="NavigationHistoryExample.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Page1">
    <Grid>
        <Button Content="Go to Page 2" Click="GoToPage2_Click" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Page>

Page1.xaml.cs:

using System.Windows;

namespace NavigationHistoryExample
{
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
        }

        private void GoToPage2_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.Navigate(new Page2());
        }
    }
}

Page2.xaml:

<Page x:Class="NavigationHistoryExample.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Page2">
    <Grid>
        <Button Content="Go to Page 1" Click="GoToPage1_Click" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Page>

Page2.xaml.cs:

using System.Windows;

namespace NavigationHistoryExample
{
    public partial class Page2 : Page
    {
        public Page2()
        {
            InitializeComponent();
        }

        private void GoToPage1_Click(object sender, RoutedEventArgs e)
        {
            this.NavigationService.Navigate(new Page1());
        }
    }
}

Step 4: Explanation

• mainFrame.Navigate: প্রথমে Page1 এ নেভিগেট করে।
• BackButton_Click: GoBack() ব্যবহার করে previous page-এ ফিরে যায়।
• ForwardButton_Click: GoForward() ব্যবহার করে next page-এ চলে যায়।
• NavigationService: এটি WPF পেজ নেভিগেশনের জন্য ব্যবহৃত প্রধান ক্লাস, যা নেভিগেশন ইতিহাস পরিচালনা করে।

UWP Example: Back and Forward Button Using Frame

UWP-এ পেজ নেভিগেশন খুব সহজ এবং Frame কন্ট্রোল ব্যবহার করে Back/Forward বাটন ইমপ্লিমেন্ট করা হয়।

Step 1: Page Navigation Setup

MainPage.xaml:

<Page
    x:Class="NavigationHistoryExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Go to Page 2" Click="GoToPage2_Click"/>
        <Button Content="Back" Click="BackButton_Click" Margin="10"/>
        <Button Content="Forward" Click="ForwardButton_Click" Margin="10"/>
    </StackPanel>
</Page>

Step 2: Code Behind

MainPage.xaml.cs:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace NavigationHistoryExample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void GoToPage2_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(Page2));
        }

        private void BackButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.Frame.CanGoBack)
            {
                this.Frame.GoBack();
            }
        }

        private void ForwardButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.Frame.CanGoForward)
            {
                this.Frame.GoForward();
            }
        }
    }
}

Key Methods for Navigation

1. CanGoBack: এটি চেক করে যে, ব্যবহারকারী পূর্ববর্তী পৃষ্ঠায় ফিরে যেতে পারবেন কিনা।
2. CanGoForward: এটি চেক করে যে, ব্যবহারকারী পরবর্তী পৃষ্ঠায় যেতে পারবেন কিনা।
3. GoBack(): এটি ব্যবহারকারীকে পূর্ববর্তী পৃষ্ঠায় নিয়ে যায়।
4. GoForward(): এটি ব্যবহারকারীকে পরবর্তী পৃষ্ঠায় নিয়ে যায়।

Conclusion

Navigation History এবং Back/Forward Buttons ব্যবহারকারীর গতিবিধি এবং নেভিগেশন ইতিহাস পরিচালনার জন্য অপরিহার্য বৈশিষ্ট্য। WPF এবং UWP অ্যাপ্লিকেশনগুলিতে এই ফিচারটি কার্যকরভাবে ইমপ্লিমেন্ট করা যায়, যা ব্যবহারকারীর জন্য একটি উন্নত এবং ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করে। XAML এবং C# এর মাধ্যমে সহজে এই ফিচারটি ইমপ্লিমেন্ট করা সম্ভব।

Windows application development-এ Master-Detail Layout এবং Data Passing Between Pages দুটি গুরুত্বপূর্ণ টেকনিক। এগুলি সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশন এবং ডেটা ব্যবস্থাপনা ব্যবস্থাকে আরও উন্নত এবং কার্যকর করে তোলে। Master-Detail Layout সাধারণত অ্যাপ্লিকেশনের UI ডিজাইনে ব্যবহৃত হয় যেখানে প্রধান (Master) পেজের উপর ভিত্তি করে বিস্তারিত (Detail) পেজের কন্টেন্ট পরিবর্তিত হয়। Data Passing Between Pages ডেটা এক পেজ থেকে অন্য পেজে প্রেরণ করতে ব্যবহৃত হয়।

Master-Detail Layout

Master-Detail Layout হল একটি ডিজাইন প্যাটার্ন যেখানে দুটি ভিন্ন দৃশ্য (Views) থাকে:

1. Master View: এটি একটি লিস্ট বা সেকশনের মতো ডেটার সারাংশ প্রদর্শন করে। সাধারণত এটি একটি তালিকা, গ্রিড বা মেনু যা ব্যবহারকারীকে বেছে নিতে দেয়।
2. Detail View: এটি Master View-এ নির্বাচিত আইটেমের বিস্তারিত প্রদর্শন করে।

এই প্যাটার্নটি মোবাইল অ্যাপ্লিকেশন বা ডেস্কটপ অ্যাপ্লিকেশন ডিজাইনে খুবই জনপ্রিয়, বিশেষত যেখানে অনেক তথ্য থাকে এবং একে একে সেগুলোর বিস্তারিত দেখতে হয়।

উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশনে Contacts লিস্ট (Master) এবং প্রতিটি কন্টাক্টের বিস্তারিত তথ্য (Detail) দেখানোর ব্যবস্থা আছে।

Master View (Contact List):

<ListBox Name="ContactsList" SelectionChanged="ContactsList_SelectionChanged">
    <ListBoxItem Content="John Doe"/>
    <ListBoxItem Content="Jane Smith"/>
    <ListBoxItem Content="Samuel Green"/>
</ListBox>

Detail View (Contact Details):

<StackPanel>
    <TextBlock Name="ContactName"/>
    <TextBlock Name="ContactPhone"/>
    <TextBlock Name="ContactEmail"/>
</StackPanel>

C# কোড (Data Passing):

private void ContactsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ListBox listBox = sender as ListBox;
    ListBoxItem selectedItem = listBox.SelectedItem as ListBoxItem;
    if (selectedItem != null)
    {
        string selectedContact = selectedItem.Content.ToString();

        // Show the contact details in the Detail View
        ContactName.Text = selectedContact;
        // Assume the phone and email are fetched based on the selected contact
        ContactPhone.Text = "123-456-7890";
        ContactEmail.Text = "email@example.com";
    }
}

ব্যাখ্যা:

• Master View-এ একটি ListBox ব্যবহার করা হয়েছে যেখানে কন্টাক্টের নাম রয়েছে।
• Detail View-এ কন্টাক্টের বিস্তারিত তথ্য দেখানো হবে।
• যখন একটি কন্টাক্ট লিস্ট থেকে নির্বাচিত হবে, তখন SelectionChanged ইভেন্টের মাধ্যমে ডেটা Detail View-এ পাঠানো হয়।

Data Passing Between Pages

এক পেজ থেকে অন্য পেজে ডেটা পাঠানোর জন্য বিভিন্ন পদ্ধতি ব্যবহার করা যেতে পারে, যেমন: Query Strings, Navigation Parameters, অথবা Dependency Properties।

১. Query Strings (যেমন: Web API)

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

২. Navigation Parameters

Windows-এ NavigationService ব্যবহার করে পেজ থেকে পেজে ডেটা পাঠানো যায়। NavigationParameters বা PageNavigationEventArgs এর মাধ্যমে ডেটা পাঠানো যেতে পারে।

উদাহরণ:

ধরা যাক, আপনার অ্যাপ্লিকেশনে একটি প্রোফাইল পেজ আছে এবং আপনি ইউজারের নাম পরবর্তী পেজে পাঠাতে চান।

Page 1 (Master Page):

<Button Content="Go to Profile" Click="GoToProfile_Click"/>

private void GoToProfile_Click(object sender, RoutedEventArgs e)
{
    // Navigating to Profile Page and passing data
    ProfilePage profilePage = new ProfilePage();
    profilePage.UserName = "John Doe";  // Setting the data to pass
    this.NavigationService.Navigate(profilePage);  // Navigating to ProfilePage
}

Page 2 (Detail Page: ProfilePage):

<TextBlock Name="UserNameTextBlock"/>

public string UserName { get; set; }  // Property to hold the passed data

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    UserNameTextBlock.Text = UserName;  // Displaying the passed data
}

ব্যাখ্যা:

• ProfilePage ক্লাসে একটি UserName প্রোপার্টি ব্যবহার করা হয়েছে, যা পেজের মধ্যে ডেটা সেট করার জন্য ব্যবহৃত হয়।
• Page 1 থেকে ডেটা প্রোপার্টি সেট করে, পেজ পরিবর্তন করার পর পরবর্তী পেজে এটি প্রদর্শিত হয়।

৩. Using Dependency Properties (Advanced)

ডেটা পাঠানোর আরও একটি পদ্ধতি হলো Dependency Properties ব্যবহার করা। এটি ডেটা শেয়ার করার জন্য WPF এবং UWP অ্যাপ্লিকেশনগুলোতে ব্যবহৃত হয়।

উদাহরণ:

public static readonly DependencyProperty UserNameProperty =
    DependencyProperty.Register("UserName", typeof(string), typeof(MainPage), new PropertyMetadata(string.Empty));

public string UserName
{
    get { return (string)GetValue(UserNameProperty); }
    set { SetValue(UserNameProperty, value); }
}

এটি আরও উন্নত এবং কার্যকরী ডেটা শেয়ারিং পদ্ধতি যখন আপনাকে UI থেকে ডেটা পাঠাতে হবে এবং একই সাথে ডেটার পরিবর্তনকে UI-তে প্রতিফলিত করতে হবে।

উপসংহার

Master-Detail Layout এবং Data Passing Between Pages দুইটি গুরুত্বপূর্ণ UI ডিজাইন প্যাটার্ন, যা ডেটার প্রদর্শন এবং ব্যবহারকারী ইন্টারঅ্যাকশন আরও সুবিধাজনক করে তোলে। Master-Detail Layout প্যাটার্নের মাধ্যমে সহজে জটিল তথ্য প্রেজেন্টেশন তৈরি করা যায় এবং Data Passing এর মাধ্যমে এক পেজ থেকে অন্য পেজে ডেটা পাঠানো যায়। WPF, UWP, এবং WinUI এর মাধ্যমে এই প্যাটার্নগুলো বাস্তবায়ন করা সহজ এবং কার্যকরী।

NavigationView হলো Windows 10 এবং Windows 11 অ্যাপ্লিকেশনের জন্য Microsoft-এর আধুনিক ইউজার ইন্টারফেস ডিজাইন কন্ট্রোল। এটি সাইডবার নেভিগেশন তৈরি করার জন্য ব্যবহৃত হয়, যা ইউজারদের অ্যাপ্লিকেশনের বিভিন্ন অংশে সহজে নেভিগেট করতে সহায়তা করে। Modern UI Design বা "Fluent Design" হল Microsoft-এর ডিজাইন ভাষা, যা আধুনিক, প্রফেশনাল এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়।

এই টিউটোরিয়ালে NavigationView কন্ট্রোল এবং Modern UI Design সম্পর্কে আলোচনা করা হবে।

NavigationView কী?

NavigationView হলো একটি কন্ট্রোল, যা সাধারণত সাইডবার নেভিগেশন বা মেনু সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি Windows 10 এবং Windows 11 এ ব্যবহারকারীদের জন্য নেভিগেশন প্রক্রিয়া আরও সহজ এবং মসৃণ করে। NavigationView তে সাধারণত Hamburger Menu, Flyout, এবং Top Navigation অপশন থাকে।

বৈশিষ্ট্য:

• Hamburger Menu: সাইডবার লুকানোর এবং দেখানোর অপশন।
• Automatic Pane Visibility: সাইডবারের দৃশ্যমানতা ব্যবহারকারীর স্ক্রীন আকারের ওপর নির্ভর করে।
• Items: বিভিন্ন নেভিগেশন আইটেম (এমনকি সাব-মেনু) সরাসরি প্রদর্শিত হতে পারে।
• Customizable: নিজের প্রয়োজন অনুসারে মেনু কাস্টমাইজ করা যায়।

উদাহরণ:

<NavigationView PaneDisplayMode="Left">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Settings" Icon="Settings"/>
        <NavigationViewItem Content="Help" Icon="Help"/>
    </NavigationView.MenuItems>
    <Frame x:Name="MainFrame"/>
</NavigationView>

ব্যাখ্যা:

• PaneDisplayMode="Left": সাইডবার বাম দিকে প্রদর্শিত হবে।
• MenuItems: মেনুর আইটেমগুলো, যেমন Home, Settings এবং Help।
• Frame: অ্যাপ্লিকেশন পেজের কন্টেন্ট ডিফাইন করার জন্য ব্যবহৃত হয়।

Modern UI Design (Fluent Design System)

Modern UI Design বা Fluent Design System হলো Microsoft-এর ডিজাইন ভাষা, যা Windows, UWP, WinUI, এবং অন্যান্য Microsoft প্ল্যাটফর্মের জন্য ইউজার ইন্টারফেস ডিজাইন করতে ব্যবহৃত হয়। Fluent Design সরল এবং সুসংগঠিত ডিজাইন উপাদান ব্যবহার করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

প্রধান বৈশিষ্ট্য:

• Light, Depth, Motion, Material, and Scale: পাঁচটি প্রধান বৈশিষ্ট্যের মাধ্যমে আধুনিক ডিজাইন তৈরি করা হয়।
• Transparency: গ্লাস-স্টাইল ট্রান্সপারেন্সি এবং ব্লার ইফেক্ট।
• Animations: UI উপাদানগুলোর মধ্যে মসৃণ অ্যানিমেশন এবং ট্রানজিশন।
• Accent Color: অ্যাপ্লিকেশনের রঙ এবং স্টাইল কাস্টমাইজ করার জন্য অ্যাকসেন্ট কালার ব্যবহৃত হয়।

উদাহরণ: Fluent Design-এ Glass Effect

<Window Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="Transparent">
        <Button Content="Click Me" Background="White" BorderBrush="Transparent" BorderThickness="1" Width="200" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button.Effect>
                <BlurEffect Radius="10"/>
            </Button.Effect>
        </Button>
    </Grid>
</Window>

ব্যাখ্যা:

• BlurEffect: গ্লাস-এফেক্ট তৈরি করতে ব্যবহৃত হয়, যা একটি মসৃণ এবং আধুনিক ডিজাইন প্রদর্শন করে।

NavigationView এর সঙ্গে Modern UI Design

NavigationView কন্ট্রোল এবং Fluent Design একত্রে ব্যবহার করে অত্যাধুনিক এবং ফ্লুইড ইউজার ইন্টারফেস ডিজাইন করা যায়। NavigationView এর মধ্যে Fluent Design সিস্টেমের কিছু বৈশিষ্ট্য, যেমন টানানো ফ্লাইআউট, আধুনিক স্টাইলিং এবং মসৃণ অ্যানিমেশনসহ, সহায়ক হতে পারে।

উদাহরণ: NavigationView এবং Fluent Design একত্রে ব্যবহৃত:

<NavigationView PaneDisplayMode="Left" IsPaneOpen="True" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Settings" Icon="Settings"/>
        <NavigationViewItem Content="About" Icon="Information"/>
    </NavigationView.MenuItems>
    <Frame x:Name="MainFrame"/>
</NavigationView>

ব্যাখ্যা:

• Background="{ThemeResource ApplicationPageBackgroundThemeBrush}": Fluent Design এর প্রেক্ষাপটে ব্যাকগ্রাউন্ড সেট করা হয়েছে।
• NavigationViewItem: মেনুর আইটেমগুলো ফ্লুইড ডিজাইনের অংশ হিসেবে প্রদর্শিত হচ্ছে।

NavigationView এবং Modern UI Design-এর সুবিধা

• ব্যবহারকারীর অভিজ্ঞতা উন্নত: সাইডবার নেভিগেশন এবং মসৃণ অ্যানিমেশন ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
• ফ্লেক্সিবল এবং কাস্টমাইজেবল: NavigationView কাস্টমাইজ করা যায় এবং বিভিন্ন সাইডবার ডিজাইন সিস্টেম তৈরি করা যায়।
• রেসপন্সিভ ডিজাইন: স্ক্রীন সাইজ অনুসারে NavigationView সাইডবারের দৃশ্যমানতা পরিবর্তিত হতে পারে।
• আধুনিক এবং আকর্ষণীয় UI: Fluent Design এর মাধ্যমে অ্যাপ্লিকেশনের ডিজাইন আরও আধুনিক এবং মার্জিত হয়।

উপসংহার

NavigationView এবং Modern UI Design (Fluent Design) Windows অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি শক্তিশালী এবং আধুনিক টুলস। NavigationView ব্যবহার করে একে অপরের সঙ্গে সম্পর্কিত পেজের মধ্যে সহজে নেভিগেট করা সম্ভব, এবং Fluent Design অ্যাপ্লিকেশনটিকে আরও ব্যবহারকারীর কাছে আকর্ষণীয় এবং কার্যকরী করে তোলে। এই দুটি কন্ট্রোল একত্রে ব্যবহার করে আপনি একটি আধুনিক, সুন্দর এবং ইউজার-ফ্রেন্ডলি উইন্ডোজ অ্যাপ্লিকেশন তৈরি করতে পারবেন।