.NET MAUI ডেভেলপারদের জন্য বিভিন্ন Controls এবং Layouts প্রদান করে, যা অ্যাপ্লিকেশনটির UI (User Interface) ডিজাইন এবং কন্ট্রোল ব্যবস্থাপনাকে সহজ করে তোলে। Control হল UI উপাদান যা ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে, যেমন বাটন, টেক্সটবক্স ইত্যাদি, এবং Layouts হল উপাদানগুলিকে যথাযথভাবে স্থান দেওয়ার জন্য ব্যবহৃত কন্টেনার বা সাঁজানো ব্যবস্থা। এখানে কিছু সাধারণ Layouts এবং Controls এর আলোচনা করা হল।
1. StackLayout:
StackLayout একটি সাধারণ লেআউট যা উপাদানগুলোকে একটির পর একটি উল্লম্ব বা অনুভূমিকভাবে সাজানোর জন্য ব্যবহৃত হয়।
- উল্লম্ব StackLayout (Vertical): এটি উপাদানগুলোকে উপরের থেকে নিচের দিকে স্তুপ করে সাজায়।
- অনুভূমিক StackLayout (Horizontal): এটি উপাদানগুলোকে বাম থেকে ডান দিকে সাজায়।
উদাহরণ:
<StackLayout Orientation="Vertical">
<Label Text="Hello, .NET MAUI!" />
<Button Text="Click Me" />
<Entry Placeholder="Enter something" />
</StackLayout>
StackLayout এর বৈশিষ্ট্য:
- Orientation: উপাদানগুলি সাজানোর দিক নির্দেশ করে, যেমন "Vertical" বা "Horizontal"।
- Spacing: উপাদানগুলির মধ্যে ব্যবধান নির্ধারণ করে।
- Padding: StackLayout এর চারপাশে প্যাডিং অ্যাপ্লাই করে।
2. Grid:
Grid একটি শক্তিশালী লেআউট যা উপাদানগুলোকে সারি (row) এবং কলাম (column) অনুযায়ী সাজায়। এটি জটিল UI গঠন করতে সাহায্য করে যেখানে আপনি বিভিন্ন সেল (cell) এ উপাদানগুলো রাখতে পারেন।
Grid এর উদাহরণ:
<Grid RowDefinitions="Auto, *"
ColumnDefinitions="*, 2*, *">
<Label Grid.Row="0" Grid.Column="0" Text="First Name:" />
<Entry Grid.Row="0" Grid.Column="1" Placeholder="Enter your first name" />
<Label Grid.Row="1" Grid.Column="0" Text="Last Name:" />
<Entry Grid.Row="1" Grid.Column="1" Placeholder="Enter your last name" />
</Grid>
Grid এর বৈশিষ্ট্য:
- RowDefinitions: গ্রিডের সারি সংজ্ঞায়িত করে। "Auto" মানে সারির উচ্চতা উপাদানের আকার অনুযায়ী সামঞ্জস্য করবে, এবং "*" মানে সারিটি অবশিষ্ট স্থানে প্রসারিত হবে।
- ColumnDefinitions: কলামের আকার এবং সংজ্ঞা দেয়।
- Grid.Row এবং Grid.Column: নির্দিষ্ট সারি এবং কলামে উপাদান রাখার জন্য ব্যবহৃত হয়।
3. FlexLayout:
FlexLayout একটি খুবই নমনীয় এবং শক্তিশালী লেআউট যা উপাদানগুলোকে একটি ফ্লেক্স কন্টেইনারের মধ্যে রাখে এবং বিভিন্ন দিক থেকে সজ্জিত করার জন্য খুব সহজে কনফিগার করা যায়। FlexLayout উপাদানগুলোর অবস্থান এবং আকার স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে সক্ষম।
FlexLayout এর উদাহরণ:
<FlexLayout Direction="Row" JustifyContent="Center" AlignItems="Center">
<Button Text="Button 1" />
<Button Text="Button 2" />
<Button Text="Button 3" />
</FlexLayout>
FlexLayout এর বৈশিষ্ট্য:
- Direction: উপাদানগুলোকে সাজানোর দিক নির্দেশ করে। এর মান হতে পারে
Row(অনুভূমিকভাবে),Column(উল্লম্বভাবে), বাRowReverseওColumnReverse। - JustifyContent: উপাদানগুলির মধ্যে স্থান বরাদ্দের নিয়ন্ত্রণ করে। যেমন
Center,SpaceBetween,SpaceAroundইত্যাদি। - AlignItems: উপাদানগুলির প্রতি কলামের মধ্যে কিভাবে অবস্থান করবে তা নির্ধারণ করে।
Control Examples:
Label: টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়।
<Label Text="Hello, .NET MAUI!" />
Button: ব্যবহারকারী থেকে ইনপুট গ্রহণ করতে এবং কোনো অ্যাকশন সম্পাদন করতে ব্যবহৃত হয়।
<Button Text="Click Me" Clicked="OnButtonClicked" />
Entry: ব্যবহারকারীকে টেক্সট ইনপুট করার সুযোগ দেয়।
<Entry Placeholder="Enter your name" />
মোটামুটি পার্থক্য:
- StackLayout সহজ UI ডিজাইন করার জন্য আদর্শ যেখানে উপাদানগুলো একের পর এক রাখা হয় (অনুভূমিক বা উল্লম্বভাবে)।
- Grid যখন জটিল এবং মাল্টি-কলাম, মাল্টি-রো ডিজাইন প্রয়োজন, তখন ব্যবহৃত হয়।
- FlexLayout ব্যবহার করা হয় যখন আপনি ডাইনামিকভাবে উপাদানগুলোকে ফ্লেক্সিবল বা রেসপন্সিভভাবে সাজাতে চান।
এই তিনটি লেআউটের মধ্যে থেকে আপনি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী সঠিক লেআউট নির্বাচন করতে পারবেন।
Read more
