Microsoft Technologies XAML Shape Elements (Rectangle, Ellipse, Line) ব্যবহার গাইড ও নোট

273

XAML (Extensible Application Markup Language) এ Shape এলিমেন্টগুলি হল গ্রাফিক্সের উপাদান যা বিভিন্ন ধরনের ভিজ্যুয়াল অবজেক্ট তৈরি করতে ব্যবহৃত হয়। XAML এ কিছু সাধারণ Shape এলিমেন্ট যেমন Rectangle, Ellipse, এবং Line রয়েছে, যেগুলি দিয়ে বিভিন্ন ধরনের আকার (Shape) তৈরি করা সম্ভব। এগুলি মূলত গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) তৈরি করতে ব্যবহৃত হয়।

এই শেপ এলিমেন্টগুলি Canvas অথবা অন্যান্য লেআউট প্যানেলে ব্যবহার করা হয়, যাতে আপনি নির্দিষ্ট স্থান বা আকারে সেগুলিকে অবস্থান দিতে পারেন।


Rectangle Shape

Rectangle হল একটি চারকোনা আকার তৈরি করার জন্য ব্যবহৃত XAML এলিমেন্ট। এটি সহজেই কাস্টমাইজ করা যায় এবং এর প্রপার্টি যেমন প্রস্থ, উচ্চতা, ব্যাকগ্রাউন্ড, মার্জিন, বর্ডার ইত্যাদি সহজে পরিবর্তন করা যায়।

Rectangle উদাহরণ:

<Canvas>
    <Rectangle Width="200" Height="100" Fill="SkyBlue" Stroke="Black" StrokeThickness="2" />
</Canvas>

এখানে:

  • Width="200" এবং Height="100" দ্বারা রেকট্যাঙ্গলটির প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে।
  • Fill="SkyBlue" দ্বারা রঙ দেওয়া হয়েছে রেকট্যাঙ্গলটির ভিতরে।
  • Stroke="Black" এবং StrokeThickness="2" দ্বারা রেকট্যাঙ্গলটির বর্ডার কালার এবং বর্ডারের প্রস্থ নির্ধারণ করা হয়েছে।

Additional Properties:

  • RadiusX এবং RadiusY ব্যবহার করে Rectangle এর কোণগুলি গোল করা সম্ভব।

    <Rectangle Width="200" Height="100" Fill="SkyBlue" RadiusX="20" RadiusY="20"/>
    

Ellipse Shape

Ellipse XAML এ একটি বৃত্ত (Circle) বা অবতল (Oval) আকার তৈরি করতে ব্যবহৃত হয়। এর জন্যও বিভিন্ন প্রপার্টি ব্যবহার করা যায় যেমন ব্যাকগ্রাউন্ড, স্ট্রোক, ইত্যাদি।

Ellipse উদাহরণ:

<Canvas>
    <Ellipse Width="150" Height="150" Fill="Green" Stroke="Black" StrokeThickness="2"/>
</Canvas>

এখানে:

  • Width="150" এবং Height="150" দ্বারা এলিপ্সটির প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে, যা এটি একটি বৃত্ত তৈরি করে কারণ প্রস্থ এবং উচ্চতা সমান।
  • Fill="Green" দ্বারা এলিপ্সটির ভিতরের রঙ নির্ধারণ করা হয়েছে।
  • Stroke="Black" এবং StrokeThickness="2" দ্বারা এলিপ্সটির বর্ডার কালার এবং প্রস্থ নির্ধারণ করা হয়েছে।

Ellipses with Different Aspect Ratios:

  • Width এবং Height ভিন্ন হলে এলিপ্সটি গোলাকার না হয়ে অ্যালিভ (Oval) আকারে পরিণত হয়।

    <Ellipse Width="200" Height="100" Fill="Yellow" Stroke="Red" StrokeThickness="3"/>
    

Line Shape

Line XAML এ একটি সরলরেখা তৈরি করার জন্য ব্যবহৃত হয়। এটি X1, Y1, X2, এবং Y2 প্রপার্টি ব্যবহার করে একটি রেখার স্টার্ট এবং এন্ড পয়েন্ট নির্ধারণ করা হয়। এটি সাধারনত দুটি পয়েন্টের মধ্যে সংযোগ স্থাপন করতে ব্যবহৃত হয়।

Line উদাহরণ:

<Canvas>
    <Line X1="50" Y1="50" X2="250" Y2="50" Stroke="Blue" StrokeThickness="2"/>
</Canvas>

এখানে:

  • X1="50" এবং Y1="50" দ্বারা রেখাটির শুরুর পয়েন্ট নির্ধারণ করা হয়েছে।
  • X2="250" এবং Y2="50" দ্বারা রেখাটির শেষ পয়েন্ট নির্ধারণ করা হয়েছে।
  • Stroke="Blue" এবং StrokeThickness="2" দ্বারা রেখাটির রঙ এবং প্রস্থ নির্ধারণ করা হয়েছে।

Additional Properties:

  • StrokeDashArray ব্যবহার করে লাইনটি ড্যাশ বা পয়েন্টেড স্টাইল করা যায়:

    <Line X1="50" Y1="50" X2="250" Y2="50" Stroke="Black" StrokeThickness="2" StrokeDashArray="5,5"/>
    

এখানে:

  • StrokeDashArray="5,5" দ্বারা রেখাটি ড্যাশ স্টাইল করা হয়েছে, যেখানে 5 পিক্সেল লম্বা ড্যাশ এবং 5 পিক্সেল স্পেস থাকবে।

Combining Shapes

XAML এ বিভিন্ন শেপ উপাদান একত্রে ব্যবহার করা যায়, এবং একটি ক্যানভাসে তাদের অবস্থান নির্ধারণ করা হয়।

Multiple Shapes উদাহরণ:

<Canvas>
    <Rectangle Width="200" Height="100" Fill="SkyBlue" Stroke="Black" StrokeThickness="2" />
    <Ellipse Width="150" Height="150" Fill="Green" Stroke="Black" StrokeThickness="2" Canvas.Top="50" />
    <Line X1="0" Y1="200" X2="300" Y2="200" Stroke="Red" StrokeThickness="3"/>
</Canvas>

এখানে:

  • একটি Rectangle তৈরি করা হয়েছে, যেটি ক্যানভাসের প্রথম উপাদান।
  • একটি Ellipse তৈরি করা হয়েছে, যেটি ক্যানভাসের মধ্যে দ্বিতীয় উপাদান, এবং এর অবস্থান Canvas.Top="50" দ্বারা পরিবর্তন করা হয়েছে।
  • একটি Line যোগ করা হয়েছে, যা ক্যানভাসের নিচের দিকে রেখা তৈরি করছে।

Canvas vs. Other Layout Panels

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

Example with Grid Layout:

<Grid>
    <Rectangle Width="100" Height="50" Fill="LightGreen"/>
    <Ellipse Width="100" Height="100" Fill="Orange"/>
    <Line X1="0" Y1="150" X2="200" Y2="150" Stroke="Purple" StrokeThickness="3"/>
</Grid>

এখানে:

  • শেপগুলো Grid লেআউট প্যানেলে রাখা হয়েছে, তবে তাদের অবস্থান কাস্টমাইজ করা হয়নি (তবে Grid প্যানেল শেপগুলোর আকার ও স্থান নিয়ন্ত্রণ করবে)।

সারাংশ

  • Rectangle: এটি একটি চারকোনা আকার তৈরি করতে ব্যবহৃত হয় এবং এর প্রপার্টি যেমন প্রস্থ, উচ্চতা, রঙ, বর্ডার ইত্যাদি কাস্টমাইজ করা যায়।
  • Ellipse: এটি একটি বৃত্ত বা এলিপ্স আকার তৈরি করে এবং এর প্রস্থ ও উচ্চতা পরিবর্তন করে বৃত্তাকার বা অ্যালিভ আকার তৈরি করা যায়।
  • Line: এটি সরল রেখা তৈরি করতে ব্যবহৃত হয়, যেখানে শুরু এবং শেষ পয়েন্ট নির্ধারণ করে রেখাটি তৈরি করা হয়।
  • Canvas: এটি একটি লেআউট প্যানেল যা শেপগুলোর নির্দিষ্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।

এই শেপ এলিমেন্টগুলো ব্যবহার করে XAML এ আকর্ষণীয় গ্রাফিক্স এবং UI উপাদান ডিজাইন করা সম্ভব।

Content added By
Promotion

Are you sure to start over?

Loading...