2011-10-27

WPF කුප්පි 2 - (Hello World WPF)

හරි.. අපි දැන් ඉතා සරල WPF application එකක් හදමු. අමාරු නෑ ..... හරි ලේසියි.

හරි....මුලින්ම Expression Blend වලින් WPF application එක හදන්නම්. ඊට පස්සේ ඒ application එක Visual Studio එකෙන් කොහොමද කරන්නේ කියල බලමු.
  1. මුලින්ම Expression Blend, open කර ගන්නකෝ.
  2. දැන් අලුත් project එකක් හදන්න.
File -> New Project... හෝ  Ctrl+Shift+N ගහන්න.

Figure 1

    3.  හරි... දැන් පල්ලෙහා තියෙනවා වගේ අලුත් window එකක්  එයි.
Figure 2

මම කරලා තියෙන විදියට WPF Application එකක් select කර ගන්න.

Name:       මේක තමයි අපි හදන්න යන WPF Project එකේ නම. කැමති නමක් දෙන්න පුළුවන්.
Location:   WPF Project එක save වෙන තැන.
Language:  Coding කරන language එක. Visual C sharp හෝ Visual Basic

හරි... දැන් OK button එක click කරන්න.

    4.  දැන් WPF Application එකේ Main Window එකට අලුත් button එකක් add කරමු. ඒකෙ content එක "Blend Button" කියල වෙනස් කරන්න.
  • button එකක් add කරන්නේ මෙහෙමයි.
මුලින්ම වම පැත්තේ තියෙන button icon එක select කරන්න (Figure 3). ඊට පස්සේ main Window eke ඒකෙ click කරලා button එක හදන්න (Figure 4).

Figure 3

Figure 4

  • button ඒකෙ content එක වෙනස් කරන්නේ මෙහෙමයි.
මුලින්ම වම් පැත්තේ තියෙන selection tool එක select කරලා (Figure 5) ඊට පස්සේ button එක මත double click කරලා content එක වෙනස් කරන්න (Figure 6).


   
Figure 5


Figure 6
                    
    හරි.... අපි දැන් අපේ application ඒකේ User Interface එක හදල ඉවරයි. දැන් අපි බලමු "Blend Button" button එක click කලාම message එකක් display වෙන්න හදන්නේ කොහොමද කියල. ඒ කියන්නේ button ඒකේ click event එක trigger කරන්නේ කොහොමද කියල බලමු.

    5.  "Blend Button" එක select කරලා දකුණු පැත්තේ කෙලවරේ තියෙන "Events" icon එක click කරන්න (Figure 7).

                                                                               Figure 7

    6. ඊට පස්සේ click event ඉස්සරහ තියෙන කොටුවේ BlendBtn_Click කියල නමක් දීල Enter ඔබන්න. (Figure 8)

Figure 8

දැන් අලුත් file එකක් open වෙයි. මේකට කියන්නේ  Code Behind File එක කියල. (Figure 9)

Figure 9
 
    7. දැන් අපි message එකක් display කරවමු.

මේ code එක BlendBtn_Click එක ඇතුලට දාන්න.

MessageBox.Show("Hi Blend Button");

    8. දැන් project එක Run කරන්න.

Project -> Run Project (F5 or Ctrl+F5 or Fn+F5)

Run කලාම එන window එකේ button එක click කලාම message එකක් display වෙයි. (Figure 10)

                                                                                Figure 10

ලේසියි නේ......

ඉවරයි කියල කිව්වට ඉවරම නෑ. දැන් අපි Visual Studio එකෙන් මේ project එකම open කරලා ඊට පස්සේ Visual Studio එකෙන් button එකක් add කරලා message box එකක් display කරවමු. ඒකත් ඉතින් මහා ලොකු වැඩක් නෙමේ.

    9. Project එක Visual Studio වලින් open කරන්න.

  • මුලින්ම Project එක තියෙන folder එක කර ගන්න. (Figure 11)
Figure 11

  • ඊට පස්සේ myHelloWorld.sln කියන file එක Visual Studio වලින් open කරන්න.
    10. දැන් අලුත් button එකක් add කරන්න. 
Visual Studio එකේ වම් පැත්තේ තියෙන toolbox එකෙන් button එකක් drag and drop කලා නම් හරි. (Figure 12)

Figure 12

    11. ඒ button එකේ content එක "VS Button" කියල වෙනස් කරන්න.

ඒ button එක  select කරලා ඊටපස්සේ property window (දකුණු අත පැත්තේ තියෙන්නේ) එකේ Common category එකේ content එක ඉස්සරහ කොටුවේ "VS Button" කියල දාන්න. එතකොට හරි. (Figure 13)
Figure 13


    12. දැන් මේ button එක මත double click කරන්න. එතකොට Code Behind File ඒකට යයි. දැන් "button1_Click" කියන function එක ඇතුලේ පල්ලෙහා තියෙන code එක දාන්න. (Figure 14)

MessageBox.Show("Hi VS Button");

Figure 14

    13. දැන් project එක Run කරන්න.

(Debug -> Start Debugging or F5 or fn+f5) or   
       
Figure 15


පල්ලෙහා තියෙන්නේ Run  කලාම එන එක. (Figure 16)

Figure 16





හුරේ............. වැඩේ ගොඩ.......... මේ Hello World WPF Applicaton එකෙන් චූටි අවබෝධයක් එන්න ඇති. මේක තම ආරම්භය. මේ post එකේදී මම කියල දුන්නේ කොහොමද User Interfaces හදන්නේ කියල. ඉස්සරහදි මම කියලා දෙන්නම් කොහොමද ලස්සන, professional User Interfaces හදන්නේ  කියල. ඊට අමතරව Database එකකින් Data Manipulate කරන හැටිත් කියල දෙන්නම්. එතකං මේ ඩිංග හොදට තේරුම ගන්නකො.

WPF කුප්පි 1 - (හැඳින්වීම)

WPF කියන්නේ මයික්‍රොසොෆ්ට් ලගේ UI Framework එකක්. මේකෙන් පුළුවන් සිරා User Interfaces හදන්න. Windows Forms වලට වඩා WPF වලින් මාරම වැඩ කෑලි ටිකක් දාන්න පුළුවන්. මේකේ User Interfaces හදන්න ගන්නේ XAML (Extensible Application Markup Language - " සැමල් " කියල උච්චාරණය කරන්නේ) කියල එකක්. Coding කරන්න ගන්නේ  C# හරි  VB languages.

WPF application හදන්න පුළුවන්  Visual Studio සහ  Expression Blend කියන සොෆ්ට්වෙයාර්ස් වලින්. User Interface හදද්දී  Expression Blend පාවිච්චි කරනවා නම් ගොඩාක් ලේසියි. Expression Blend වලින් coding කරන්නත් පුළුවන්. හැබැයි සමහර Coding කරන කොට Visual Studio පාවිච්චි කරනවා නම් හොදයි. කොටින්ම කියනවා නම් User Interface Expression Blend වලින් හදල Coding කරද්දී Visual Studio වලින් කරන්න.

WPF ගැන ඉගෙන ගන්න පුළුවන් Websites ටිකක්
http://www.kirupa.com/blend_wpf/index.htm
http://www.wpftutorial.net/Home.html


WPF ගැන ලියැවිලා තියෙන පොත් ටිකක් 
WPF 4 - Unleashed
WPF Control Development Unleashed
Windows Presentation Foundation - Unleashed 
Application = Code + Markup
Essential Windows Presentation Foundation
Foundations of WPF: An Introduction to Windows Presentation Foundation
Pro WPF in C# 2008
Foundations of WPF: An Introduction to Windows Presentation Foundation


හරි..... දැන් WPF ගැන පොඩි අවබෝධයක් එන්න ඇති. මම ඊලග පෝස්ට් ඒකෙන් (WPF කුප්පි 2 ) "Hello world" WPF Application එකක් හදන්නම්.