WPF (Windows Presentation Foundation) - 02

চারটা গুরুত্বপূর্ণ প্রপার্টি
WPF এ যেকোন কন্ট্রোলকে দেখানোর জন্য চারটা প্রয়োজনীয় প্রপার্ট রয়েছে। যেমন লেবেলকে ফর্মে দেখাতে চাই তাহলে আমাকে যে কয়েকটা বিষয় খেয়াল রাখতে হবে, তার প্রথমে আসে তার দৈর্ঘ এবং প্রস্থ কত হবে? তারপর লেবেলটাকে ফর্মের কোথায় রাখা হবে?

এগুলো সমাধান করার জন্য এখন আমরা জানব খুবই প্রয়োজনীয় চারটা বৈশিস্ট্য সম্পর্কে, যেগুলো WPF এর প্রায় সব কন্ট্রোলে(যেমন Button, Label, TextBlock, TextBox ইত্যাদি) ব্যাবহার করতে হয়।

1. Width বা দৈর্ঘ্য
2. Height বা প্রস্থ
3. HorizontalAlignment ভূমির সাথে তুলনা করে কোথায় থাকবে
4. VerticalAlignment লম্বের সাথে তুলনা করে কোথায় থাকবে

এবার কোডে আসা যাক। যদি আমরা একটা লেবেল চাই যার দৈর্ঘ্য হবে 100, প্রস্থ হবে 50, ভূমির সাথে তুলনা করে বাম পাশে থাকবে এবং লম্বের সাথে তুলনা করে সবার উপরে থাকবে তাহলে তার XAML কোড কেমন হব?

<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&gt;

<Label Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top">Hello World </Label>

</Grid>
</Window>

উপরের কোডে লক্ষ্য করুন, লেবেলের জন্য আমরা চারটি বৈশিস্ট্য ঠিক করে দিয়েছি। নিচে আউটপুট দেখুন



কে কি ধরনের মান নেয়?


1. Height: এর মান একটা পুর্ণ সংখ্যা হয়,যেমন 50
2. Width: এর মানও একটা পুর্ণ সংখ্যা হয়,যেমন 100
3. HorizontalAlignment: এ চারটা অপশন রয়েছে, তার যেকোন একটা নিয়ে কাজ করতে হয় i) Left ii) Right iii) Center এবং iv) Stretch (Stretch হচ্ছে সম্পূর্ণ উইন্ডোজে পাশাপাশি থাকা)
4. VerticalAlignment: এরও চারটা অপশন রয়েছে, তার যেকোন একটা নিয়ে কাজ করে i) Top ii) Bottom iii) Center এবং iv) Stretch (Stretch হচ্ছে সম্পূর্ণ উইন্ডোজে লম্বা-লম্বি ভাবে থাকা)


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

Margin
WPF এ মার্জিন খুবই গুরুত্তপূর্ণ। মার্জিনের দু'টা কাজ আছে


1. আসলে মার্জিনের সাহায্যে উইন্ডোজের দেয়াল হতে কন্ট্রল কত দূরে থাকবে তা নির্ধারন করা হয়ে থাকে।
2. আর যদি Height , Width, HorizontalAlignment এবং VerticalAlignment দেয়া না থাকে তাহলে মার্জিনই কন্ট্রলের আকার নির্ধারণ করে থাকে।


মার্জিন কি কি মান নেয় ?


• মার্জিন সর্বোচ্চ চারটি মান নেয়, যেখানে প্রথমটা উইন্ডোজের দেয়াল থেকে বাম পাশের দূরত্ব, দ্বিতীয়টা উইন্ডোজের উপরের দেয়াল থেকে দুরত্ব, তৃতীয়টা উইন্ডোজের ডান পাশের দেয়াল থেকে এবং সর্বশেষ উইন্ডোজের নিচের দেয়াল থেকে দুরত্ব। যেমন

<Label Margin="136,48,119,229">Hello World </Label>


• যদি মার্জিনে একটি ভ্যালু দেয়া হয় তাহলে, সে এটাকেই চারদিকে নিয়ে নেয়।

• যদি দুইটা দেয়া হয় তাহলে প্রথম ভ্যালুটা ডান ও বাম পাশের জন্য ও দ্বিতীয় ভ্যালুটা উপর ও নিচের জন্য নিয়ে নেয়।
• মার্জিনে ৩ টা মান দেয়া যায় না।


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

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

কন্টেইনার বা ধারক
কন্টেইনারের উপরেই বিভিন্ন কন্ট্রল (যেমন Button, Label, TextBlock, TextBox ইত্যাদি) বসানো হয়। কন্টেইনার ব্যাবহারের সুবিধা

1. কন্টেইনার ব্যাবহারের ফলে মার্জিন নিয়ে কস্ট করতে হয় না

2. খুব সহজেই বড় ডিজাইন করা যায়
3. ফর্মের সাইজ বোড়-ছোট করা হলে তার অনুপাত সহজেই নিয়ন্ত্রন করা যায়
   

নিচে কয়েক প্রকারের কন্টেইনারের বর্ণনা করা হল।

• Grid
• StackPanel
• Canvas
• DockPanel
• WrapPanel
• UniformGrid

Grid: Grid আমার সবচেয়ে প্রিয় একটা কন্টেইনার যেটা VS এ বাই-ডিফল্ট দেয়া থাকে। গ্রিড হচ্ছে অনেকটা টেবিলের মত, যেখানে রো এবং কলাম থাকে। রো এবং কলামকে ইচ্ছে মত আকার দেয়া যায়। প্রথমে রো এবং কলাম ঠিক করে নিতে হয়। তারপর কন্ট্রলে গিয়ে কন্ট্রোলটা কোন রো এবং কলামে বসবে তা ঠিক করে দিতে হয়। এখন আমরা দুটা রো ও দুটা কলাম নিব। কোড নিচের মত
<Grid>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="254*" />
<ColumnDefinition Width="249*" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="138*" />
<RowDefinition Height="173*" />
</Grid.RowDefinitions>

</Grid>

এখন রো ও কলামের ভিতর কিভাবে লেবেল ও টেক্স বক্স যুক্ত করা হয়েছে, কোড দেখুন।

<Label Content="Name" Name="label1" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Center" />

<TextBox Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" Name="textBox1" Text="Maruf Hassan" VerticalAlignment="Center"/>

<Label Content="Mobile" Grid.Column="0" Grid.Row="1" Name="label2" VerticalAlignment="Center" HorizontalAlignment="Right" />

<TextBox Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" Name="textBox2" Text="01556436270" VerticalAlignment="Center" />

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



DockPanel: DockPanel কাজ করে উইন্ডজের দেয়াল ঘেষে। DockPanel এর প্রপার্টি হল Dock চারটি মান গ্রহন করতে পারে। যথা, Left, Right, Top, Bottom. অর্থাৎ DockPanel.Dock="Top" লিখলে প্যানেল্টা উইন্ডোজের উপরে থাকবে। নিচের কোড দেখুন, এখানে মেনু কে DockPanel.Dock="Top" এ রাখা হয়েছে। তারপর ডক প্যানেলে একটা গ্রিড নিয়ে তাতে ব্যাবহারকারীর নাম ও মোবাইল দেখানো হয়েছে।

<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File" />
<MenuItem Header="_Edit" />
</Menu>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*" />
<ColumnDefinition Width="353*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="47*" />
<RowDefinition Height="34*" />
<RowDefinition Height="34*" />
<RowDefinition Height="172*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Margin="5" Name="textBlock1" Text="Name" HorizontalAlignment="Right" />
<TextBlock Grid.Row="2" Margin="5" Name="textBlock2" Text="Mobile No" HorizontalAlignment="Right" />
<TextBox Grid.Column="1" Margin="5" Grid.Row="1" Name="textBox1" Background="DarkSalmon" Text="Maruf" />
<TextBox Grid.Column="1" Margin="5" Grid.Row="2" Name="textBox2" Background="DarkSalmon" Text="+8801556436270" />
</Grid>
</DockPanel>

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


যদি আমরা বাম পাশে লম্বালম্বি ভাবে কোন লেবেল দেখাতে চাই তাহলে DockPanel,Dock="Left" দিয়ে কাজটা করতে পারি। কোড দেখুন
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File" />
<MenuItem Header="_File" />
<MenuItem Header="_File" />
<MenuItem Header="_File" />
</Menu>
<Label DockPanel.Dock="Left" Content="Beautiful Bangladesh">
<Label.LayoutTransform>
<RotateTransform Angle="90" />
</Label.LayoutTransform>
</Label>
<Grid>
</Grid>
</DockPanel>

আউটপুট দেখুন



StackPanel: StackPanel তার ভিতরের আইটেম গুলাকে একটা রো বা একটা কলামে রাখে। যদি একটা রো বা কলামে না আটে তাহলে তাকে বাদ দিয়ে দেয়। রো বা কলাম নির্ধারন করা হয় Orientation এর দুটা মানে উপর। যথাঃ

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

নিচের কোড দেখুন
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="132*" />
<RowDefinition Height="0*" />
<RowDefinition Height="179*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="0,0,0,123" Grid.RowSpan="3">
<Button Content="Stacj Panel-Vertical Orientation" />
<Label Background="AntiqueWhite" Content="Beautiful Bangladesh--Vertical Orientation" />
<TextBox Text="This is Text Box-Vertical Orientation" Background="AliceBlue" />
</StackPanel>

<StackPanel Orientation="Horizontal" Grid.Row="2" Margin="0,0,0,123">
<Button Content="Ok-Horizontal Orientation" />
<Label Content="Hello-Horizontal Orientation" Background="Aquamarine" />
<TextBox Text="Text box-Horizontal Orientation" Background="Crimson"/>
</StackPanel>
</Grid>

আউটপুট দেখুন


Canvas: Canvas কন্টেইনার তার ভিতরের আইটেম বা চাইল্ডগুলোকে উইন্ডোজের দেয়াল হতে কত দূরে থাকবে তা ঠিক করে দেয়। এটাকে Dock Panel এর আরো কাস্টোমাইজেশ বলা যেতে পারে। এর চারটা প্রপারটি আছে

1. Canvas.Top
2. Canvas.Down
3. Canvas.Left
4. Canvas.Right

প্রপার্টিগুলো মান হিসাবে পূর্ণ সংখ্যা নেয়। কোড দেখুন
<Window x:Class="WpfApplication2.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">
<Canvas>
<Button Canvas.Top="50" Canvas.Left="50" Height="50" Width="100" Content="Top - Left"/>
<Button Canvas.Top="50" Canvas.Right="50" Height="50" Width="100" Content="Top - Right"/>
<Button Canvas.Bottom="50" Canvas.Left="50" Height="50" Width="100" Content="Bottom - Left"/>
<Button Canvas.Bottom="50" Canvas.Right="50" Height="50" Width="100" Content="Bottom - Right"/>
</Canvas>
</Window>

আউটপুট দেখুন


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