সোমবার, ১৮ এপ্রিল, ২০১১

WPF (Windows Presentation Foundation) - 06

অনেকেই বলে শুধু আঁকি-ঝুকি দিয়ে কি প্রোগ্রামিং হয়? লজিক কোথায় লিখব? ইভেন্ট হ্যান্ডেলার ছাড়া ভাল লাগে না। আসলে WPF হচ্ছে XAML দিয়ে ইউজার ইন্টারফেস তৈরি করা, তার পিছনে থাকে সি#। C# এ আগের মতই ইভেন্ট হ্যান্ডেলার রয়েছে। তাছাড়াও MVVM প্যাটার্ন ব্যাবহার করে কমান্ড বাইংডিং এর মাধ্যমে কাজ করা যায়। আমি আর দু-একটা পর্ব পরেই ইভেন্ট হ্যান্ডেলার ও কমান্ড বাইনডিং নিয়ে বিস্তারিত লিখার চিন্তা করতে ছিলাম। কিন্তু পারা গেল না। ইভেন্ট হ্যান্ডেলিং এখনই শুরু করতে হল।

আসুন জেনে নেই কি হয়, যখন আমরা একটা WPF এপ্লিকেশন তৈরি করি।
  • একটা WPF এপ্লিকেশন তৈরি করুন, সাহায্য এখান থেকে
  • VS-2010 এর View থেকে Solution Explorer এ ক্লিক করুন
  • বাম পাশে দেখুন আপনার সলুশনে চারটা আইটেম দেখাচ্ছে (নিচের মত)
  • এখানে App.xaml ও MainWindow.xaml নামে দুইটা এক্স.এ.এম.এল ফাইল আছে। এ দুটা ফাইলকে এক্সপান্ড করলে আরো দুটা ফাইল পাওয়া যাবে। নিচে দেখুন
  • MainWindow.xaml.cs ফাইল হল MainWindow.xaml ফাইলের কোড বিহাইন্ড ফাইল। দুটো ফাইলেই একটা করে পার্শিয়াল ক্লাস রয়েছে। পার্শিয়াল ক্লাস হচ্ছে এমন একটা ক্লাস যেটা দুটা ভাবে বিভক্ত, কিন্তু কম্পাইলের সময় একটা ক্লাস হিসাবে কাজ করে। সহজ কথায় একটা ক্লাসকে দুই ভাগে ভাগ করে দু'জায়গায় রাখা।
  • .xaml ফাইলে xaml এর ট্যাগ ব্যাবহার করে কোড করা যায়। নিচে 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> </Grid>
</Window>
  • .cs ফাইলে c# দিয়ে কোড করা হয়। c# ফাইলে ভিতরের কোড দেখতে MainWindow.xaml.cs ডাবল ক্লিক করুন, নিচের মত কোড দেখতে পাবেন।
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;

using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
/// /// Interaction logic for MainWindow.xaml ///
public partial class MainWindow : Window
{
public MainWindow()
{

InitializeComponent();

}
}
}

  • এখন MainWindow ক্লাসে লজিক, লুপ বা ইভেন্ট হ্যান্ডেলিং এর জন্য আমরা MainWindow.xaml.cs ফাইল ব্যবহার করব
  • আর ইউজার ইন্টারফেস তৈরির জন্য MainWindow.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>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="166*" />
<ColumnDefinition Width="337*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>


<RowDefinition Height="48*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />

<RowDefinition Height="31" />
<RowDefinition Height="Auto" />

<RowDefinition Height="122*" />

</Grid.RowDefinitions>

<Label Content="First Number" Grid.Row="1" Name="lblFirst" Margin="5" HorizontalContentAlignment="Right" />

<Label Content="Second Number" Grid.Row="2" Name="lblSecond" Margin="5" HorizontalContentAlignment="Right" />

<TextBox Grid.Column="1" Grid.Row="1" Name="txtFirst" Margin="5,5,95,5" />

<TextBox Grid.Column="1" Grid.Row="2" Name="txtSecond" Margin="5,5,95,5" />


<Label Content="Result" Grid.Row="4" Name="lblResutl" HorizontalContentAlignment="Right" />

<TextBlock Grid.Column="1" Grid.Row="4" Name="txblkResult" />


<Button Content="ADD" Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="btnResult" VerticalAlignment="Top" Width="75" Click="btnResult_Click"/>


</Grid>
</Window>

  • btnResult বাটনের ক্লিক ইভেন্ট হ্যান্ডেলার তৈরি করার জন্য btnResult_Click লেখার উপর রাইট ক্লিক করলে যে মেনু আসবে তার Navigate to Event Handler এ ক্লিক করলেই MainWindow.xaml.cs ফাইলে ইভেন্ট হ্যান্ডেলার তৈরি হয়ে যাবে।
  • নিচের কোডে MainWindow.xaml.cs এর পরিবর্তন দেখি
namespace WpfApplication1
{
///
/// Interaction logic for MainWindow.xaml
///

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void btnResult_Click(object sender, RoutedEventArgs e)
{

}
}
}
  • এখন এই ডিজাইন অংশে যে সমস্ত কন্টেইনার নেয়া হয়েছে যেমন Text Box, Level, Text Block ইত্যাদি তার সবগুলিই MainWindow.xaml.cs ক্লাসে পাওয়া যাবে কমপ্লিট করতে হবে। কোডে দেখুন
namespace WpfApplication1
{
///
/// Interaction logic for MainWindow.xaml
///

public partial class MainWindow : Window
{
int
first,
second,
result;

public MainWindow()
{
InitializeComponent();
}

private void btnResult_Click(object sender, RoutedEventArgs e)
{
first = Convert.ToInt32(txtFirst.Text);
second = Convert.ToInt32(txtSecond.Text);
result = first + second;

txblkResult.Text = result.ToString();
}
}
}
আউটপুট দেখুন


এভাবেই WPF এ ইভেন্ট হ্যান্ডেলিং এর কাজ করা হয়।

মঙ্গলবার, ৫ এপ্রিল, ২০১১

WPF (Windows Presentation Foundation) - 05

রঙ-চং
গত চারটি পর্বে অনেক রস-কসহীন আলাপ হয়েছে। তাই এই পর্বে রঙিন আলাপ করতে চাই। WPF আসলে সত্যিকারের গ্রাফিকাল প্রোগ্রামিং, যেখানে কালারের এত সুন্দর কাজ আগে কোন ল্যাংগুয়েজ দ্বারা করা সম্ভব ছিল না। রঙের কাজ করার জন্য কয়েকটা বিষয় আমাদের বুঝতেই হবে।
  • Pen: Pen দ্বারা আসলে একটা লাইন বা কোন বর্ডারের কালারকে বুঝনো হয়। Pen কে আমরা আমাদের লেখার কলমের সাথে তুলনা করতে পারি। যেটা দিয়ে চিকন দাগ দেয়া যায়। Stroke প্রপার্টি দিয়ে Pen এর কাজ করা হয়ে থাকে। কোডে দেখি কিভাবে Stroke দিয়ে পেনের কাজ করা হয়
<Grid> <Viewbox Width="500" Stretch="Uniform" Height="40"> <Line X1="0" Y1="1" X2="80" Y2="1" Stroke="Black" StrokeDashArray="3" StrokeDashCap="Triangle"/> </Viewbox> </Grid>

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

ব্যাখ্যাঃ
  • ViewBox কোয়ালিটি ঠিক রেখে তার ভিতরের কন্ট্রোলকে সম্পূর্ণ যায়গা ব্যাবহার করতে দেয়, যেন সব কিছু সমহারে বড় হতে পারে।
  • Line ট্যাগের মাধ্যমে লাইন টানা যায়। X1 ও Y1 দিয়ে লাইনের শুরু এবং X2 ও Y2 লাইনের শেষ নির্ধারন করা হয়।
  • Stroke দিয়ে Pen এর রঙ ঠিক করা হয়
  • StrokeDashArray বুঝায় কত পরপর ডেশ দেয়া হবে
  • StrokeDashCap মানে হচ্ছে ডেশের মাথা কেমন হবে
আরেকটা উদাহরণ দেখেনঃ
<Ellipse Height="100" Width="100" Stroke="Red" StrokeDashArray="2" StrokeDashCap="Square" StrokeThickness="5" />
আউটপুট নিচের মতঃ

আশা করি স্ট্রোকের কাজ বুঝতে সক্ষম হয়েছেন।

Brush: Brush দ্বারা কোন এরিয়ার কালার কি হবে তা বুঝানো হয়। আমরা একে অনেকটা রঙের ব্রাশ দিয়ে কোন জায়গা রঙ করার মত চিন্তা করতে পারি। ব্রাশের কাজ Fill দিয়ে করা হয়। নিচের কোড দেখুন
<Ellipse Height="100" Width="200" Stroke="Blue" StrokeThickness="5"> <Ellipse.Fill> <SolidColorBrush Color="Cyan" /> </Ellipse.Fill> </Ellipse>

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


ব্যাখ্যাঃ
  • Ellipse.Fill দ্বারা সম্পুর্ণ জায়গা করা হবে তা বুঝানো হয়েছে।
  • SolidColorBrush দ্বারা কালার ঠিক করা হয়েছে।
এতটুকুই সব না। মানুষ আরো বেশি কিছু চায়। গ্রাডিয়েন্ট মানে হচ্ছে একটা রঙ আরেকটা রঙের মাঝে ঢুকে যাওয়া। WPF দিয়ে অতি সহজেই গ্রাডিয়েন্ট কালার করা যায়। দুই রকম গ্রাডিয়েন্ট রয়েছে। একটা লম্বা-লম্বি না লিনিয়ার গ্রাডিয়েন্ট অন্যটা রেডিয়াল গ্রাডিয়েণ্ট।

lineargradientBrush: lineargradientBrush এর মাধ্যমে একাধিক কালারের মিশ্রণ পাওয়া সম্ভব। নিচে কোড দেখি এবং বুঝতে চেস্টা করি
<Rectangle Width="200" Height="150" Stroke="Black" StrokeThickness="5"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Green" Offset=".7" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

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

ব্যাখ্যাঃ
  • Rectangle এর মাধ্যমে একটা চতুর্ভুজ নেয়া হয়েছে
  • Rectangle.Fill এর মাধ্যমে চতুর্ভুজকে রঙ করা হবে তা বুঝানো হয়েছে। LinearGradientBrush দ্বারা রঙ কোথা থেকে শুরু হবে এবং কোথায় শেষ হবে তা বুঝায় StartPoint এবং EndPoin দ্বারা। এখানে x এবং y অক্ষের শুরু হয় উপরে বাম কর্নার থেকে, অর্থাৎ উপরের বাম কর্নারে x=0, y=0 এবং নিচে ডান কর্নারে x=1, y=1
  • GradientStop এর দ্বরা বুঝানো হয় ঠিক কোথায় কালারের ঘনত্ব বেশি হবে। মানে গ্রাডিয়েন্ট শেষ হবে।
radialgradientBrush: এর দ্বারা বৃত্তকে গ্রাডিয়েন্ট কালার দেয়া যায়। কোড দেখুন
<Ellipse Width="200" Height="150" Stroke="Black" StrokeThickness="4">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin=".5,.5">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Black" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>

আউটপুট দেখুনঃ

ব্যাখ্যাঃ আগের মতই। আরো বিস্তারিত জানতে মাইক্রোসফটের সাহায্য দেখে নিন।
সাহায্য-১

সাহায্য-২

এই পর্ব এখানেই শেষ। অন্য সব পর্বের মত আবারো বলি, এখান থেকে আপনি WPF সম্পর্কে ধারনা পাবেন, কিন্তু এক্সপার্ট হতে হলে বই, ইন্টারনেটে ঘাটা-ঘাটি করতে পরামর্শ ধন্যবাদ সহকারে গৃহীত হবে। হ্যাপি লারনিং ;-)