WPF (Windows Presentation Foundation) - 03

এখানে কয়েকটা WPF কন্ট্রোল নিয়ে আলোচনা করব এবং এর শেষেই আমরা ছোট একটা UI ডিজাই করে ফেলব।
TextBlock: TextBlock হচ্ছে অনেকটা লেবেলের মত, যেখানে শুধু মাত্র টেক্স দেখানো যায়, কিন্তু কিছু লিখা যায় না। লেল দিয়ে করা যায় না এমন অনেক কাজ খুব সহজেই টেক্স ব্লক দিয়ে করা যায়। যেমন

1. লেখাকে বল্ড, ইটালিক ইত্যাদি করা
   
2. লাইন ব্রেক দেয়া
   
3. একাধিক লাইনের মাঝে দুরত্ব (Spacing) ঠিক করে দেয়া
4. লেখাকে ছড়ানো (Expanding) বা কাছা-কাছি করে রাখা
5. লেখাকে সাজানো যায়, যেমন আন্ডার-লাইন করা
6. সুপার স্ক্রিপ্ট ও সাব স্ক্রিপ্ট ব্যাবহার করা

TextBlock এর কয়েকটা প্রোপার্টি আছে, যা দিয়ে উপরের বিষয়গুলো সম্ভব করা যায়

1. LineHeight: নাম থেকেই বুঝা যাচ্ছে এর কাজ কি। লাইনের উচ্চতা ঠিক করা।
2. LineStackingStrategy (পরে ব্যাখ্যা লিখব)
   
3. TextTrimming (পরে ব্যাখ্যা লিখব)
4. TextWrapping (পরে ব্যাখ্যা লিখব)

এছাড়াও লেখার মাঝে করা যায় এমন কিছু কাজ আছে যা TextBolck দিয়ে খুব সহজেই করা যায়। যেমন

1. Bold - লেখাকে মোটা করা
2. Hyperlink - অন্য একটা পেজের লিংক
   
3. InlineUIContainer - অন্য কন্ট্রোল গুলাকে ধারন করা
4. Italic - লেখাকে বাকানো
5. LineBreak - নতুন লাইন শুরু করা
6. Run - হচ্ছে TextBlock এর মধ্যে আবার নতুন একটা ব্লক, যাকে ইচ্ছে মত প্রপার্ট দেয়া যায়।
7. Span -
   
8. Underline - লেখার নিচে দাগ দেয়া

উদাহরণ-১: আমরা এমন এক লাইন টেক্সট চাই, যার মঝে একটা শব্দ বাকানো (Italic) থাকবে
<TextBlock Font>We Live in <Italic>Bangladesh</Italic></TextBlock>

উদাহরন-২: প্রায় সবগুলো প্রপার্টি নিয়ে এই উদাহরনটা দেয়া হল
<TextBlock Margin="10"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
FontSize="20" LineHeight="30"
TextWrapping="Wrap" TextTrimming="WordEllipsis"
LineStackingStrategy="BlockLineHeight">
TextBlock give several <Italic>Advantages</Italic> over label. <Bold>WPF</Bold> Introduce textBlock for .NET user.
<Underline>This aim of this Tutorial</Underline> is to familier programmer with <Run Background="Red">WPF</Run>
Now we take a <Button Width="100" >Button</Button> now i will get 1<Run BaselineAlignment="Superscript">st</Run>
class. <LineBreak />We apply line Break
</TextBlock>

আউটপুট নিচের মত হবে


----------------------****------------------------------------

TextBox: টেক্সবক্স নিয়ে বলার তেম্ন কিছু নাই। টেক্সবক্সে ব্যাবহারকারী লিখতে পারে। WPF টেক্সবক্সে অনেক সুবিধা আছে।

1. বানান পরিক্ষা করা যায়
2. রাইট ক্লিক করলে মেনু বের হয়, সেখানে Cut, Copy, Paste সুবিধা থাকে
3. আনডু এবং রিডু

নিচের কোডে আমরা একটা টেক্সবক্স নিব
<TextBox Height="30" Width="250">Exling LLC</TextBox>

আউটপুট নিচের মত

---------------------------****--------------------------

এই অংশের শেষ বিষয় হচ্ছে বাটন
Button: বাটন নিয়ে নতু করে বলার কিছু নাই। সামান্য একটু বলে রাখি WPF এ Win Form বাটনের মতই বাটন হ্যান্ডেলার আছে, এবং তা ভালই ব্যাবহার করা যায়। কিন্তু WPF এ কাজ করার জন্য সবচেয়ে বেশি ব্যাবহত মডেল হচ্ছে MVVM (Model View View-Model). সেখানে ঘটনা ভিন্ন। এখন আমরা সাধারন নিয়মটা দেখব। এটি বেশ সহজ। নিচের কোড দেখেই বুঝা যাবে

<Button Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Center" Content="Click Me" Click="clickMe" />

আউটপুট নিচের মত হবে



এখন এর ইভেন্ট হ্যান্ডেলার তৈরি করার জন্য

1. Click="clickMe এর উপর রাইট ক্লিক করুন
2. Navigate to Event Handler এ ক্লিক করুন
3. তাহলে VS নিজ থেকে আপনার জন্য clickMe এর ইভেন্ট হ্যান্ডেলার তৈরি করে দিবে।

নিচের চিত্রের মত করে ফেলুন


আসলে প্রতিটি .XAML ফাইলের পিছেনেই একটা .CS ফাইল থাকে। ইভেন্ট হ্যান্ডেলার গুলো সেখানে থাকে। চিত্রে দেখুন



বাংলায় শিখি WPF এর তৃতীয় পর্ব এখানেই শেষ।

সামনের সংখ্যায় সবচেয়ে সহজ ও ছোট কিন্তু কমপ্লিট একটা ইউজার ইন্টারফেস (UI) তৈরি করে দেখাব, যাতে সম্পুর্ন বিষয়টা একসাথে বুঝতে পারা যায়। আবারো বলি এই ব্লগের উদ্দেশ্য WPF এর সাথে পরিচয় করিয়ে দেয়া, এক্সপার্ট হতে হলে অবশ্যই অবশ্যই বই পড়তে হবে। :-)

WPF (Windows Presentation Foundation) - 01

আমি যখন WPF শিখা শুরু করি তখন গুগোল সার্চ করে বাংলায় তেমন কিছুই দিতে পারেনি। সেই থেকে ইচ্ছা, বাংলায় WPF বা Windows Presentation Foundation সম্পর্কে কিছু লিখব। যাতে আমার মত কাউকে সার্চ করে আশাহত হতে না হয়।

WPF কি?
WPF এর সম্পূর্ণরুপ হল, Windows Presentation Foundation. যদি খুব সহজে বলি তাহলে, WPF হল ইউজার ইন্টারফেস (UI) তৈরির জন্য মাইক্রোসফটের নতুন প্রযুক্তি। পূর্বে যেখানে Windows Form ব্যাবহার হত, এখন ঠিক সেই কাজটাই WPF করে দিবে। তুলনা করলে WPF অনেকটা HTML এর মত।

তাহলে Windows Form ছেড়ে WPF কেন?
WPF ব্যাবহার করার অনেক গুলো কারন আছে। যেমন

1. এপ্লিকাশন তৈরিতে WPF এমন কিছু মডেল সাপোর্ট করে যা দিয়ে খুব সহজেই এপ্লিকেশন তৈরি করা যায়
2. এটা হার্ডওয়ারের সর্বোচ্চ ব্যাবহার করতে সক্ষম
3. এটা আরো বেশি গ্রাফিক্যাল টুলস দেয়
4. এটা ডেস্কটপ ও ব্রাউজারে সমভাবে চলতে পারে
5. যেহেতু ব্রাউজারে চলতে পারে, তার মানে এটা দিতে প্রোগ্রাম লিখলে যেকোন ব্রাউজারেই চলবে।
6. এর মাধ্যমে 2D এবং 3D গ্রাফিক্স তৈরি করা খুব সহজ
7. এর গ্রাফিক্স দেখতে অনেক সুন্দর
8. এটা ইউজার ইন্টারফেস (UI) তৈরিতে ভেক্টর গ্রাফিক্স ব্যবহার করে

WPF শিখতে কি দরকার?

1. একটা Windows কম্পিউটার
2. Visual Stdio 2008 or Visual Stdio 2010 (এখানে Visual Stdio 2010 দিয়ে কাজ করা হয়েছে )
   
3. XML সম্পর্কে ধারনা (থাকলে ভাল)
4. সি শার্প (C#) প্রোগ্রামিং লাংজুয়েজ (সামান্য দরকারী, VB.NET ও কাজ করা যায়)

XAML কি?
XAML এর পূর্ণরুপ হচ্ছে eXtensible Application Markup Language. সহজ কথায় XAML হচ্ছে অনেকটা HTML এর মত, এটা দিয়েই ইউজার ইন্টারফেস (UI) তৈরি করা হয়। এটা অনেকগুলা ট্যাগের সমন্বয়ে গঠিত। আসলে WPF বলতে আমরা XAML দিয়ে ইউজার ইন্টারফেস তৈরিকেই বুঝি। :-)

কিভাবে শুরু করব?

• VS (Visual Stdio) চালু করে, ফাইল (File) থেকে নতুন প্রোজেক্ট নিতে হবে। নতুন প্রোজেক্ট থেকে WPF Application সিলেক্ট করতে হবে।

• প্রজেক্টের নাম ও লোকেশন ঠিক করে Ok বাটনে ক্লিক করলে নিচের মত একটা উইন্ডো আসবে

• এই উইন্ডোটা দুই ভাগে বিভক্ত। উপরের অংশে ইউজার ইন্টারফে দেখাবে, নিচের অংশে কোড। যদি আমরা কোড দেখি তাহলে তা নিচের মত, এটা একটা বেসিক টেমপ্ল্যাট দেখতে পাব, যা VS নিজ থেকে দিয়ে দেয়।

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

ব্যাখ্যাঃ এখানে WpfApplication1 হচ্ছে প্রজেক্ট নেমস্পেস, MainWindow হচ্ছে WpfApplication1নেমস্পেসে একটা ক্লাস, xmlns এবং xmlns:x হচ্ছে এক্স এম এল নেমস্পেস (এগুলো নিয়ে পরে বিস্তারিত আলোচনা হবে)। Title হচ্ছে পেইজের টাইটেল যা একটা পেইজের সবার উপরে থাকে। VS নিজ থেকে Grid লে-আউট দিয়ে দেয়। এই হচ্ছে আমাদের ডিফল্ট কোডের বর্ণনা।

• এখন যদি আমরা একটা লেবেল নিয়ে তাতে Hello World লেখা দেখাতে চাই তাহলে যা করতে হবে তা হচ্ছে Grid এর মাঝে লেবেল ট্যাগ নিয়ে তাতে Hello World লিখতে হবে। যেমন

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Label>Hello World</Label>
</Grid>
</Window>

• এখন Debug মেনু থেকে Start Debugging বা F5 চাপলে কোড কম্পাইল হয়ে নিচের মত Hello World আউটপুট দেখাবে ।

আর এখানেই বেসিক অংশটা শেষ। ;-)
এই ব্লগের উদ্দেশ্য WPF সম্পর্কে ধারনা দেয়া, এক্সপার্ট হতে হলে অবশ্যই বই পড়তে হবে।