Mobile App Development StackLayout এবং Grid দিয়ে UI Layout তৈরি গাইড ও নোট

StackLayout এবং Grid হল .NET MAUI এর দুটি অন্যতম শক্তিশালী লেআউট কন্ট্রোল, যা UI উপাদানগুলোকে বিভিন্নভাবে সাজানোর জন্য ব্যবহৃত হয়। নিচে StackLayout এবং Grid এর সাহায্যে UI লেআউট তৈরি করার উদাহরণ দেওয়া হল।

১. StackLayout

StackLayout উপাদানগুলি একে অপরের উপর সজ্জিত (stacked) করে, অর্থাৎ উপাদানগুলি একটির পর একটি দেখানো হয়। এটি সাধারণত ভরাট (vertical) বা অনুভূমিক (horizontal) সজ্জায় ব্যবহৃত হয়।

StackLayout এর মৌলিক গঠন:

<StackLayout Orientation="Vertical">
    <!-- UI elements go here -->
</StackLayout>

এখানে, Orientation অ্যাট্রিবিউট দ্বারা আপনি StackLayout এর সজ্জা নিয়ন্ত্রণ করতে পারেন:

• Vertical: উপাদানগুলি উপরে থেকে নিচে সজ্জিত হবে।
• Horizontal: উপাদানগুলি একে অপরের পাশে সজ্জিত হবে।

StackLayout উদাহরণ:

<StackLayout Orientation="Vertical" Spacing="10" Padding="20">
    <Label Text="Welcome to .NET MAUI!" FontSize="24" HorizontalOptions="Center" />
    <Button Text="Click Me" HorizontalOptions="Center" />
    <Label Text="Enjoy Learning" FontSize="18" HorizontalOptions="Center" />
</StackLayout>

এখানে:

• Spacing: উপাদানগুলির মধ্যে ফাঁকা স্থান নির্ধারণ করে।
• Padding: StackLayout এর চারপাশে ফাঁকা স্থান নির্ধারণ করে।
• HorizontalOptions="Center": উপাদানগুলি অনুভূমিকভাবে কেন্দ্রিত করে।

২. Grid

Grid একটি শক্তিশালী লেআউট কন্ট্রোল, যা কোলাম এবং রো (column and row) দিয়ে উপাদানগুলিকে সাজানোর জন্য ব্যবহৃত হয়। এতে আপনি একাধিক কোলাম এবং রো তৈরি করে উপাদানগুলিকে নির্দিষ্ট স্থানে রাখতে পারেন।

Grid এর মৌলিক গঠন:

<Grid>
    <!-- Row and Column Definitions -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <!-- UI Elements go here -->
</Grid>

এখানে:

• RowDefinitions: রো (row) তৈরি করতে ব্যবহৃত হয়।
• ColumnDefinitions: কোলাম (column) তৈরি করতে ব্যবহৃত হয়।
• Height="Auto": রো বা কোলামের উচ্চতা কন্টেন্টের উপরে নির্ভর করবে।
• Width="*": কোলাম বা রো সম্পূর্ণ স্থানের একটি অংশ দখল করবে।

Grid উদাহরণ:

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

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <!-- Row 0, Column 0 -->
    <Label Text="Label 1" Grid.Row="0" Grid.Column="0" />

    <!-- Row 0, Column 1 -->
    <Button Text="Button 1" Grid.Row="0" Grid.Column="1" />

    <!-- Row 1, Column 0 -->
    <Label Text="Label 2" Grid.Row="1" Grid.Column="0" />

    <!-- Row 1, Column 1 -->
    <Button Text="Button 2" Grid.Row="1" Grid.Column="1" />
</Grid>

এখানে:

• Grid.Row এবং Grid.Column দ্বারা আপনি প্রতিটি উপাদানকে নির্দিষ্ট রো এবং কোলামে স্থাপন করতে পারেন।
• RowDefinitions এবং ColumnDefinitions দ্বারা রো এবং কোলাম গঠন করা হয়েছে, যেখানে * এর মানে হলো গ্রিডের বাকি জায়গা সমানভাবে ভাগ করে নেওয়া।

৩. StackLayout এবং Grid একসাথে ব্যবহার করা

এছাড়া, আপনি StackLayout এবং Grid একসাথে ব্যবহার করতে পারেন, যেখানে StackLayout গ্রিডের মধ্যে একাধিক উপাদান সজ্জিত করতে সাহায্য করবে।

উদাহরণ:

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

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <!-- StackLayout inside Grid -->
    <StackLayout Grid.Row="0" Grid.Column="0" Spacing="10" Padding="10">
        <Label Text="StackLayout 1" />
        <Button Text="Click Me" />
    </StackLayout>

    <StackLayout Grid.Row="1" Grid.Column="0" Spacing="10" Padding="10">
        <Label Text="StackLayout 2" />
        <Button Text="Press Me" />
    </StackLayout>

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

এখানে:

• একটি Grid তে দুটি StackLayout ব্যবহার করা হয়েছে।
• StackLayout এর মধ্যে একাধিক উপাদান সজ্জিত করা হয়েছে।
• Grid এর সেল সজ্জিত করা হয়েছে যাতে স্ট্যাকড উপাদান এবং একক উপাদানগুলিকে সুন্দরভাবে সাজানো যায়।

সারাংশ:

• StackLayout এবং Grid হল দুইটি মৌলিক লেআউট কন্ট্রোল, যা UI ডিজাইন করতে ব্যবহৃত হয়। StackLayout উপাদানগুলোকে একে অপরের উপরে (vertical) বা পাশে (horizontal) সাজাতে সাহায্য করে, আর Grid উপাদানগুলোকে কোলাম এবং রো দিয়ে সজ্জিত করার জন্য ব্যবহৃত হয়।
• StackLayout সোজাসুজি লেআউটের জন্য উপযুক্ত, আর Grid জটিল এবং আরও নিয়ন্ত্রণযোগ্য লেআউট তৈরি করতে ব্যবহৃত হয়, যেখানে আপনি কাস্টম সেল সাইজিং এবং অবস্থান নির্ধারণ করতে পারেন।