Microsoft Technologies Layout Containers (Grid, StackPanel, Canvas, DockPanel) এর ব্যবহার গাইড ও নোট

239

XAML (Extensible Application Markup Language) ব্যবহার করে ইউজার ইন্টারফেস (UI) ডিজাইন করতে Layout Containers খুবই গুরুত্বপূর্ণ উপাদান। এই কন্টেইনারগুলো UI উপাদানগুলোর সঠিক সজ্জা এবং বিন্যাস নির্ধারণ করে। XAML এ সাধারণত ৪টি প্রধান লেআউট কন্টেইনার ব্যবহৃত হয়: Grid, StackPanel, Canvas, এবং DockPanel


1. Grid

Grid হলো XAML এর সবচেয়ে শক্তিশালী এবং সবচেয়ে জনপ্রিয় লেআউট কন্টেইনার। এটি একটি সেল-ভিত্তিক লেআউট কন্টেইনার, যা UI উপাদানগুলোকে সারি এবং কলামে সাজানোর জন্য ব্যবহৃত হয়। Grid ব্যবহার করে আপনি একটি জটিল এবং দৃশ্যমানভাবে সুসংগঠিত লেআউট তৈরি করতে পারেন।

ব্যবহারের উদ্দেশ্য:

  • উপাদানগুলোর মধ্যে সঠিকভাবে ফাঁকা স্থান রাখা।
  • একাধিক সারি (Row) এবং কলাম (Column) ব্যবহার করে উপাদানগুলো সাজানো।
  • উপাদানগুলোর আকার এবং অবস্থান নির্ধারণ করা।

উদাহরণ:

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

    <TextBlock Text="Header" Grid.Row="0" Grid.Column="0"/>
    <Button Content="Click Me" Grid.Row="1" Grid.Column="1"/>
</Grid>

এখানে:

  • Grid.RowDefinitions এবং Grid.ColumnDefinitions দিয়ে সারি এবং কলাম নির্ধারণ করা হয়েছে।
  • TextBlock এবং Button বিভিন্ন সারি ও কলামে রাখার জন্য Grid.Row এবং Grid.Column অ্যাট্রিবিউট ব্যবহার করা হয়েছে।

2. StackPanel

StackPanel একটি সরল লেআউট কন্টেইনার, যা সমস্ত উপাদানগুলোকে উল্লম্ব বা দিগন্তরেখায় (horizontal) সাজায়। এটি একটি একক ডাইরেকশনাল লেআউট কন্টেইনার হিসেবে কাজ করে, যেখানে সমস্ত উপাদান একে অপরের নিচে (উল্লম্বভাবে) বা পাশে (দিগন্তরেখায়) রাখা হয়।

ব্যবহারের উদ্দেশ্য:

  • উপাদানগুলোকে একে অপরের উপরে বা পাশে সাজানো।
  • খুবই সহজ এবং দ্রুত লেআউট ডিজাইন তৈরি করা।

উদাহরণ:

<StackPanel Orientation="Vertical">
    <TextBlock Text="First Item"/>
    <TextBlock Text="Second Item"/>
    <Button Content="Click Me"/>
</StackPanel>

এখানে:

  • Orientation="Vertical" ব্যবহার করে উপাদানগুলো উল্লম্বভাবে সাজানো হয়েছে।
  • আপনি যদি উপাদানগুলোকে দিগন্তরেখায় সাজাতে চান, তবে Orientation="Horizontal" ব্যবহার করতে পারেন।

3. Canvas

Canvas একটি ফ্রি-ফর্ম লেআউট কন্টেইনার, যা UI উপাদানগুলোর সুনির্দিষ্ট অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়। এখানে আপনি উপাদানগুলোকে নির্দিষ্ট পিক্সেলে সজ্জিত করতে পারেন।

ব্যবহারের উদ্দেশ্য:

  • UI উপাদানগুলোর নির্দিষ্ট অবস্থান সঠিকভাবে নিয়ন্ত্রণ করা।
  • সাধারণত গ্রাফিক্স বা ড্রয়িং অপারেশনগুলোর জন্য ব্যবহার করা হয়।

উদাহরণ:

<Canvas>
    <Button Content="Click Me" Canvas.Left="50" Canvas.Top="100"/>
    <TextBlock Text="Hello" Canvas.Left="200" Canvas.Top="200"/>
</Canvas>

এখানে:

  • Canvas.Left এবং Canvas.Top ব্যবহার করে প্রতিটি উপাদানের সুনির্দিষ্ট অবস্থান (পিক্সেল) নির্ধারণ করা হয়েছে।

4. DockPanel

DockPanel উপাদানগুলোকে চারটি দিক (উপরে, নীচে, বামে, ডানে) একে অপরের সাথে ডক করতে ব্যবহৃত হয়। এটি একটি বিশেষ ধরনের লেআউট কন্টেইনার যা নির্ধারিত দিকের ভিত্তিতে উপাদানগুলোকে সাজায়।

ব্যবহারের উদ্দেশ্য:

  • উপাদানগুলোর মধ্যে ডকিং (যেমন: টুলবার, স্ট্যাটাস বার) তৈরি করা।
  • উপাদানগুলোকে নির্দিষ্ট দিক (উপর, নিচ, বাম, ডান) এ সাজানো।

উদাহরণ:

<DockPanel>
    <Button Content="Top Button" DockPanel.Dock="Top"/>
    <Button Content="Bottom Button" DockPanel.Dock="Bottom"/>
    <Button Content="Left Button" DockPanel.Dock="Left"/>
    <Button Content="Right Button" DockPanel.Dock="Right"/>
    <Button Content="Center Button"/>
</DockPanel>

এখানে:

  • DockPanel.Dock অ্যাট্রিবিউট ব্যবহার করে উপাদানগুলোর অবস্থান নির্ধারণ করা হয়েছে (উপর, নিচ, বাম, ডান)।
  • মধ্যবর্তী বাটনটি ডিফল্ট অবস্থানে থাকবে।

সারাংশ

Layout Containers XAML ফাইলে উপাদানগুলোর সজ্জা এবং বিন্যাস নির্ধারণ করতে ব্যবহৃত হয়। বিভিন্ন কন্টেইনারের ব্যবহার নিম্নরূপ:

  • Grid: সারি ও কলামের মাধ্যমে উপাদানগুলোকে সাজানোর জন্য।
  • StackPanel: উপাদানগুলোকে উল্লম্ব বা দিগন্তরেখায় সাজানোর জন্য।
  • Canvas: UI উপাদানগুলোর অবস্থান নির্ধারণ করার জন্য, যেখানে উপাদানগুলি নির্দিষ্ট পিক্সেলে রাখা হয়।
  • DockPanel: উপাদানগুলোকে চারটি দিক (উপর, নিচ, বাম, ডান) এ ডক করতে ব্যবহৃত হয়।

এই কন্টেইনারগুলো XAML ফাইলের মধ্যে উপাদানগুলোর সঠিক বিন্যাস ও লেআউট তৈরি করার জন্য ব্যবহৃত হয়, এবং আপনার UI ডিজাইনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।

Content added By
Promotion

Are you sure to start over?

Loading...