.NET MAUI Layouts এর ধরন এবং ব্যবহার

.NET MAUI অ্যাপ্লিকেশন ডেভেলপমেন্টে Layouts ব্যবহার করা হয় ইউজার ইন্টারফেসের (UI) উপাদানগুলোকে সাজানোর জন্য। Layouts হলো কন্টেইনার, যা UI উপাদানগুলিকে নির্দিষ্ট কাঠামোতে সাজাতে সহায়ক। .NET MAUI তে বিভিন্ন ধরনের Layout রয়েছে যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়। এখানে কিছু প্রধান Layout এর ধরন এবং তাদের ব্যবহার আলোচনা করা হল।

1. StackLayout

StackLayout উপাদানগুলিকে উল্লম্ব বা অনুভূমিকভাবে সাজাতে ব্যবহৃত হয়।

• ব্যবহার: যদি আপনি চান যে আপনার উপাদানগুলি একের পর এক (stacked) প্রদর্শিত হোক, তাহলে StackLayout ব্যবহার করতে পারেন। এটি বিভিন্ন উপাদানকে একটি লম্বা বা একটি সারিতে সাজানোর জন্য উপযুক্ত।
• উল্লম্ব (Vertical) এবং অনুভূমিক (Horizontal) উভয়ভাবে ব্যবহার করা যায়।

উদাহরণ:

<StackLayout Orientation="Vertical">
    <Label Text="Hello, .NET MAUI!" />
    <Button Text="Click Me" />
</StackLayout>

Orientation:

• Vertical — উপাদানগুলি উপরের থেকে নিচে।
• Horizontal — উপাদানগুলি বাম থেকে ডানে।

2. Grid

Grid একটি শক্তিশালী Layout যা কলাম ও সারির ভিত্তিতে UI উপাদানগুলোকে সাজায়।

• ব্যবহার: যখন আপনি একটি টেবিলের মতো বা কলাম-সারি ভিত্তিক ডিজাইন তৈরি করতে চান, তখন Grid ব্যবহার করা হয়।
• এটি সমস্ত ধরনের কমপ্লেক্স লেআউট সমর্থন করে, যেমন: বিভিন্ন সাইজের কোলাম, সারি, এবং উপাদানগুলোর মধ্যে নির্দিষ্ট অবস্থান।

উদাহরণ:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Text="Row 0, Column 0" Grid.Row="0" Grid.Column="0" />
    <Button Text="Row 1, Column 0" Grid.Row="1" Grid.Column="0" />
    <Entry Text="Row 1, Column 1" Grid.Row="1" Grid.Column="1" />
</Grid>

RowDefinitions এবং ColumnDefinitions দিয়ে রো এবং কলাম নির্ধারণ করা হয়, এবং Grid.Row ও Grid.Column দিয়ে উপাদানগুলোকে নির্দিষ্ট রো এবং কলামে বসানো হয়।

3. AbsoluteLayout

AbsoluteLayout একটি স্বাধীন এবং নির্দিষ্ট অবস্থান ভিত্তিক লেআউট, যেখানে আপনি উপাদানগুলিকে নির্দিষ্ট পয়েন্টে বা পরিমাণে অবস্থান দিতে পারেন।

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

উদাহরণ:

<AbsoluteLayout>
    <Label Text="Hello, .NET MAUI!"
           AbsoluteLayout.LayoutBounds="0.5, 0.5, AutoSize, AutoSize"
           AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>

LayoutBounds: উপাদানের পজিশন এবং আকার নির্ধারণ করে।

• প্রথম দুটি মান (0.5, 0.5) শতাংশভিত্তিক অবস্থান নির্ধারণ করে (0.5, 0.5 মানে স্ক্রীনের মাঝখানে হবে)।

4. FlexLayout

FlexLayout উপাদানগুলোকে লাইন বা কলামে সাজাতে ব্যবহৃত হয় এবং স্বয়ংক্রিয়ভাবে উপাদানগুলোকে স্থানান্তরিত করতে পারে।

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

উদাহরণ:

<FlexLayout Direction="Row" JustifyContent="Center" AlignItems="Center">
    <Label Text="Hello, .NET MAUI!" />
    <Button Text="Click Me" />
</FlexLayout>

Direction:

• Row — উপাদানগুলো এক লাইনে সাজাবে।
• Column — উপাদানগুলো এক কলামে সাজাবে।

JustifyContent: উপাদানগুলির মধ্যে স্পেস কিভাবে বিতরণ করা হবে, যেমন Start, Center, End।

5. ScrollView

ScrollView একটি লেআউট যা বড় UI উপাদানকে স্ক্রোলেবল বানায়, যাতে আপনি স্ক্রীনের বাইরে থাকা উপাদানগুলো দেখতে পারেন।

• ব্যবহার: যখন UI উপাদান অনেক বেশি হবে এবং স্ক্রীনে সব উপাদান দেখা সম্ভব না, তখন ScrollView ব্যবহার করা হয়।

উদাহরণ:

<ScrollView>
    <StackLayout>
        <Label Text="This is a long text" />
        <Button Text="Click Me" />
        <Label Text="This is a long text" />
        <Button Text="Click Me" />
        <!-- More content -->
    </StackLayout>
</ScrollView>

6. ContentView

ContentView হলো একটি কাস্টমাইজড কন্টেইনার যা আপনি UI উপাদানগুলিকে একত্রিত করতে ব্যবহার করতে পারেন।

• ব্যবহার: যখন আপনি একটি UI উপাদান বা গ্রুপ তৈরি করতে চান যা বারবার ব্যবহৃত হবে, তখন ContentView ব্যবহার করা হয়।

উদাহরণ:

<ContentView>
    <StackLayout>
        <Label Text="Welcome to .NET MAUI!" />
        <Button Text="Click Here" />
    </StackLayout>
</ContentView>

সারাংশ:

.NET MAUI Layouts বিভিন্ন ধরনের লেআউট ব্যবহারের মাধ্যমে ডেভেলপাররা বিভিন্ন প্ল্যাটফর্মে অ্যাপ্লিকেশন ডিজাইন করতে পারেন। StackLayout, Grid, AbsoluteLayout, FlexLayout, ScrollView, এবং ContentView ইত্যাদি লেআউটগুলি নির্দিষ্ট প্রয়োজনে ব্যবহার করা যায়, যা আপনার অ্যাপের UI উপাদানগুলির কাঠামো এবং দর্শনীয়তা উন্নত করে।