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

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 সম্পর্কে ধারনা পাবেন, কিন্তু এক্সপার্ট হতে হলে বই, ইন্টারনেটে ঘাটা-ঘাটি করতে পরামর্শ ধন্যবাদ সহকারে গৃহীত হবে। হ্যাপি লারনিং ;-)

মঙ্গলবার, ২৯ মার্চ, ২০১১

WPF (Windows Presentation Foundation) - 04

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

প্রতিটি ব্লগে মন্তব্য লেখার ব্যাবস্থা থাকে। মন্তব্য দেয়ার জন্য, মন্তব্যকারীর নাম, ইমেইল এড্রেস এবং মন্তব্য লেখার যায়গা থাকে। সবশেষে একটা সেন্ড বাটন থাকে। নিচের চিত্রের মত একটা কাজ আমরা এ পর্বে করব


  • এ কাজটা করার জন্য আমি গ্রিড লেয়াউট ব্যাবহার করেছি। অন্য যে কোন লেয়াউট দিয়েও করা যাবে
  • Name, Email, Comment এই লেখা গুলো দেখানোর জন্য TextBlock ব্যাবহার করেছি, Label দিয়েও করা যায়
  • Name, Email, Comment লেখার জন্য TextBox ব্যাবহার করেছি।
  • Send একটা বাটন হিসাবে কাজ করব

যে ভাবে শুরু করতে হবেঃ
  • প্রথমে লেয়াউট বা ছাচ তৈরি করতে হবে। তার জন্য চারটা রো দরকার এবং দু'টা কলাম দরকার। তাহলে কোডে দেখি কিভাবে রো এবং কলাম নেয়া যায়।
<Grid>

<!-- Create Row-->
<Grid.RowDefinitions>

<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>

<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition /> <ColumnDefinition />
</Grid.ColumnDefinitions>

</Grid>

চিত্রে দেখি কেমন হয়েছে

  • এখন রো এবং কলামকে আমাদের কাজের উপযোগি আকার দিতে হবে। কোডে দেখি কিভাবে আকার দেয়া যায়
<Grid>
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="120" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>

<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />

<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>

</Grid>

চিত্রে দেখি কেমন হয়েছে


  • এখন তিনটা TextBlock নিয়ে তাদেরকে যথাক্রমে Grid.Row="0" Grid.Row="1" এবং Grid.Row="2" তে গেথে (রেখে) দেয়া হবে। নিচের কোড দেখুন
<Grid>
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>

<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>

<!--TextBlocks-->
<TextBlock Grid.Row="0" Name="tblName" Text="Name:" Margin="5" />
<TextBlock Grid.Row="1" Name="tblEmail" Text="Email:" Margin="5"/>
<TextBlock Grid.Row="2" Name="tblComment" Text="Comment:" />

</Grid>


চিত্রে দেখুন


  • এখন তিনটা টেক্সট বক্স ও একটা বাটন নিয়ে উপরের মত বসিয়ে দিতে হবে।
<Grid>
<!-- Create Row-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>

<!--Create Column-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="213" />
</Grid.ColumnDefinitions>

<!--TextBlocks-->
<TextBlock Grid.Row="0" Name="tblName" Text="Name:" Margin="5" />
<TextBlock Grid.Row="1" Name="tblEmail" Text="Email:" Margin="5"/>
<TextBlock Grid.Row="2" Name="tblComment" Text="Comment:" />

<!--TextBox-->
<TextBox Grid.Column="1" Grid.Row="0" Name="txtName" Margin="3"/>
<TextBox Grid.Column="1" Grid.Row="1" Name="txtEmail" Margin="3"/>
<TextBox Grid.Column="1" Grid.Row="2" Name="txtComment" Margin="3" />

<!--Send Button-->
<Button Content="Send" Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="126,0,0,0" Name="b" VerticalAlignment="Top" Width="75" />
</Grid>


চিত্রে দেখুন

এইতো হয়ে গেলো সবচেয়ে ছোট্ট ও সহজ একটা WPF ডিজাইন। ;-) এটাকে F5 চেপে রান করে দেখুন কেমন দেখায়...

বুধবার, ২৩ মার্চ, ২০১১

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) - 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 এর সাথে পরিচয় করিয়ে দেয়া, এক্সপার্ট হতে হলে অবশ্যই বই পড়তে হবে

সোমবার, ২১ মার্চ, ২০১১

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 সম্পর্কে ধারনা দেয়া, এক্সপার্ট হতে হলে অবশ্যই বই পড়তে হবে।