XAML এ Gradient (ধোঁয়া) এক ধরনের ভিজ্যুয়াল ইফেক্ট যা রঙের সুর অনুযায়ী ধীরে ধীরে পরিবর্তন ঘটায়। এটি UI উপাদানের ব্যাকগ্রাউন্ড বা অন্যান্য প্রপার্টির জন্য একটি সুন্দর রঙের ট্রানজিশন তৈরি করতে ব্যবহৃত হয়। Linear Gradient এবং Radial Gradient দুটি প্রকারের গ্রেডিয়েন্ট যা বিভিন্ন স্টাইলিং জন্য ব্যবহৃত হয়।
Linear Gradient
Linear Gradient রঙের পরিবর্তন একটি সরল রেখার মাধ্যমে ঘটে। আপনি এটি StartPoint এবং EndPoint দিয়ে কাস্টমাইজ করতে পারেন, যা রঙের শুরু এবং শেষের অবস্থান নির্ধারণ করে। Linear Gradient সাধারণত সোজা রেখার উপর রঙের পরিবর্তন ঘটায়, যা বিভিন্ন দিক থেকে হতে পারে যেমন উপরে নিচে, ডান থেকে বাম বা ডায়াগোনালি।
ব্যবহারের উদ্দেশ্য:
- সরল রেখার উপর রঙের ধীরে ধীরে পরিবর্তন।
- সাধারণভাবে ব্যাকগ্রাউন্ড বা উপাদানগুলির জন্য সোজা রঙের ট্রানজিশন।
উদাহরণ:
<Button Width="200" Height="50">
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightBlue" Offset="0"/>
<GradientStop Color="LightGreen" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Button.Content>Click Me</Button.Content>
</Button>
এখানে:
StartPoint="0,0"এবংEndPoint="1,1"দ্বারা Linear Gradient এর দিক নির্ধারণ করা হয়েছে (এটি ডায়াগোনালি বাম উপরের কোণ থেকে ডান নিচে যাবে)।- GradientStop ব্যবহার করে রঙের পরিবর্তন সেট করা হয়েছে।
- প্রথম
GradientStopএ LightBlue রঙের পরিবর্তন শুরু হবে। - দ্বিতীয়
GradientStopএ LightGreen রঙের পরিবর্তন শেষ হবে।
- প্রথম
Radial Gradient
Radial Gradient রঙের পরিবর্তন একটি বৃত্তের মধ্যে ঘটে, যেখানে রঙের শুরু হয় একটি কেন্দ্রবিন্দু থেকে এবং বাহিরে গিয়ে পরিবর্তিত হয়। এটি সাধারণত কেন্দ্র থেকে বাহিরে রঙের ট্রানজিশন তৈরি করতে ব্যবহৃত হয়।
ব্যবহারের উদ্দেশ্য:
- একটি কেন্দ্রীয় রঙ থেকে বাহিরে গিয়ে রঙের পরিবর্তন।
- Radial Gradient সাধারণত বাটন, ব্যাকগ্রাউন্ড ইত্যাদির জন্য বৃত্তাকৃত রঙের পরিবর্তন তৈরি করতে ব্যবহৃত হয়।
উদাহরণ:
<Button Width="200" Height="50">
<Button.Background>
<RadialGradientBrush>
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Button.Background>
<Button.Content>Click Me</Button.Content>
</Button>
এখানে:
- RadialGradientBrush ব্যবহার করে রঙের পরিবর্তন কেন্দ্র থেকে বাহিরে ঘটানো হয়েছে।
- প্রথম GradientStop এ Yellow রঙ কেন্দ্র থেকে শুরু হবে এবং দ্বিতীয় GradientStop এ Red রঙ বাহিরে গিয়ে শেষ হবে।
Linear Gradient এবং Radial Gradient এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Linear Gradient | Radial Gradient |
|---|---|---|
| রঙের পরিবর্তন | সরল রেখার উপর রঙের পরিবর্তন | কেন্দ্র থেকে বাহিরে রঙের পরিবর্তন |
| দিক | StartPoint এবং EndPoint দ্বারা নিয়ন্ত্রিত (উল্লম্ব, দিগন্তরেখায়, ডায়াগোনাল ইত্যাদি) | কেন্দ্র থেকে বাহিরে যায় |
| ব্যবহার | সাধারণত ব্যাকগ্রাউন্ড বা বার গ্রেডিয়েন্ট তৈরি করতে ব্যবহৃত হয় | বৃত্তাকার বা কেন্দ্রীয় রঙ পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয় |
অতিরিক্ত কাস্টমাইজেশন
Linear Gradient এর জন্য কাস্টম StartPoint এবং EndPoint
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="SkyBlue" Offset="0"/>
<GradientStop Color="DeepSkyBlue" Offset="1"/>
</LinearGradientBrush>
এখানে:
- StartPoint="0,0" এবং EndPoint="1,0" দ্বারা রঙ পরিবর্তন কেবলমাত্র অনুভূমিকভাবে (ডান থেকে বাম) হবে।
Radial Gradient এর জন্য Center এবং Radius
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="LightGoldenrodYellow" Offset="0"/>
<GradientStop Color="Orange" Offset="1"/>
</RadialGradientBrush>
এখানে:
- Center="0.5,0.5" দ্বারা বৃত্তের কেন্দ্র নির্ধারণ করা হয়েছে।
- RadiusX="0.5" এবং RadiusY="0.5" দ্বারা বৃত্তের আকার এবং প্রসারতা নির্ধারণ করা হয়েছে।
সারাংশ
- Linear Gradient ব্যবহার করে আপনি সরল রেখার উপর রঙের ধীরে ধীরে পরিবর্তন তৈরি করতে পারেন। এটি রঙের ট্রানজিশনকে সরলভাবে উপস্থাপন করে।
- Radial Gradient ব্যবহার করে রঙের পরিবর্তন একটি কেন্দ্রবিন্দু থেকে বাহিরে গিয়ে হয়, যা এক ধরণের বৃত্তাকার ট্রানজিশন তৈরি করে।
এগুলি XAML ফাইলের মধ্যে ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের UI কে আরও সুন্দর, গতিশীল এবং ভিজ্যুয়ালি আকর্ষণীয় করে তুলতে পারেন।
Read more
