tag:blogger.com,1999:blog-78164242594765230042011-04-21T10:52:42.206-07:00การเขียนโปรแกรม WPF และ Silverlight ด้วย Visual Studio , Expression Blend อย่างง่าย ๆJohttp://www.blogger.com/profile/03400128710739454820noreply@blogger.comBlogger221100tag:blogger.com,1999:blog-7816424259476523004.post-3872112474114503822008-11-10T22:36:00.000-08:002008-11-10T22:54:00.669-08:00เราจะมาดูว่า ตอนแรกที่เราเริ่มสร้าง Project เราจะได้ โครงสร้าง xaml ที่เป็นกริด(ตาราง) ชื่อว่า LayoutRoot ให้เราคลิกที่ด้านข้างของกริด จะเป็นการสร้างขีดแถว(RowDefinition) ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step13.png"><img style="cursor: pointer; width: 666px; height: 383px;" src="http://silverlight2blogpost.s3.amazonaws.com/step13.png" alt="" border="0" /></a><br /><br />การคลิกที่หัวมุมด้านซ้ายบนของ Layout จะเป็นการสลับไปมา ระหว่าง Grid กับ Canvas<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step14.png"><img style="cursor: pointer; width: 591px; height: 442px;" src="http://silverlight2blogpost.s3.amazonaws.com/step14.png" alt="" border="0" /></a><br /><br />โปรดสังเกตุด้านข้างของกริด จะเห็นเป็นรูปกุญแจ<br /><ul><li>รูปกุญแจปิด หมายถึง เรากำหนดขนาดตายตัว ให้กับแถวนั้น</li><li>รูปกุญแจเปิด หมายถึง เราให้ขนาดของแถวนั้น สัมพันธ์เป็นสัดส่วนกับ แำถวอื่น ๆ ที่กุญแจเปิด เหมือนกัน (หากผู้ใช้ขยายขนาดกริด แถวเิิปิดจะขนาดออกตามขนาดกริด หากผู้ใช้หดขนาดกริด แถวเปิดจะหกลงตามขนาดกริด)</li></ul>เมื่อคลิกที่รูปกุญแจ จะเป็นการสลับไป-มา ระหว่าง เปิด-ปิด<br /><br />ตัวอย่างเช่น เราให้แถวบน กับ แถวล่างมีขนาดคงที่ แต่แถวกลางขยายขนาดได้ ตามขนาดกริด<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step15.png"><img style="cursor: pointer; width: 581px; height: 435px;" src="http://silverlight2blogpost.s3.amazonaws.com/step15.png" alt="" border="0" /></a><br /><br />และเราจะให้ คอลัมภ์แรกเปิด และคอลัมภ์ที่สองขนาดคงที่<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step17.png"><img style="cursor: pointer; width: 584px; height: 436px;" src="http://silverlight2blogpost.s3.amazonaws.com/step17.png" alt="" border="0" /></a><br /><br />เมื่อเราทำเสร็จ พอเราไปดูโค้ด xaml จะเห็นโค้ด ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step18.png"><img style="cursor: pointer; width: 487px; height: 406px;" src="http://silverlight2blogpost.s3.amazonaws.com/step18.png" alt="" border="0" /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-387211247411450382?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com1tag:blogger.com,1999:blog-7816424259476523004.post-57742080760115040482008-11-04T00:24:00.000-08:002008-11-04T00:46:22.736-08:00ใน Blend หน้าต่าง Tools จะต่างจาก Visual Studio เล็กน้อย<br />โดย Blend จะไปคล้ายกับเครื่องมือกราฟิก เช่น โฟโต้ชอป มากกว่า<br />โดยมีเครื่องมือวาดแบบเวกเตอร์ ด้านล่าง(ปากกา,ดินสอ)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step3.png"><img style="cursor: pointer; width: 544px; height: 456px;" src="http://silverlight2blogpost.s3.amazonaws.com/step3.png" alt="" border="0" /></a><br />และมีคอนโทรลให้เรียกใช้ครบ<br />โดยแบ่งออกเป็น<br /><ol><li>Layout ชนิดต่าง ๆ (Grid,StackPanel,Canvas,Border,ScrollViewer,etc).</li><li>คอนโทรลข้อความ (TextBlock,TextBox,etc)</li><li>คอนโทรลอื่น ๆ</li></ol><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step5.png"><img style="cursor: pointer; width: 502px; height: 406px;" src="http://silverlight2blogpost.s3.amazonaws.com/step5.png" alt="" border="0" /></a><br />หากต้องการเลือกคอนโทรล อื่น ๆ ให้กด &gt;&gt;<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step6.png"><img style="cursor: pointer; width: 539px; height: 328px;" src="http://silverlight2blogpost.s3.amazonaws.com/step6.png" alt="" border="0" /></a><br />ขอให้กดปุ่ม Show All ด้วย เพื่อจะได้เห็นคอนโทรลครบทั้งหมด<br />เมื่อคุณได้คลิกคอนโทรล ให้คุณคลิกแล้วลากบนอาร์ตบอร์ด ก็จะเห็นคอนโทรลขึ้นมาตามพิกัดที่คุณลาก<br />หรือ คุณจะลากคอนโทรล มาวางบนอาร์ตบอร์ด เลยก็ได้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step8.png"><img style="cursor: pointer; width: 565px; height: 356px;" src="http://silverlight2blogpost.s3.amazonaws.com/step8.png" alt="" border="0" /></a><br /><span style="font-weight: bold;">ทำความเข้าใจกับหน้าต่างพร้อพเพอตี้</span><br />เมื่อคุณคลิกบนคอนโทรล แล้วกดที่หน้าต่างพร้อพเพอตี้ ด้านขวา ดังรูป<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step9.png"><img style="cursor: pointer; width: 543px; height: 630px;" src="http://silverlight2blogpost.s3.amazonaws.com/step9.png" alt="" border="0" /></a><br />เราสามารถเปลี่ยนค่าพร้อพเพอตี้ได้ตามต้องการ<br />ด้านบน ผมเปลี่ยนสี Background เป็นแบบ Gradient (ไล่เฉดสี) สีน้ำเงิน<br /><br />และต้องการจะเปลี่ยนค่าฟอนต์ แต่ผมหาพร้อพเพอตี้นี้ไม่เจอ<br />ผมจึงพิมพ์ลงไปในช่อง Search ว่า font<br />หน้าต่างพร้อพเพอรตี้ก็จะแสดงพร้อพเพอตี้ที่เกี่ยวข้องกับ font ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step10.png"><img style="cursor: pointer; width: 563px; height: 259px;" src="http://silverlight2blogpost.s3.amazonaws.com/step10.png" alt="" border="0" /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-5774208076011504048?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-15124192577201861382008-11-02T22:18:00.000-08:002008-11-03T01:21:45.368-08:00ในตอนก่อน ๆ เราใช้เีพียง Visual Studio ในการเขียน Silverlight ในตอนนี้เราจะใช้ Expression Blend ในการช่่วยเขียน Silverlight บ้าง โดยเราจะเขียนโปรแกรม Chat กัน ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/app2.png"><img style="cursor: pointer; width: 637px; height: 507px;" src="http://silverlight2blogpost.s3.amazonaws.com/app2.png" alt="" border="0" /></a><br /><br />ด้านบน คือ หน้าจอตอนเราใช้จริง ส่วนด้านล่าง คือ หน้าจอตอนเราดีไซน์งานใน Blend<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step64.png"><img style="cursor: pointer; width: 642px; height: 383px;" src="http://silverlight2blogpost.s3.amazonaws.com/step64.png" alt="" border="0" /></a><br /><br />หากต้องการ ไฟล์ Source Code ให้คลิ้ก<a href="http://www.scottgu.com/blogposts/chatsample/chatclient.zip">ที่นี่</a><br /><br /><span style="font-weight: bold;">เริ่มต้น สร้างโปรเจ็ก Silverlight 2</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step1.png"><img style="cursor: pointer; width: 632px; height: 450px;" src="http://silverlight2blogpost.s3.amazonaws.com/step1.png" alt="" border="0" /></a><br />เมื่อเสร็จแล้วเราจะได้ ไฟล์โซลูชั่น และไฟล์ือื่น ๆ ครบ (สามารถเปิดได้จาก Visual Studio ได้)<br />และเห็นหน้าตา ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight2blogpost.s3.amazonaws.com/step2.png"><img style="cursor: pointer; width: 628px; height: 380px;" src="http://silverlight2blogpost.s3.amazonaws.com/step2.png" alt="" border="0" /></a><br />ตรงกลางจะเห็น หน้าต่าง บน เป็นหน้าต่าง Design ซึ่งจะมีหน้าตาเหมือน เนื้องานที่ออกมา (WYSWYG)<br />ด้านล่าง จะเห็น หน้าต่าง ที่เป็นโค้ด xaml ของเนื้องานนั้น<br /><br />บล๊อกได้เคยกล่าวถึงวิธีการใช้ Expression Blend ไว้พอสมควร <a href="http://wpftutor.blogspot.com/2008_09_01_archive.html">โปรดติดตาม ตอนก่อน ๆ ที่อยู่ในเดือน กันยายน</a> ครับ<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-1512419257720186138?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com1tag:blogger.com,1999:blog-7816424259476523004.post-43080523765218040022008-10-29T02:23:00.000-07:002008-10-30T02:18:49.903-07:00(แปลจาก blog ภาษาอังกฤษของ Scottgu <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx">ที่นี่</a>)<br />หากต้องการตัวอย่าง SourceCode ฉบับเต็ม กดที่นี่<br /><br />คุณสมบัติพิเศษของ Silverlight และ WPF คือ อนุญาติให้เราปรับแก้ หน้าตา ของคอนโทรล ได้อย่างสมบูรณ์<br />เรามาดูคอนโทรลแรกที่เราจะแก้กัน<br /><br />ปุ่ม Button<br />ของเดิม<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step13.png"><img style="cursor: pointer; width: 482px; height: 30px;" src="http://silverlight1blogpost.s3.amazonaws.com/step13.png" alt="" border="0" /></a><br />มีหน้าตา อย่างนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step109.png"><img style="cursor: pointer; width: 172px; height: 86px;" src="http://silverlight1blogpost.s3.amazonaws.com/step109.png" alt="" border="0" /></a><br />ท่านอาจจะแปลกใจว่า Content ของ Button นั้น ไม่จำเป็นต้องเป็นข้อความเสมอไป จริง ๆ เราอาจใส่ออปเจ็กอื่น ๆ ไว้ภายใน (ในแท็ก &lt;Button.Content&gt;) ได้ เช่น<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step107.png"><img style="cursor: pointer; width: 531px; height: 177px;" src="http://silverlight1blogpost.s3.amazonaws.com/step107.png" alt="" border="0" /></a><br />ได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step108.png"><img style="cursor: pointer; width: 473px; height: 246px;" src="http://silverlight1blogpost.s3.amazonaws.com/step108.png" alt="" border="0" /></a><br /><br />เราอาจใช้คอนโทรลที่เป็นรูปร่าง(Shape) เช่น Ellipse(วงรี) เช่น<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step21.png"><img style="cursor: pointer; width: 583px; height: 297px;" src="http://silverlight1blogpost.s3.amazonaws.com/step21.png" alt="" border="0" /></a><br />ได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step22.png"><img style="cursor: pointer; width: 571px; height: 298px;" src="http://silverlight1blogpost.s3.amazonaws.com/step22.png" alt="" border="0" /></a><br /><br />ถ้าเราจะเล่นพิเรนท์ ใส่ปฏิทินลงไปในปุ่ม ก็ยังได้ เช่น<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step23.png"><img style="cursor: pointer; width: 519px; height: 157px;" src="http://silverlight1blogpost.s3.amazonaws.com/step23.png" alt="" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step24.png"><img style="cursor: pointer; width: 524px; height: 463px;" src="http://silverlight1blogpost.s3.amazonaws.com/step24.png" alt="" border="0" /></a><br /><span style="font-weight: bold;">การปรับหน้าตาของคอนโทรลด้วย ControlTemplate<span style="font-weight: bold;"></span></span><br />ใน WPF และ Silverlight เราสามารถปรับหน้าตาของคอนโทรลได้โดยสิ้นเชิง โดยที่พฤติกรรมของคอนโทรลไม่เปลี่ยนแต่อย่างใด<br />ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนปุ่มให้เป็นรูปวงกลมเหมือนด้านล่าง ให้เราสร้าง Style ขึ้นมาอันนึง เก็บไว้ใน App.xaml แล้วใส่ &lt;ControlTemplate&gt; ไว้ข้างใน ภายในให้ใส่ หน้าตา ที่ต้องการไว้<br />ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step110.png"><img style="cursor: pointer; width: 562px; height: 457px;" src="http://silverlight1blogpost.s3.amazonaws.com/step110.png" alt="" border="0" /></a><br />แล้วนำไปใช้กับ Button ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step112.png"><img style="cursor: pointer; width: 702px; height: 51px;" src="http://silverlight1blogpost.s3.amazonaws.com/step112.png" alt="" border="0" /></a><br />จะได้ผล ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step111.png"><img style="cursor: pointer; width: 306px; height: 248px;" src="http://silverlight1blogpost.s3.amazonaws.com/step111.png" alt="" border="0" /></a><br />แต่ สังเกตว่า ใน Button เรากำหนด Size และ Content ไว้ตายตัว("Push Me!)<br />แต่ ถ้าเราต้องการจะนำ Size ที่ผู้ใช้คอนโทรลด้านนอก กำหนดมา มาใช้<br />และใช้ Content ที่ผู้ใช้ด้านนอกกำหนดมา มาใช้<br /><br />ให้เราใช้ {TemplateBinding}<br />และใช้ ContentPresenter แทน Content ของเรา ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step113.png"><img style="cursor: pointer; width: 595px; height: 425px;" src="http://silverlight1blogpost.s3.amazonaws.com/step113.png" alt="" border="0" /></a><br />แล้วเรานำ ControlTemplate นี้ไปใช้ ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step114.png"><img style="cursor: pointer; width: 592px; height: 295px;" src="http://silverlight1blogpost.s3.amazonaws.com/step114.png" alt="" border="0" /></a><br /><br />แล้วได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step115.png"><img style="cursor: pointer; width: 576px; height: 230px;" src="http://silverlight1blogpost.s3.amazonaws.com/step115.png" alt="" border="0" /></a><br />ทีนี้เราจะให้ เป็นปุ่มวงกลม แล้วนำไปใช้ใน Digg ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step118.png"><img style="cursor: pointer; width: 634px; height: 410px;" src="http://silverlight1blogpost.s3.amazonaws.com/step118.png" alt="" border="0" /></a><br />แล้วได้ผลลัพท์สุดท้าย ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step117.png"><img style="cursor: pointer; width: 624px; height: 415px;" src="http://silverlight1blogpost.s3.amazonaws.com/step117.png" alt="" border="0" /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-4308052376521804002?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-87790510589895154602008-10-27T23:12:00.000-07:002008-10-29T02:22:03.058-07:00(แปลจาก blog ภาษาอังกฤษของ Scottgu <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-6-using-user-controls-to-implement-master-detail-scenarios.aspx">ที่นี่</a>)<br />หากต้องการตัวอย่าง SourceCode ฉบับเต็ม <a href="http://www.scottgu.com/blogposts/slbeta1apps/diggsample.zip">กดที่นี่</a><br /><br />เป้าหมายพื้นฐานของ Silverlight และ WPF คือ ให้ผู้ใช้สร้างคอนโทรลขึ้นมาเอง ที่จะนำกลับมาใช้ใหม่ได้เรื่อย ๆ โดยเขียน คอนโทรลสืบทอดจากคอนโทรลเดิมที่มีอยู่แล้วใน Silverlight (จาก Control หรือ TextBox , Button ,อื่น ๆ)<br /><br />สำหรับในตัวอย่างนี้ เราต้องการให้ ผู้ใช้ ค้นหา Topic แล้วแสดง Story ใน List เมื่อผู้ใช้เลือก Story แล้ว จะแสดง Detail ออกมา เช่น ให้เลือก Storyจาก ListBox ด้านล่าง<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/app1.png"><img style="cursor: pointer; width: 668px; height: 541px;" src="http://silverlight1blogpost.s3.amazonaws.com/app1.png" alt="" border="0" /></a><br /><br />แล้วจะแสดง Detail ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/app2.png"><img style="cursor: pointer; width: 667px; height: 545px;" src="http://silverlight1blogpost.s3.amazonaws.com/app2.png" alt="" border="0" /></a><br /><br />เราจะสร้างคอนโทรล ที่ชื่อว่า "StoryDetailsView" เพื่อแสดงผล Detail ดังภาพด้านบน<br />โดยกด Add New Item แล้ว เลือก Silverlight User Control แล้วกด Add<br /><br />จะเกิดไฟล์ 2 ไฟล์ คือ StoryDetailsView.xaml และ StoryDetaisView.xaml.cs ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step89.png"><img style="cursor: pointer; width: 232px; height: 269px;" src="http://silverlight1blogpost.s3.amazonaws.com/step89.png" alt="" border="0" /></a><br /><br /><span style="font-weight: bold;">สร้าง Modal Dialog (หน้าต่างที่ต้องทำงานเสร็จจนปิดก่อน จึงจะทำงานอย่างอื่นต่อได้) โดยใช้ User Control</span><br /><br />เราจะแสดงภาพให้ดูเหมือน ปิดหน้าเดิม ด้วยการสร้าง สี่เหลี่ยม Rectangle ทึบ ๆ ครอบทับ หน้าจอ ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step91.png"><img style="cursor: pointer; width: 705px; height: 247px;" src="http://silverlight1blogpost.s3.amazonaws.com/step91.png" alt="" border="0" /></a><br />Opacity คือ ความทึบแสง ถ้ามีค่าเป็น 1 หมายถึงทึบ ถ้ามีค่าเป็น 0 หมายถึง ใส<br />ในที่นี้ Opacity="0.765" หมายถึง ทึบแสง 76.5%<br />HorizontalAlignment="Stretch" หมายถึง กว้างเต็มตามแนวขวาง<br />VerticalAlignment="Stretch" หมายถึง สูงเต็มตามแนวตั้ง (พูดง่าย ๆ ว่า เต็มจอ)<br /><br />Border ด้านล่าง คือ กรอบของไดอะลอก มีมุมมน (CornerRadius="30")<br />แล้วมี Button ปุ่ม Close อยู่ข้างใน เชื่อมกับอีเวนท์ CloseBtn_Click<br /><br />ได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step92.png"><img style="cursor: pointer; width: 599px; height: 424px;" src="http://silverlight1blogpost.s3.amazonaws.com/step92.png" alt="" border="0" /></a><br /><br />ในฟังก์ชัน CloseBtn_Click ที่อยู่ใน .cs ให้กำหนด Visibility ของคอนโทรลให้เป็น Collapsed เพื่อซ่อนปิดคอนโทรลไป ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step93.png"><img style="cursor: pointer; width: 526px; height: 376px;" src="http://silverlight1blogpost.s3.amazonaws.com/step93.png" alt="" border="0" /></a><br />การนำคอนโทรลไปใช้<br />เราก็ใส่คอนโทรลของเราเข้าไปในหน้า Page.xaml และกำหนด Visibility="Collapse" ไว้ก่อน ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step94.png"><img style="cursor: pointer; width: 680px; height: 137px;" src="http://silverlight1blogpost.s3.amazonaws.com/step94.png" alt="" border="0" /></a><br />ให้เราสร้างฟังก์ชันเชื่อมอีเวนท์ SelectionChanged จาก ListBox ของเรา ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step95.png"><img style="cursor: pointer; width: 590px; height: 84px;" src="http://silverlight1blogpost.s3.amazonaws.com/step95.png" alt="" border="0" /></a><br />ทำให้ เมื่อเราเลือกหัวข้อใดหัวข้อหนึ่งใน ListBox แล้ว คอนโทรลของเราก็จะปรากฏตัวขึ้น<br /><br /><span style="font-weight: bold;">ส่งต่อข้อมูลของ Story ไปให้ คอนโทรลของเรา</span><br />เมื่อผู้ใช้เลือก Story ที่ต้องการแล้ว เราก็จะส่ง Story นั้นไปเก็บไว้ในพร้อพเพอตี้ DataContext ของ DetailsView (สำหรับ DataBinding) ดังนี้ แล้วแสดงคอนโทรลออกมา (โดยเซ็ต Visibility) ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step97.png"><img style="cursor: pointer; width: 581px; height: 136px;" src="http://silverlight1blogpost.s3.amazonaws.com/step97.png" alt="" border="0" /></a><br />แล้วในคอนโทรลของเรา เชื่อม (DataBind) ระหว่าง Title กับ TextBlock ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step99.png"><img style="cursor: pointer; width: 676px; height: 326px;" src="http://silverlight1blogpost.s3.amazonaws.com/step99.png" alt="" border="0" /></a><br />จะได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step100.png"><img style="cursor: pointer; width: 513px; height: 339px;" src="http://silverlight1blogpost.s3.amazonaws.com/step100.png" alt="" border="0" /></a><br />สังเกตว่า Title ของ Story มาแสดงแล้ว<br />ทีนี้เราจะมาเชื่อมข้อมูล ทั้งหมด แล้วแสดงใน หน้าต่างนี้ ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step103.png"><img style="cursor: pointer; width: 673px; height: 509px;" src="http://silverlight1blogpost.s3.amazonaws.com/step103.png" alt="" border="0" /></a><br />แล้วได้ผล ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step101.png"><img style="cursor: pointer; width: 626px; height: 434px;" src="http://silverlight1blogpost.s3.amazonaws.com/step101.png" alt="" border="0" /></a><br /><br />สังเกตว่า เราสามารถเชื่อม ข้อมูล ระหว่างกัน ผ่านคอนโทรล ด้วยพร้อพเพอตี้ DataContext โดย ไม่ต้องเขียน โค้ดโปรแกรม เลยแม้แต่บรรทัดเดียว<br /><br />ตอนต่อไป เราจะตกแต่ง ListBox และ Button ให้ดูสวยกว่านี้ ด้วยการแก้ไข ControlTemplate<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-8779051058989515460?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-65965664217173338102008-10-26T23:22:00.000-07:002008-10-26T23:54:34.686-07:00(แปลจาก blog ภาษาอังกฤษของ Scottgu<a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx">ที่นี่</a>)<br />หากต้องการตัวอย่าง SourceCode ฉบับเต็ม <a href="http://www.scottgu.com/blogposts/slbeta1apps/diggsample.zip">กดที่นี่</a><br /><br />ตอนก่อน เราใช้ DataGrid ในแสดงผล ข้อมูลเว็บ Digg ในตอนนี้เราจะลองใช้ ListBox แสดงแทน เพื่อให้ข้อมูลดูเป็นรายการแทน (แทนการดูเป็นตาราง)<br /><br />เริ่มต้น แทนคอนโทรล DataGrid ด้วยคอนโทรล &lt;ListBox&gt; โดยให้มีชื่อเหมือนเดิมว่า StoriesList :<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step73.png"><img style="cursor: pointer; width: 352px; height: 60px;" src="http://silverlight1blogpost.s3.amazonaws.com/step73.png" alt="" border="0" /></a><br /><br />เมื่อเรารันโปรแกรม แล้วลอง ค้นหา จะได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step74.png"><img style="cursor: pointer; width: 607px; height: 356px;" src="http://silverlight1blogpost.s3.amazonaws.com/step74.png" alt="" border="0" /></a><br /><br />คุณอาจประหลาดใจว่า คำว่า "DiggSample.DiggStory" มาจากไหน<br />เนื่องจาก ListBox ไม่รู้จะเอาค่าไหนของ DiggStory มา มันจึงเอามาจากฟังก์ชัน ToString() แทน<br /><br />ให้เราเพิ่ม DisplayMemberPath="Title" เข้าไป ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step76.png"><img style="cursor: pointer; width: 600px; height: 59px;" src="http://silverlight1blogpost.s3.amazonaws.com/step76.png" alt="" border="0" /></a><br />เราจะได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step75.png"><img style="cursor: pointer; width: 599px; height: 360px;" src="http://silverlight1blogpost.s3.amazonaws.com/step75.png" alt="" border="0" /></a><br />เนื่องจาก เราต้องการแสดงผลมากกว่าหนึ่งฟิลด์ และเราต้องการจะจัดวางตำแหน่งข้อมูลใหม่ เราจึงสร้าง<br />&lt;DataTemplate&gt; ขึ้นมาไว้ใน &lt;ListBox.ItemTemplate&gt; แล้วใส่แท็กสำหรับจัดวางข้อมูลไว้ในภายใน<br />ตัวอย่างเช่น เราจะแสดง Title ,NumDigg ไว้ใน TextBlock ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step77.png"><img style="cursor: pointer; width: 624px; height: 277px;" src="http://silverlight1blogpost.s3.amazonaws.com/step77.png" alt="" border="0" /></a><br />แล้วได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step78.png"><img style="cursor: pointer; width: 653px; height: 452px;" src="http://silverlight1blogpost.s3.amazonaws.com/step78.png" alt="" border="0" /></a><br /><br />เราลองมาทำในแบบที่ซับซ้อนขึ้นอีกนิดกัน ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step85.png"><img style="cursor: pointer; width: 723px; height: 451px;" src="http://silverlight1blogpost.s3.amazonaws.com/step85.png" alt="" border="0" /></a><br />และใน App.xaml ก็กำหนด Style ไว้ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step86.png"><img style="cursor: pointer; width: 528px; height: 618px;" src="http://silverlight1blogpost.s3.amazonaws.com/step86.png" alt="" border="0" /></a><br /><br />ได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step84.png"><img style="cursor: pointer; width: 637px; height: 402px;" src="http://silverlight1blogpost.s3.amazonaws.com/step84.png" alt="" border="0" /></a><br /><br />ตอนหน้า จะเกี่ยวกับแสดงข้อมูล แบบหนึ่งต่อหลาย (Master/Details) ครับ<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-6596566421717333810?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-15783068811824483252008-10-25T01:31:00.000-07:002008-10-25T02:04:32.742-07:00(แปลจาก blog ภาษาอังกฤษของ Scottgu <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-4-using-style-elements-to-better-encapsulate-look-and-feel.aspx">ที่นี่</a>)<br />หากต้องการตัวอย่าง SourceCode ฉบับเต็ม <a href="http://www.scottgu.com/blogposts/slbeta1apps/diggsample.zip">กดที่นี่</a><br /><br /><span style="font-weight: bold;">ใช้แท็ก Style เพื่อกำหนดหน้าตาการแสดงผล</span><br />WPF และ Silverlight มีกลไกที่เรียกว่า Style ที่เราสามารถใช้เพื่อเก็บลักษณะ (ค่า Property) ต่าง ๆ ไว้ในที่เดียว (resource) แล้วนำมาใช้ได้บ่อย ๆ เราอาจเก็บ Style ไว้ในไฟล์อื่นก็ได้ เพื่อที่จะเอามา ปั๊มค่า Property ใส่ Control หลาย ๆ อัน ให้มีหน้าตาเหมือนกัน เช่น กำหนดค่า Color,Font,Size,Margin ไว้ใน Style ชื่อหนึ่ง<br />แล้วเอา Style นี้ ไปใส่ในคอนโทรล หลาย ๆ อัน แล้วจะมี Color,Font,Size,Margin เดียวกันหมด<br /><br />ในตัวอย่างนี้ เราจะนำเอาค่า Style ไปเก็บไว้ในไฟล์ชื่อ App.xaml ซึ่งจะทำให้เราเอาไปใช้ได้ในทุก ๆ ที่ในโปรแกรม<br />จากเดิมที่กำหนดค่า Property ต่าง ๆ ไว้ในคอนโทรลนั้น<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step66.png"><img style="cursor: pointer; width: 637px; height: 68px;" src="http://silverlight1blogpost.s3.amazonaws.com/step66.png" alt="" border="0" /></a><br />ก็ให้เราดึงเอา Property ต่าง ๆ มาใส่ไว้ใน Style แทน ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step72.png"><img style="cursor: pointer; width: 696px; height: 347px;" src="http://silverlight1blogpost.s3.amazonaws.com/step72.png" alt="" border="0" /></a><br />โดยเราจะใส่ x:Key="ชื่อสไตล์"(ด้านบน) เพื่อเป็นตัวระบุ ที่จะนำไปใช้ในภายหลัง(ด้านล่าง) ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step71.png"><img style="cursor: pointer; width: 543px; height: 65px;" src="http://silverlight1blogpost.s3.amazonaws.com/step71.png" alt="" border="0" /></a><br />ในที่นี้ เราจะึดึงเอา Property ของคอนโทรลทุกอัน มาเก็บเป็นสไตล์ทั้งหมด<br />ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step70.png"><img style="cursor: pointer; width: 656px; height: 572px;" src="http://silverlight1blogpost.s3.amazonaws.com/step70.png" alt="" border="0" /></a><br />การนำ Property มาเก็บไว้ใน Style ทำให้โปรแกรมดูโล่งขึ้น โปรแกรมเมอร์ไม่ลายตา จะได้สนใจในสิ่งที่สำคัญมากขึ้น และสไตล์นั้น ยังเอาไปใช้ในที่อื่น ๆ ได้ด้วย<br /><br />ตอนต่อไป จะเกี่ยวข้องกับคอนโทรล ListBox และ Data Binding (การเชื่อมกับข้อมูล)<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-1578306881182448325?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-88510809651368294252008-10-23T23:40:00.000-07:002008-10-24T00:56:21.010-07:00(แปลจาก blog ภาษาอังกฤษของ Scottgu <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-3-using-networking-to-retrieve-data-and-populate-a-datagrid.aspx">ที่นี่</a>)<br />ต่อจากตอนที่แล้ว ตอนนี้ เราสร้าง Silverlight ที่นำข้อมูลจากเว็บ Digg มาแสดงผล<br /><br />Silverlight 2 มี API ภายในที่จะติดต่อกับ Network ได้หลายแบบ เช่น REST, SOAP/WS*, RSS, JSON ,XML HTTP service และ Socket API(System.Net.Socket ทำให้ติดต่อกับเน็ตที่ไม่ใช่ HTTP ได้ด้วย)<br /><span style="font-weight: bold;"><br />การติดต่อข้ามโดเมน(เว็บไซต์)</span><br />โดยปกติ Silverlight จะติดต่อได้กับเว็บไซต์ตัวเอง การติดต่อกับเว็บไซต์อื่นได้ก็ต่อเมื่อ เว็บไซต์อื่นนั้นได้มีไฟล์ XML Policy ที่ระบุอนุญาตให้ติดต่อด้วย(เป็นฟอร์แมตของ Silverlight เอง) และสามารถใช้ไฟล์ XML Policy ในฟอร์แมตของ Adobe Flash ได้ด้วย<br /><br />เว็บไซต์ Digg.com มี API ในแบบของ Http เจ๋ง ๆ ให้เราใช้พอสมควร และเว็บนี้ก็มีไฟล์ XML Policy สำหรับ Flash เราจึงสามารถติดต่อกับเว็บนี้ได้<br /><br /><span style="font-weight: bold;">การดึงเอาหัวข้อเนื้อหา จาก feed ของ เว็บ Digg.com </span><br />เราจะสร้างโปรแกรมที่ ให้ผู้ใช้พิมพ์คำคีย์เวิร์ดเพื่อหาข้อมูล (เช่น Programming) แล้วกดปุ่ม Search เพื่อไปดึงเอาหัวข้อข้อมูลมาแสดง<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step56.png"><img style="cursor: pointer; width: 661px; height: 315px;" src="http://silverlight1blogpost.s3.amazonaws.com/step56.png" alt="" border="0" /></a><br />โดยเราจะเรียกใช้ <a href="http://apidoc.digg.com/ListStories">Digg REST Feed API</a> โดยเราจะใส่คีย์เวิร์ด(คำที่จะหา)ลงใน URL (ตัวอย่างเช่น GET /stories/topic/programming) แล้วส่งไป โดยเราจะได้ XML คำตอนกลับมา<br />ตัวอย่างเช่น <a href="http://services.digg.com/stories/topic/programming?count=20&amp;appkey=http%3A%2F%2Fscottgu.com">http://services.digg.com/stories/topic/programming?count=20&amp;appkey=http%3A%2F%2Fscottgu.com</a><br /><br /><span style="font-weight: bold;">เรียกใช้ Digg API แบบ REST ด้วย คลาส System.Net.WebClient</span><br />ทันทีที่กดปุ่ม Search เราจะเข้า Event "Click" เพื่อไปเอาข้อความใน TextBox แล้วเข้าฟังก์ชันเรียกเน็ต Digg เพื่อดึงเอา XML มาแสดงผล และเนื่องจากการรอข้อมูลกลับมาจะใช้เวลานาน เราจึงใช้วิธีแบบไม่ต้องรอ(Asynchronous) โดยให้คลาส WebClient เรียก event ของเราตอนที่ได้ข้อมูลครบแล้ว ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step58.png"><img style="cursor: pointer; width: 667px; height: 308px;" src="http://silverlight1blogpost.s3.amazonaws.com/step58.png" alt="" border="0" /></a><br /><br />จะโค้ดด้านบน เราจะได้ XML ผลลัพท์อยู่ที่ตัวแปร result ของเมทอด DiggService_DownloadStoriesCommpleted<br /><br />เราจะเอาข้อมูลใน XML มาเก็บเป็นออปเจ็ก ๆ ในรูปแบบคลาส ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.scottgu.com/blogposts/diggsample/step1.png"><img style="cursor: pointer; width: 462px; height: 309px;" src="http://www.scottgu.com/blogposts/diggsample/step1.png" alt="" border="0" /></a><br /><br />โดยใช้ฟีเจอร์ LINQ to XML (Language Intregrate Query) เพื่อแปลงข้อมูลมาใส่ในคลาส DiggStory<br />ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.scottgu.com/blogposts/diggsample/step2.png"><img style="cursor: pointer; width: 669px; height: 569px;" src="http://www.scottgu.com/blogposts/diggsample/step2.png" alt="" border="0" /></a><br /><br /><span style="font-weight: bold;">เอาข้อมูลจากคลาส DiggStory มาแสดงใน DataGrid</span><br />เราจะใส่คอนโทรล DataGrid ในโปรแกรมของเรา โดยเพิ่ม reference แอสเซมบลี้ "Silverlight Data Controls" และเพิ่มแท็ก ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.scottgu.com/blogposts/diggsample/step5.png"><img style="cursor: pointer; width: 459px; height: 47px;" src="http://www.scottgu.com/blogposts/diggsample/step5.png" alt="" border="0" /></a><br />ฟีเจอร์ของ DataGrid อนุญาต ให้คุณระบุคอลัมภ์ , ชนิดตัวแปร และอื่น ๆ ได้โดยละเอียด<br />แต่ถ้าคุณต้องการความสะดวก คุณก็ระบุเพียง ItemSource = ข้อมูลที่ได้ ก็พอ แล้ว DataGrid จะกำหนดค่าต่าง ๆ โดยอัตโนมัติ<br />และถ้าคุณต้องการบอกว่า ไม่ให้เลือก select บรรทัดไว้ก่อนล่วงหน้า ก็ระบุ SelectedIndex = -1 ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.scottgu.com/blogposts/diggsample/step3.png"><img style="cursor: pointer; width: 678px; height: 480px;" src="http://www.scottgu.com/blogposts/diggsample/step3.png" alt="" border="0" /></a><br /><br />ตอนนี้เราก็ได้โปรแกรม silverlight เสร็จขึ้นมาอีกระดับหนึ่งแล้ว(หาข้อมูลได้ แสดงข้อมูลได้) ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.scottgu.com/blogposts/diggsample/step4.png"><img style="cursor: pointer; width: 662px; height: 359px;" src="http://www.scottgu.com/blogposts/diggsample/step4.png" alt="" border="0" /></a><br /><br />ตอนต่อไปจะเป็นอีก การกำหนด Style เพื่อให้หน้าตาสวยงามขึ้น<br /><br /><a href="http://www.scottgu.com/blogposts/slbeta1apps/diggsample.zip">กดปุ่มนี้ จะดาวโหลด source code โปรแกรมที่เสร็จแล้ว</a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-8851080965136829425?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-18752772121802628422008-10-18T02:03:00.000-07:002008-10-24T01:00:03.042-07:00(แปลจาก บล็อกภาษาอังกฤษของ Scottgu <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx">ที่นี่</a>)<br /><a href="http://www.scottgu.com/blogposts/slbeta1apps/diggsample.zip">กดปุ่มนี้จะดาวโหลด sourcecode โปรแกรมที่เสร็จแล้ว</a><br /><br />ต่อจากตอนที่แล้ว เราจะมาดูเรื่อง การจัดวางตำแหน่ง หรือ Layout กัน<br /><span style="font-weight: bold;">ทำความเข้าใจเรื่อง การจัดวาง Layout</span><br />Silverlight และ WPF ได้ให้ Control ที่จะช่วยโปรแกรมเมอร์จัดวางตำแหน่ง UI ได้อย่างสะดวก โดยจะมีทั้งแบบกำหนดตำแหน่งตายตัว และแบบที่ให้ Layout จัดการให้<br /><br />Layout ที่ใช้ใน Silverlight 2 ได้แก่<br /><ul><li>Canvas</li><li>StackPanel</li><li>Grid</li></ul><span style="font-weight: bold;">การจัดวางแบบ Canvas</span><br />เป็นการจัดวางที่ให้โปรแกรมเมอร์กำหนดตำแหน่งของ Control ที่จะวางบน Canvas ได้อย่างอิสระ โดยกำหนดพิกัด (ตามแนว x,y) ได้<br />โดยใช้แอตทริบิว Left แทนตำแหน่ง X และ แอตทริบิว Top แทนตำแหน่ง Y<br />ดังตัวอย่างที่จะใส่ปุ่ม Button 2 ปุ่ม ลงบน Canvas ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step33.png"><img style="cursor: pointer; width: 563px; height: 190px;" src="http://silverlight1blogpost.s3.amazonaws.com/step33.png" alt="" border="0" /></a><br />ซึ่งจะปรากฏผล ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step32.png"><img style="cursor: pointer; width: 338px; height: 421px;" src="http://silverlight1blogpost.s3.amazonaws.com/step32.png" alt="" border="0" /></a><br />Canvas จะมีประโยชน์ในกรณี ที่ Control จะไม่ขยับตำแหน่ง และขนาดไม่เปลี่ยน<br />แต่เมื่อตำแหน่งหรือขนาดของ Control เปลี่ยน จะทำให้โปรแกรมเมอร์ต้องมาเปลี่ยนพิกัด จัดใหม่ ให้ดูดี<br />ในกรณีนี้ ควรจะใช้ Layout แบบอื่น ๆ คือ StackPanel หรือ Grid<br /><br /><span style="font-weight: bold;">StackPanel</span><br />StackPanel เป็นการจัดวางที่จะวาง Control ที่อยู่ภายใน เรียงเป็นตามแนวเดียวกัน (ตามแนวนอน หรือตามแนวตั้ง) เช่น<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step37.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step37.png" alt="" border="0" /></a><br />จะได้ผลดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step36.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step36.png" alt="" border="0" /></a><br /><br />หากเราจะจัดวางเรียงไปตามแนวนอน ให้เราเพิ่มแอตทริบิว Orientation="Horizontal" ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step39.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step39.png" alt="" border="0" /></a><br /><br />ได้ผลดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step38.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step38.png" alt="" border="0" /></a><br /><br />การจัดวางแบบ Grid คือการจัดวางแบบตาราง<br />คือ การจัดวางที่ยืดหยุ่นที่สุด ทำให้วางในตำแหน่งช่องใดก็ได้ในตาราง และมีขนาดได้มากกว่าหนึ่งช่อง<br />ดังตัวอย่าง จะ สร้างตารางซึ่งมี 3 คอลัม<br />โดยเราจะประกาศ คอลัมภ์ ไว้ในแท็ก <columndefinition> 3 อันไว้ใน <grid.columndefinitions><br />และประกาศ คอลัมภ์ ไว้ในแท็ก <rowdefinition> 3 อันไว้ใน <grid.rowdefinitions><br /><br />หลังจากนั้น จะใส่ &lt;button&gt; ที่บอกตำแหน่งที่จะใส่ไว้ใน Grid ด้วยแอตทริบิว Grid.Column="x" Grid.Row="y" ดังนี้<br /></grid.rowdefinitions></rowdefinition></grid.columndefinitions></columndefinition><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step40.png"><img style="cursor: pointer; width: 500px; height: 327px;" src="http://silverlight1blogpost.s3.amazonaws.com/step40.png" alt="" border="0" /></a><br />จะได้ผลดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step41.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step41.png" alt="" border="0" /></a><br />นอกจากการระบุพิกัดแบบตายตัว เช่น Height=60 แล้ว<br />RowDefinition และ ColumnDefinition ยังมีโหมด AutoSize (ปรับขนาดอัตโนมัติ)<br />เช่น Height="Auto" จะทำให้ความสูงของ Row นั้น ปรับตามขนาดของ Control ที่อยู่ข้างใน<br />ซึ่งมีประโยชน์มาก<br /><br />นอกจากนั้น ขนาดยังกำหนดให้เป็นสัดส่วนต่อกันได้ด้วย เช่น<br />&lt;RowDefinition Height="1*"&gt;<br />&lt;RowDefinition Height="2*"&gt;<br /><br />แถวที่สอง จะมีความหนากว่า แถวแรก สองเท่า<br /><br />ตัวอย่างการจัดหน้าจอ แบบ Digg(เว็บไซต์ยอดนิยมแห่งหนึ่ง)<br />เราจะสร้างหน้าจอ ให้เหมือนแบบนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/app1.png"><img style="cursor: pointer; width: 533px; height: 431px;" src="http://silverlight1blogpost.s3.amazonaws.com/app1.png" alt="" border="0" /></a><br /><br />โดยเราจะสร้างให้มี Grid 2 แถว ก่อน แถวแรกสูง 40 pixel(จุดสี) แล้วแถวที่สองให้กินที่ที่เหลือทั้งหมด (Height="*")<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step45.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step45.png" alt="" border="0" /></a><br />โดยเพิ่มแอททริบิว ShowGridLines="True" เพื่อให้เห็นเส้นประ บอกตำแหน่ง<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step44.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step44.png" alt="" border="0" /></a><br />แล้วเราก็จะใส่ Grid ลงไปในช่องแถวแรกของ Grid นอก โดยแบ่งเป็น 3 คอลัม ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step47.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step47.png" alt="" border="0" /></a><br />ทำให้เราเห็นการแบ่ง แถวแรกออก ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step46.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step46.png" alt="" border="0" /></a><br />โดยช่องแรก เราจะใส่คอนโทรล &lt;Border&gt; โดยหัวมุมให้ตัดมน รัศมี 10<br />แล้วใส่ข้อความ &lt;TextBlock&gt; ไว้ข้างในอีกที<br />ช่องถัดมาใส่ &lt;WatermarkedTextBox&gt;<br />ช่องถัดมาใส่ปุ่ม &lt;Button&gt;<br /><br />แล้วในแถวถัดมา ใส่ &lt;TextBlock&gt; ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step49.png"><img style="cursor: pointer; width: 504px; height: 415px;" src="http://silverlight1blogpost.s3.amazonaws.com/step49.png" alt="" border="0" /></a><br />ได้ผลดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step50.png"><img style="cursor: pointer; width: 468px; height: 238px;" src="http://silverlight1blogpost.s3.amazonaws.com/step50.png" alt="" border="0" /></a><br /><br />ตอนนี้เรายังจำกัดความกว้างสูงของ หน้า Silverlight ไว้ที่ 600 x 300 อยู่<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step51.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step51.png" alt="" border="0" /></a><br />ทำให้ ถ้าเราถึงหน้าเว็บเพจออกกว้างก็จะเห็น silverligth ไม่เต็มจอ<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step52.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step52.png" alt="" border="0" /></a><br />ให้เราเอาบรรทัด Width="600" Height="300" ออก<br />ก็จะให้โปรแกรมที่เต็มหน้าจอบราวเซอร์<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step54.png"><img style="cursor: pointer; width: 536px; height: 268px;" src="http://silverlight1blogpost.s3.amazonaws.com/step54.png" alt="" border="0" /></a><br /><br />โปรดติดตามตอนต่อไป<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-1875277212180262842?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-54374679497162098562008-10-16T23:17:00.000-07:002008-10-26T23:55:01.215-07:00ขอออกตัวไว้ก่อนนะครับ ว่าบล็อกตอนนี้เป็นตอนที่แปลมาจากบล็อก 8 ตอน ของ Scottcu ซึ่งเป็นภาษาอังกฤษ <a href="http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-1-creating-quot-hello-world-quot-with-silverlight-2-and-vs-2008.aspx">ที่นี่</a> เพื่อให้อ่านง่ายจึงแปลเป็นภาษาไทยครับ<br /><br />1. เปิด VisualStudio 2008 หรือ Visual Web Developer 2008 แล้วเลือกเมนู File -> New Project<br />2. แล้วเลือก Silverlight Application<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step3.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step3.png" alt="" border="0" /></a><br />3. เราตั้งชื่อโปรเจ็กว่า DiggSample เมื่อเรากด OK แล้ว โปรแกรมจะขึ้นไดอะลอกถามว่า ต้องการสร้างเพียงโปรเจ็ก Silverlight เพียว ๆ หรือ ต้องการให้ผนวกโปรเจ็กนี้เข้าไปในเว็บ ASP.NET ด้วยเลย<br />สำหรับตัวอย่างนี้เราจะเลือกผนวกเข้าใน ASP.NET และตั้งชื่อว่า DiggSample_WebServer เมื่อเราคลิก OK โปรแกรมก็จะสร้าง โซลูชั่น ซึ่งจะมีทั้งไฟล์ในฝั่ง Client และในฝั่ง Server ให้พร้อมกันในทีเดียว<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step5.png"><img style="cursor: pointer; width: 200px;" src="http://silverlight1blogpost.s3.amazonaws.com/step5.png" alt="" border="0" /></a><br />เมื่อเรากด "Build" แล้ว VisualStudio จะคอมไพล์โปรแกรมของเรา และนำไปใส่ไว้ใน โปรเจ็กเว็บเซิร์ฟเวอร์ของเราโดยอัตโนมัติ โดยจะสร้างหน้า ASP และหน้า Html ให้โดยอัตโนมัติ<br />(โปรแกรม Silverlight รันได้กับเว็บเซิร์ฟเวอร์ทุกชนิด แม้แต่บน Apache<br />และหน้า Html ที่เราจะใส่ Silverlight เข้าไป ก็เขียนได้จากภาษาใดก็ได้ เช่น PHP,Java ,Python,Ruby)<br /><br /><span style="font-weight: bold;">มีไฟล์อะไรบ้างใน Silverlight</span><br />เมื่อเราสร้างโปรเจ็กเสร็จใหม่ เราจะได้ไฟล์ Page.xaml และ App.xaml และไฟล์ภาษา (C# หรือ VB ที่่เราได้เลือกไว้) เป็นไฟล์ที่เรียกว่า Code Behide Class file ซึ่งจะคู่กันกับไฟล์ .xaml เช่น (cs คือ C Sharp)<br /><div style="text-align: center;">Page.xaml คู่กับไฟล์ Page.xaml.cs<br />App.xaml คู่กับไฟล์ App.xaml.cs<br /><div style="text-align: left;">ไฟล์ XAML คือ ไฟล์ XML ชนิดใหม่ เอาไว้สำหรับเขียนกำหนด หน้าตา ของโปรแกรม สำหรับ silverlight หรือ WPF<br /><br /><span style="font-weight: bold;">App.xaml</span> ใช้เขียนเพื่อเก็บ resource ที่จะใช้ร่วมกันทั้งโปรแกรม เช่น Brush(แปรงสี) หรือ Style<br /><span style="font-weight: bold;">App.xaml.cs</span> ใช้เขียน เพื่อทำงานตอนที่เกิด Event (เหตุการณ์) ต่าง ๆ ที่เกี่ยวกับโปรแกรม เช่น Application_Startup , Application_Exit ,Application_UnhandledException<br /><span style="font-weight: bold;">Page.xaml</span> ใช้เขียนกำหนดหน้าตา UI ของโปรแกรม โดยเราจะเขียนว่ามี UI Control ใดบ้างที่อยู่บนหน้าโปรแกรม และเชื่อมไปยัง <span style="font-weight: bold;">Page.xmal.cs</span> เมื่อเกิด event บน UI เหล่านั้น<br /><br />ตั้งแต่ตอนแรกที่คอมไพล์โปรเจ็กเสร็จ VS จะคอมไพล์หน้า Page.xmal ออกมาเป็นคลาส .NET ครึ่งหนึ่ง และคอมไพล์ Page.xmal.cs อีกครึ่งหนึ่ง แล้วนำมารวมเป็นคลาสเดียวกัน<br />เช่นเดียวกัน คอมไพล์และรวมไฟล์ App.xaml และ App.xmal.cs รวมเป็นอีกหนึ่งคลาส<br />รวมได้ 2 คลาส แล้วเอามาแพ็กรวมกัน เป็นไฟล์ DiggSample.xap บนฮาร์ดดิสก์<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step7.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step7.png" alt="" border="0" /></a><br /><br /></div></div> ไฟล์ .xap (อ่านว่า แซ๊บ) ได้ย่อขนาดมาแล้ว ด้วยวิธี Zip ดังนั้นจึงได้ขนาดที่เล็ก<br />การนำโปรแกรมที่ได้ไปรันบนเว็บ ก็คือ ปะแท็ก &lt;object&gt; บนหน้าไฟล์ Html (ไม่ต้องใช้ JavaScript) แล้วชี้ไปที่ไฟล์ .xap ง่าย ๆ แค่นั้น<br />โปรแกรมที่เราเขียนขึ้นจะรันได้ ทั้งบน IE(Internet Explorer),FireFox ,Safari,etc)<br />และบน Windows, Mac, Linux<br /><br /><span style="font-weight: bold;">มาใส่ Control และทำ Event กัน</span><br />ให้เปิดไฟล์ Page.xaml ขึ้นมา เราจะเพิ่มปุ่ม โดยใส่แท็ก &lt;Button&gt; เข้าไประหว่างบรรทัด &lt;Grid&gt; และ &lt;/Grid&gt; ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step8.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step8.png" alt="" border="0" /></a><br />พอเราเริ่มเขียน &lt;B แล้ว Intellisense จะขึ้นมาทันที<br />ให้เลือก Button แล้วกดเว้นวรรค<br />เราจะกำหนดชื่อให้ปุ่มนี้ด้วยแอททริบิว x:Name="MyButton"<br />กำหนดข้อความบนปุ่ม ด้วย Content="Push Me!"<br />ความกว้าง 100 สูง 50 ด้วย Width="100" Height="50"<br />แล้วปิดด้วย /&gt; ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step9.png"><img style="cursor: pointer; width: 487px; height: 169px;" src="http://silverlight1blogpost.s3.amazonaws.com/step9.png" alt="" border="0" /></a><br /><br />เมื่อเราคอมไพล์และสั่ง Run แล้วจะปรากฏหน้าตา ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step10.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step10.png" alt="" border="0" /></a><br /><br />เราจะใส่ event ชื่อว่า "Click"ให้กับปุ่มนี้ ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step12.png"><img style="cursor: pointer; width: 619px; height: 66px;" src="http://silverlight1blogpost.s3.amazonaws.com/step12.png" alt="" border="0" /></a><br /><br />เมื่อ VS ขึ้น ช่อง new event handler แล้ว ให้กดปุ่ม Enter<br />จะปรากฏ method ชื่อดีฟอลท์ว่า MyButton_Click ขึ้นที่ไฟล์ Page.xaml.cs<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step13.png"><img style="cursor: pointer; width: 502px; height: 30px;" src="http://silverlight1blogpost.s3.amazonaws.com/step13.png" alt="" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step15.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step15.png" alt="" border="0" /></a><br />ให้เราเขียนคำสั่งใน Method นั้นว่า MyButton.Content = "Pushed!"<br />(เปลี่ยนข้อความบนปุ่มให้เป็น Pushed!)<br />หลังจากที่คอมไพล์ใหม่แล้วรัน จะปรากฏหน้าเดิม<br />แต่เมื่อเรากดปุ่ม ข้อความบนปุ่มจะเปลี่ยนเป็น "Pushed!"<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://silverlight1blogpost.s3.amazonaws.com/step16.png"><img style="cursor: pointer; width: 400px;" src="http://silverlight1blogpost.s3.amazonaws.com/step16.png" alt="" border="0" /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-5437467949716209856?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-68256701932333026272008-10-16T03:42:00.000-07:002008-10-16T03:55:27.069-07:00Silverlight 2 ตัวเต็ม ต่างจากตัวก่อนที่เป็นตัวสำหรับโปรแกรมเมอร์ ท่านที่เขียนโปรแกรมด้วยตัวใหม่นี้ จะรันได้บนเครื่อง User ได้จริง ๆ<br /> การติดตั้งเริ่มจาก<br /><ol><li> ให้ Uninstall Silverlight ตัวเก่าที่มีทั้งหมดออกก่อน</li><li>ติดตั้ง Visual Studio 2008 SP1 หรือ<a href="http://www.microsoft.com/express/vwd/"> Visual Web Developer Express SP1</a><br /></li><li>ติดตั้ง <a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&amp;displaylang=en">Silverlight Tools for Visual Studio 2008 SP1</a></li><li>ติดตั้ง <a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&amp;displaylang=en">Microsoft Expression Blend 2 Service Pack 1</a></li><li>ติดตั้ง <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&amp;displaylang=en">DeepZoom Composer</a></li></ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-6825670193233302627?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-27799549006582010472008-10-01T06:25:00.000-07:002008-10-01T07:33:41.536-07:00WPF มีการจัดวาง Layout อยู่ 5 ชนิด คือ<br /><ol><li>Grid คือ การจัดวางแบบตาราง (เหมือน OX หรือ Excel)<br /></li><li>StackPanel คือ การจัดวางเรียงเป็นแนวเดียวกัน (เหมือนอาเรย์)<br /></li><li>WrapPanel คือ การจัดวางเรียงเป็นแนวเดียวกัน เช่นเดียวกับ StackPanel แต่ต่างตรงที่ หาก Object ที่เราวาง ได้เลยระยะความกว้างของ WrapPanel ไป มันจะเหมือนขึ้นบรรทัดใหม่ เป็นอีกแถว</li><li>DockPanel คืือ การจัดวางที่(เหมือนกับ toolbar) (เลือกแปะ Object บน DockPanel ได้ 4 ด้าน คือ บน ล่าง ซ้าย ขวา</li><li>Canvas อันนี้เราจะวาง Object บน Canvas ได้อย่างอิสระ (ไม่ต้องเรียง ไม่ต้องติดขอบ) โดยกำหนด X Y ได้อย่างเสรี<br /></li></ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-2779954900658201047?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-12543428910830322872008-09-29T05:53:00.000-07:002008-09-29T06:24:03.179-07:00จากตอนที่แล้วเราได้สร้าง TextBlock ง่าย ๆ ขึ้นมา โดยที่ข้อความ จะอยู่ใน Text="Hello"<br />หากต้องการใส่ข้อความที่ยาว ๆ ให้ใส่ไว้ภายในบล็อก ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SODWhDxjyvI/AAAAAAAAAF0/1NIQnZa6ibQ/s1600-h/d_4_txt1.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SODWhDxjyvI/AAAAAAAAAF0/1NIQnZa6ibQ/s400/d_4_txt1.JPG" alt="" id="BLOGGER_PHOTO_ID_5251433028951198450" border="0" /></a><br /><br />ถ้าเราต้องการให้คำว่า This is a good day. เป็นตัวหนา ให้ใส่แท็ก<bold></bold> &lt;Bold&gt; ครอบ<br />และถ้าเราต้องการให้คำว่า How are you? เป็นตัวเอียง ให้ใส่แท็ก &lt;Italic&gt;<italic></italic> ครอบ<br />และถ้าเราต้องการให้คำว่า Happy new year. ถูกขีดเส้นใต้ ให้ใส่แท็ก &lt;Underline&gt;<underline></underline> ครอบ<br />ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SODVhAFvMdI/AAAAAAAAAFk/x9Pf5EOKyvM/s1600-h/d_4_txt2.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SODVhAFvMdI/AAAAAAAAAFk/x9Pf5EOKyvM/s400/d_4_txt2.JPG" alt="" id="BLOGGER_PHOTO_ID_5251431928450462162" border="0" /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-1254342891083032287?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-41059072593496971592008-09-24T05:40:00.000-07:002008-09-24T09:30:03.105-07:00ใน <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNo3UJaPnxI/AAAAAAAAAEs/TcAnOWkHuy0/s1600-h/d_3_txbk_1.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 167px; height: 151px;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNo3UJaPnxI/AAAAAAAAAEs/TcAnOWkHuy0/s400/d_3_txbk_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5249569134916640530" border="0" /></a>WPF มี Control ที่เกี่ยวกับข้อความอยู่หลายตัว แต่ในตอนนี้จะพูดถึงตัวที่ basic ที่สุด คือ TextBlock<br />เมื่ออยู่ใน Blend ให้กดปุ่ม toolbar ด้ายซ้าย ตรงที่เป็นสี่เหลี่ยมแล้วมีตัว T อยู่ข้างใน ค้างไว้ แล้วเครื่องมือที่ซ่อนอยู่ ก็จะเด้งออกมา<br />ให้เลือก TextBlock<br /><br />ให้คลิกลาก บนจอ ArtBoard<br /><br />แล้วจะเห็นดังนี้<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNo4tS5KRnI/AAAAAAAAAE8/B_XtcDK7MXM/s1600-h/d_3_txbk_2.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNo4tS5KRnI/AAAAAAAAAE8/B_XtcDK7MXM/s200/d_3_txbk_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5249570666470590066" border="0" /></a><br />ให้พิมพ์ข้อความเช่น Hello ข้อความนั้นก็จะแสดง<br />อยู่ในกรอบของ TextBlock<br /><br /><br /><br /><br /><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNo53p0cw6I/AAAAAAAAAFE/5neQqI4rBYg/s1600-h/d_3_txbk_3.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNo53p0cw6I/AAAAAAAAAFE/5neQqI4rBYg/s200/d_3_txbk_3.JPG" alt="" id="BLOGGER_PHOTO_ID_5249571943935165346" border="0" /></a>ในมุมของ XAML จะเห็นดังนี้<br />Text="Hello" ข้อความที่แสดงคือ Hello<br />HorizontalAlignment="Left" คือ จัดข้อความชิดซ้าย<br />TextWrapping="Wrap" คือ หากข้อความยาวเกินไป จะตัดคำ ขึ้นบรรทัดใหม่<br /><br />ให้ลองเพิ่ม attribute ดังนี้<br /> Background="Yellow" พื้นหลัง สีเหลือง<br /> Foreground="Brown" ตัวหนังสือ สีน้ำตาล<br /> FontFamily="Tahoma" ฟอนต์ ชือ Tahoma<br /> FontSize="26" ขนาดอักษร=26<br />ซึ่งจะสัมพันธ์กับใน Blend (วงกลมสีแดง)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNpAwGVML2I/AAAAAAAAAFU/Ha3gZGtYLjk/s1600-h/d_3_txbk_4.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNpAwGVML2I/AAAAAAAAAFU/Ha3gZGtYLjk/s400/d_3_txbk_4.JPG" alt="" id="BLOGGER_PHOTO_ID_5249579510731124578" border="0" /></a><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNo4adrNpEI/AAAAAAAAAE0/-SC5Rf1Edc4/s1600-h/d_3_txbk_2.JPG"><br /></a><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-4105907259349697159?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-75042330686657315682008-09-22T20:35:00.000-07:002008-09-24T05:40:14.416-07:00จากตอนที่แล้ว ที่เราได้ระบายสีวงกลม<br />เราสามารถกำหนดทิศทางของการเกลี่ยสี ได้โดยใช้ Toolbox ด้านข้างซ้าย ชื่อว่า Brush Transform<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNhlibtVHUI/AAAAAAAAAEM/dOOwxsRO20M/s1600-h/3_linear_grad_1.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNhlibtVHUI/AAAAAAAAAEM/dOOwxsRO20M/s320/3_linear_grad_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5249057007928155458" border="0" /></a>โดยไปคลิกลากบนรูปวงกลม<br /><br /><br /><br /><br /><br />จะเห็นภาพ ดังนี้<br /><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNhmjHcEqQI/AAAAAAAAAEU/lsOcFKabwlg/s1600-h/d_3_LineGrad_2.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNhmjHcEqQI/AAAAAAAAAEU/lsOcFKabwlg/s320/d_3_LineGrad_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5249058119178561794" border="0" /></a><br />โดยจะมีลูกศรเกิดขึ้น บอกทิศทางสี<br />ท้ายลูกศร คือ สีเริ่มต้น<br />หัวลูกศร คือ สีสิ้นสุด<br /><br />ถ้าเราคลิกลากที่ หัวหรือท้ายลูกศร จะเปลี่ยนทิศทางลูกศร<br />ลองย้ายเล่น เพื่อดูผลของมัน<br /><br />นอกจากนั้น เราสามารถกำหนดจุดสี(GradientStop) ได้มากกว่า 2 จุด<br />เช่น ถ้าเราจะเปลี่ยนสี จาก แดง-&gt;น้ำเงิน-&gt;เหลือง ให้เราเพิ่มจุดสี ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNho6MBUpzI/AAAAAAAAAEc/COwYanWFqSs/s1600-h/d_3_LineGrad_3.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNho6MBUpzI/AAAAAAAAAEc/COwYanWFqSs/s400/d_3_LineGrad_3.JPG" alt="" id="BLOGGER_PHOTO_ID_5249060714568787762" border="0" /></a>โดยกดที่จุดซ้าย (วงกลมแดง)<br />แล้วเลือกสีแดง<br /><br />กดตรงกลาง(วงกลมแดง)<br />แล้วเลือกสีน้ำเงิน<br /><br />กดที่จุดขวา (วงกลมแดง)<br />แล้วเลือกสีเหลือง<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-7504233068665731568?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-86331613921857638982008-09-22T02:07:00.000-07:002008-09-22T21:02:37.119-07:00<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdhTSWlh1I/AAAAAAAAAC8/TnPw6gnwQyw/s1600-h/d_2_ell_1.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdhTSWlh1I/AAAAAAAAAC8/TnPw6gnwQyw/s320/d_2_ell_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5248770874695583570" border="0" /></a><br />พักเรื่องสีไว้ก่อน ตอนนี้เรามาดูเรื่องวงกลม กันบ้าง<br />ลองเปิด Blend ขึ้นมา<br />แล้วคลิกค้างที่ ToolBar ตรงรูปสี่เหลื่ยมซักพัก<br />จะเห็น เครื่องมือ วงกลมที่ซ่อนอยู่ เด้งออกมา<br /><br />ให้เอาไปคลิกลาก บน artboard จะเห็นเป็นรูปวงรีขึ้นมา<br />หากต้องการให้เป็นรูปวงกลมเด๊ะ ๆ ให้กดปุ่ม shift ค้างไว้ขณะลาก<br /><br /><br /><br /><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdinicMuPI/AAAAAAAAADE/hiORAw9z0sM/s1600-h/d_2_ell_2.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdinicMuPI/AAAAAAAAADE/hiORAw9z0sM/s400/d_2_ell_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5248772322123102450" border="0" /></a><br /><br />จะได้รูปและ xaml ดังนี้<br />สังเกตุว่าจะคล้ายกับรูปสี่เหลี่ยมเลย ต่างกันตรงที่ใช้ tag ว่า Ellipse<br />ทีนี้เรามาดูเรื่องสีให้ละเอียดกันอีกนิด<br />ช่อง Fill="Red" Stroke="Blue" เราสามารถเขียนอีกแบบได้ ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNdlYc1iGRI/AAAAAAAAADM/Br5fnBEEDuo/s1600-h/d_2_ell_3.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNdlYc1iGRI/AAAAAAAAADM/Br5fnBEEDuo/s400/d_2_ell_3.JPG" alt="" id="BLOGGER_PHOTO_ID_5248775361455593746" border="0" /></a><br /><br />คือ การใส่ Brush(แปรงสี) ชนิด SolidColorBrush สีทึบ ที่เป็นสีแดง เข้าไปใน Fill<br />และ ใส่ Brush(แปรงสี) ชนิด SolidColorBrush สีทึบ ที่เป็นสีน้ำเงิน เข้าไปใน Stroke นั่นเอง<br /><br />Brush(แปรงสี) มีหลายชนิด ดังนี้<br /><ol><li>SolidColorBrush แปรงสีทึบ(สีเดียว)</li><li>LinearGradientBrush แปรงสี ที่ไล่เฉดสี เป็นทางตรง (ตอนนี้ เราจะมาดูชนิดนี้กัน)</li><li>RadialGradientBrush แปรงสี ที่ไล่เฉดสี ไปตามรัศมี (จะกล่าวถึงอีกทีในภายหลัง)</li><li>ImageBrush แปรง ที่ใช้ภาพ(Image) ปะเอาแทน (จะกล่าวถึงอีกทีในภายหลัง)</li><li>DrawingBrush แปรง ที่ใช้รูปร่างที่ได้จากการวาดด้วย Wpf มาวาดลงบนแปรง (จะกล่าวถึงอีกทีในภายหลัง)</li><li>VisualBrush แปรง (คล้ายกับ DrawingBrush) ที่ใช้ภาพที่ปรากฏของรูปร่างที่ได้จากการวาดด้วย Wpf (จะกล่าวถึงอีกทีในภายหลัง)</li></ol>ลอง LinearGradiantBrush กัน<br />คลิกที่รูปวงกลมที่ได้สร้างขึ้น ใน Blend<br />แล้วไปดู Property ด้านข้างขวา<br />ดูคลิกที่ Brush เสร็จแล้ว ดูคลิกที่ Fill แล้วคลิกที่รูปสี่เหลี่ยมที่มีการไล่เฉด (ตรงวงกลมสีแดงกลางภาพ)<br />เป็นการเลือกว่าเราจะเอาแบบ ไล่เฉด<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNdqQjXZaII/AAAAAAAAADc/OhGDS9XywEs/s1600-h/d_2_linear_grad_1.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNdqQjXZaII/AAAAAAAAADc/OhGDS9XywEs/s400/d_2_linear_grad_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5248780723327428738" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdthjyInHI/AAAAAAAAADk/D9iAeb6HBJ4/s1600-h/d_2_linear_grad_2.JPG"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNdthjyInHI/AAAAAAAAADk/D9iAeb6HBJ4/s400/d_2_linear_grad_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5248784314032233586" border="0" /></a><br /><br />แล้วเลือกด้านล่างซ้ายสุด (ตรงจุด C ที่เป็นสี่เหลี่ยม = linear,วงกลม = Radial)<br />เสร็จแล้วจะปรากฏแถบไล่เฉดสี (จากภาพ ตรงที่วงกลมสีแดง วงไว้ที่ซ้ายสุด --- ขวาสุด)<br />ตอนนี้เป็นการไล่เฉดสีดำไปเป็นสีขาว<br />ถ้าต้องการเปลี่ยนเป็นไล่เฉด จาก สี เหลือง ไปเป็น น้ำเงิน<br />ให้คลิกที่ รูปบ้าน(ที่วงกลมสีแดงไว้)ทางซ้าย แล้วค่อยเลือกสี เหลือง ในช่องสีรุ้ง(วงกลมแดง B)<br />แล้วคลิกระดับสี (วงกลมแดง A)<br />แล้ว คลิกที่ รูปบ้าน(ที่วงกลมสีแดงไว้)ทางขวา แล้วค่อยเลือกสี น้ำเงิน ในช่องสีรุ้ง(B) แล้วคลิกระดับสี(A)<br />จะได้ผลดังภาพด้านขวานี้<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-8633161392185763898?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-79821625154880587772008-09-19T04:12:00.000-07:002008-09-21T20:30:14.549-07:00มาดูรายละเอียดเพิ่มขึ้นกันดีกว่า<br />&lt;Rectangle Margin="160,28,0,0"<br /> Width="100" Height="50" /&gt;<br /><br />attribute ชื่อ Margin คือ ระยะห่างระหว่าง สี่เหลี่ยมกับขอบของหน้าต่าง เท่ากับว่า<br />สี่เหลี่ยมนี้ห่างจากขอบซ้าย 160 ห่างจากขอบบน 28<br />ห่างจากขอบล่าง 0 ห่างจากขอบขวา 0<br />สังเกตุว่า Width กับ Height อยู่คนละบรรทัดกับ Margin<br />เพราะว่า XML ไม่ถือเรื่องการขึ้นบรรทัดใหม่ (ถือว่าเป็นบรรทัดเดียวกัน)<br />แต่จะให้ความสำคัญกับเรื่องวงเล็บ &lt; &gt; มากกว่า<br /><br />attribute สามารถดึงออกมาใส่ภายใน Tag ได้ โดย xaml ด้านบน แปลงเป็นแบบด้านล่างได้ ดังนี้<br />&lt;Rectangle Margin="160,28,0,0" &gt;<br /> &lt;Rectangle.Width&gt;<br /> 100<br /> &lt;/Rectangle.Width&gt;<br /><br /> &lt;Rectangle.Height&gt;<br /> 50<br /> &lt;/Rectangle.Height&gt;<br />&lt;/Rectangle&gt;<br /><br />เรามาลองเติมสีให้กับสี่เหลี่ยม เช่่น เราจะให้สี่เหลี่ยมมีสีเหลือง และมีขอบสีน้ำเงิน ได้ดังนี้<br />&lt;Rectangle Width="100" Height="50"<br /> Fill="Yellow" Stroke="Blue" /&gt;<br /><br />เมื่อท่านเห็น xaml ด้านบน ก็คงทราบทันทีว่า<br /> attribute ที่ชื่อว่า Fill ใช้สำหรับระบุสี(หรือแปรง)ของสี่เหลี่ยม<br /> attribute ที่ชื่อว่า Stroke ใช้สำหรับระบุสี ของขอบนั่นเอง<br />บางท่านอาจจะสงสัยว่าเรามีสีอะไรบ้างให้เลือก<br /> ตอบว่า หากเราเข้าโปรเจ็กโดย VisualStudio แล้ว<br /> เมื่อเราพิมพ์ Fill= เสร็จ VisualStudio จะแสดงรายชื่อสีให้เลือกทันที ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNPj1sfGxcI/AAAAAAAAACI/LwkifHluU1M/s1600-h/d_1_rect_5.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNPj1sfGxcI/AAAAAAAAACI/LwkifHluU1M/s320/d_1_rect_5.JPG" alt="" id="BLOGGER_PHOTO_ID_5247788502430959042" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNcQCx0j9pI/AAAAAAAAACQ/Te0gaIpH0hU/s1600-h/d_1_rect_color1.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNcQCx0j9pI/AAAAAAAAACQ/Te0gaIpH0hU/s320/d_1_rect_color1.JPG" alt="" id="BLOGGER_PHOTO_ID_5248681530643183250" border="0" /></a><br />นอกจากการใส่ชื่อสี โดยตรงแล้ว(เช่น "Blue") เรายังใส่ค่ารหัสสีได้ด้วย<br />(ความเข้มใส,ความเข้มสีแดง,ความเข้มสีเขียว,ความเข้มสีน้ำเงิน) คือ ARGB<br />เช่นหากเราต้องการสีแดงเข้ม เราจะเขียนว่า #ffff0000<br />ff ตัวแรกเป็นเลขฐาน 16 มีค่าเท่ากับ 255 แปรว่า เข้มเต็มที่ (ไม่ใส)<br />ff ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 255 แปรว่า สีแดงเต็ม<br />00 ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 0 แปรว่า ไม่มีสีเขียวผสม<br />00 ตัวที่สองเป็นเลขฐาน 16 มีค่าเท่ากับ 0 แปรว่า ไม่มีสีน้ำเงินผสม<br /><br />สมมติว่า ถ้าเราต้องการสีเหลือง เราก็ใช้ สีแดงเต็ม กับ สีเขียวเต็ม รวมกัน เป็น#ffffff00 เป็นต้น<br />แต่ไม่ต้องตกใจไปครับ เพราะ Blend มีเครื่องมือเลือกสีที่เข้าใจง่ายมากครับ ดังนี้<br />เมื่อคลิกที่สี่เหลี่ยมแล้ว ให้ไปดูที่หน้าต่างข้างขวา คลิกแท็บ Property<br />แล้วเลือกเฉดสี (ที่แถบสีรุ้ง) แล้วเลือกความเข้มสี (จากจอด้านซ้าย)<br />เมื่อเลือกแล้วจะเห็นเป็นรหัสด้านล่าง เช่น #ffffff00<br />หากต้องการให้สี่เหลี่ยมของเราใส มองเห็นทะลุไปถึงพื้นหลัง ก็ให้กำหนดค่า A ให้น้อยกว่า 100% แต่ถ้ากำหนดเป็น 0% เราก็จะไม่เห็นสี่เหลี่ยมไปเลย<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-7982162515488058777?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-43757184934791468742008-09-17T23:52:00.000-07:002008-09-22T21:05:15.887-07:00เริ่มต้น เรามาเปิดโปรเจ็กที่เราทำทิ้งไว้เมื่อคราวที่แล้ว ด้วย Blend<br />แล้วกดที่ Toolbar รูปสี่เหลี่ยม<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNH8ouUnpgI/AAAAAAAAABY/yxcy7MWe0U4/s1600-h/d_1_recttool.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNH8ouUnpgI/AAAAAAAAABY/yxcy7MWe0U4/s320/d_1_recttool.JPG" alt="" id="BLOGGER_PHOTO_ID_5247252817422820866" border="0" /></a><br />นี่คือ เครื่องมือสร้างสี่เหลี่ยม<br />เมื่อกดแล้ว ให้ไปกดบน ArtBoard แล้วลากรูปสี่เหลี่ยมแล้วปล่อย<br />เราก็จะได้รูปสี่เหลี่ยมง่าย ๆ ดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNH-DdL7tVI/AAAAAAAAABg/_62yefGzEnc/s1600-h/d_1_rect_1.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNH-DdL7tVI/AAAAAAAAABg/_62yefGzEnc/s320/d_1_rect_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5247254376191079762" border="0" /></a><br /><br />ลองดูรูปสี่เหลี่ยมด้านบน จะมีรูป สี่เหลี่ยมเล็ก ๆ อยู่ที่ขอบและมุมทั้ง 4 ด้าน เรียกว่า Handle เมื่อเอาเมาส์วางบน handle จะเห็นลูกศร<br />เมื่อให้เมาส์กดลากที่ handle จะเป็นการขยายหรือย่อรูปสี่เหลี่ยม ตามใจต้องการ<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNH_v7KvFKI/AAAAAAAAABo/cXZowkOwm-4/s1600-h/d_1_rect_2.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNH_v7KvFKI/AAAAAAAAABo/cXZowkOwm-4/s320/d_1_rect_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5247256239664993442" border="0" /></a><br />แต่ถ้าเขยิบเมาส์ออกมานิดนึง ไอคอนลูกศรจะเปลี่ยนไป ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNIBUVJi6aI/AAAAAAAAABw/IZ9RGNH40UM/s1600-h/d_1_rect_3.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNIBUVJi6aI/AAAAAAAAABw/IZ9RGNH40UM/s320/d_1_rect_3.JPG" alt="" id="BLOGGER_PHOTO_ID_5247257964626241954" border="0" /></a><br />หากกดที่ลูกศรโค้งแล้วเลื่อนเมาส์ จะเป็นการหมุนรูปสี่เหลี่ยม โดยมีจุดวงกลมตรงกลางเป็นจุดศูนย์กลาง เราสามารถกดที่จุดวงกลม แล้วเปลี่ยนจุดหมุนได้<br />หากกดที่เครื่องหมาย < / > แล้ว จะเป็นดึงรูปสี่เหลี่ยม ให้เฉ เป็นรูปสี่เหลี่ยมขนมเปียกปูน<br /><br />ตรงหัวมุมด้านซ้ายบน ท่านจะเห็นเส้นประแล้วมีวงกลมที่ปลาย 2 เส้น 0-----<br />เมื่อท่านกดแล้วลากตรงวงกลมนั้น จะเป็นการ ทำเกลามุม ของสี่เหลี่ยม ให้มนขึ้น ดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNIFkO9GNPI/AAAAAAAAAB4/32IsMMHOdNk/s1600-h/d_1_rect_4.JPG"><img style="cursor: pointer;" src="http://3.bp.blogspot.com/_c0tjnzgh2F0/SNIFkO9GNPI/AAAAAAAAAB4/32IsMMHOdNk/s320/d_1_rect_4.JPG" alt="" id="BLOGGER_PHOTO_ID_5247262635887834354" border="0" /></a><br />หากไม่ต้องการรูปนั้นแล้ว ให้กดปุ่ม Backspace หรือ Del จะเป็นการลบออก<br /><br />ตอนนี้ให้เราลบสี่เหลี่ยมเดิมออก แล้วเริ่มสร้างสี่เหลี่ยมขึ้นอีกครั้ง<br />ตอนนี้เราอยู่ในโหมด Design ให้กดแท็บ XAML หรือ Split เพื่อดูรูปสี่เหลี่ยมในมุมมองของโค้ด XAML บ้าง<br />จะเห็นโค้ด XAML ดังนี้ (อย่าเพิ่งตกใจ เดี๋ยวจะอธิบายให้ฟังอย่างง่าย ๆ)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNIKR3bwJeI/AAAAAAAAACA/cMPPMFczeGM/s1600-h/d_1_rect_xaml_1.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SNIKR3bwJeI/AAAAAAAAACA/cMPPMFczeGM/s320/d_1_rect_xaml_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5247267817894454754" border="0" /></a><br />ให้สังเกตุ ตัวหนังสือสีแดง เป็นการระบุว่า ตัวหนังสือสีแดง นั้นคือ tag หรือ attribute ส่วนตัวหนังสือสีน้ำเงินนั้น คือ ค่าของข้อมูล<br />เช่น<br />&lt;Rectangle Width="100" Height="50"&gt;<br />&lt;/Rectangle&gt;<br /><br />คำว่า Rectangle คือ Tag ที่ใช้บอกว่าเป็นสี่เหลี่ยม<br />Width คือ attribute มีความหมายว่า ความกว้าง<br />Height="50" คือ บอกว่า สี่เหลี่ยมนี้มีความสูง 50 หน่วย<br /><br />เมื่อมี Tag เปิดแล้วก็ต้องมี Tag ปิด คือ &lt;/Rectangle&gt;<br /><br />ถ้าจะเขียนโดยไม่ให้มี Tag ปิด ต้องเอาเครื่องหมาย / ไปใส่ไว้ท้าย Tag<br />ดังนี้ &lt;Rectangle Width="100" Height="50" /&gt;<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-4375718493479146874?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-92197237107934445582008-09-16T23:13:00.001-07:002008-09-16T23:49:20.384-07:00จากคราวที่แล้วเราสร้างโปรเจ็ก WPF ด้วย Blend มาแล้ว คราวนี้เราจะลองสร้างจาก Visual Studio ดูบ้าง<br /> เริ่มแรก เราก็เปิด VisualStudio ขึ้นมา<br /> เลือกเมนู File > New > Project<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNCgx9ioR3I/AAAAAAAAABA/1AjFiGKeUyM/s1600-h/d_vs_start1.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNCgx9ioR3I/AAAAAAAAABA/1AjFiGKeUyM/s320/d_vs_start1.JPG" alt="" id="BLOGGER_PHOTO_ID_5246870346080470898" border="0" /></a><br /> เมื่อเลือกแล้วจะปรากฏดังนี้<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNChsozRd2I/AAAAAAAAABI/XzFGLr-7Mc0/s1600-h/d_vs_start2.JPG"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_c0tjnzgh2F0/SNChsozRd2I/AAAAAAAAABI/XzFGLr-7Mc0/s320/d_vs_start2.JPG" alt="" id="BLOGGER_PHOTO_ID_5246871354125416290" border="0" /></a><br />ให้เลือกภาษาที่ท่านต้องการ (เลือกได้เพียง 2 ภาษา คือ C# หรือ VisualBasic)<br />แล้วเลือก Windows > WPF Application<br />ด้านบน ให้เลือกเวอร์ชันของ .NET Framework ที่จะใช้<br /> เลือกได้ 2 เวอร์ชัน คือ 3 หรือ 3.5 (หากเลือกเวอร์ชัน 2 ท่านจะไม่เห็นโปรเจ็ก WPF)<br />ตรง Name : ให้ใส่ชื่อโปรเจ็ก<br />Location : ใส่ที่อยู่พาธของโปรเจ็ก<br />Solution Name : ใส่ชื่อโซลูชั่น (มักจะชื่อเดียวกับ ชื่อโปรเจ็ก)<br /><br />แล้วจะปรากฏดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNCkOYlZEKI/AAAAAAAAABQ/BmFl_OBlk1Y/s1600-h/d_vs_start3.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNCkOYlZEKI/AAAAAAAAABQ/BmFl_OBlk1Y/s320/d_vs_start3.JPG" alt="" id="BLOGGER_PHOTO_ID_5246874132911034530" border="0" /></a><br /><br />ตรงกลาง จะมี หน้าต่างคล้าย ArtBoard ของ Blend แบ่งออกเป็นสองส่วน คือ<br /> ส่วน Design<br /> ส่วน XAML<br /> เช่นเดียวกันกับ Blend<br />ด้านข้างจะมี Tab ต่าง เช่น<br /> Solution Explorer คล้ายกับ Project Panel ของ Blend<br /> Property แบบเดียวกับ Blend<br /> Resource แบบเดียวกับ Blend<br /> ต่างกันที่มี Tab : ToolBox อยู่ตรงนี้ด้วย (ของ Blend แยกไปเป็น แถบต่างหาก)<br />ด้านล่างจะมีหน้าต่าง Output<br /> เอาไว้แสดงผลของการคอมไพล์โปรแกรม,Error และอื่น ๆ<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-9219723710793444558?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-71228698245982611682008-09-16T22:19:00.000-07:002008-09-16T23:50:50.841-07:00<span style="font-weight: bold;">เรามาดูส่วนต่าง ๆ ของ Blend กัน</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNCYz3Oz3NI/AAAAAAAAAA4/BQ7F-jfsao8/s1600-h/d_parts1.JPG"><img style="cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNCYz3Oz3NI/AAAAAAAAAA4/BQ7F-jfsao8/s400/d_parts1.JPG" alt="" id="BLOGGER_PHOTO_ID_5246861582653447378" border="0" /></a><br /><br /><ol><li>ArtBoard เป็นพื้นที่หลักที่เราจะเห็น ชิ้นงานทั้งหมด<br /></li><li>ToolBox เป็นแถบ ให้เราเลือกเครื่องมือ ที่จะนำมาใช้<br /></li><li>View Tab สำหรับเปลี่ยนมุมมองของ artboard โดยเลือกได้ 3 อย่าง คือ Design(เห็นเป็นภาพ),XAML,Split(เห็นทั้งสองอย่างพร้อมกัน)<br /></li><li>Project/Property/Resource Panel เลือกได้ 3 แท็บ<br /></li><li>ArtBoard Zoom ใช้เลือกขนาดการขยายภาพ(zoom)<br /></li><li>Interaction Panel ใช้สำหรับการเลือก ออปเจ็ก, การอนิเมชั่น, การกำหนดเหตุการณ์</li></ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-7122869824598261168?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-1372358854237016872008-09-16T04:14:00.000-07:002008-09-16T23:48:34.309-07:00เมื่อติดตั้ง Express Blend และ Visual Studio 2008 เสร็จแล้ว เรามาเริ่มสร้างโปรเจ็กกัน<br />เราเลือกสร้างโปรเจ็กได้จากทั้งสองโปรแกรม เช่น เมื่อเปิด Blend มาครั้งแรกจะเห็นหน้าจอนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SM-WhzZTHrI/AAAAAAAAAAM/iXL4GPN5ZHo/s1600-h/d_first_blend.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SM-WhzZTHrI/AAAAAAAAAAM/iXL4GPN5ZHo/s320/d_first_blend.JPG" alt="" id="BLOGGER_PHOTO_ID_5246577598386085554" border="0" /></a><br /><br />เราก็เลือก New Project ได้ทันที เสร็จแล้วจะเห็นดังนี้<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_c0tjnzgh2F0/SM-XSrGYsfI/AAAAAAAAAAU/NN5GCUwtVxs/s1600-h/d_new_project.JPG"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/_c0tjnzgh2F0/SM-XSrGYsfI/AAAAAAAAAAU/NN5GCUwtVxs/s320/d_new_project.JPG" alt="" id="BLOGGER_PHOTO_ID_5246578437972865522" border="0" /></a><br />มีให้เลือก 3 อย่าง<br /><ol><li>WPF Application (.exe) คือ สร้างโปรแกรมที่ทำงานบนเครื่องคอมพิวเตอร์ (โดยไม่จำเป็นต้องต่อ Internet)</li><li>WPF Control Library คือ สร้างชิ้นส่วนคอนโทรล เพื่อเอาไว้ใช้ในโปรเจ็กอื่นในภายหลัง</li><li>SilverLight คือ การสร้างโปรเจ็กที่สามารถรันบนเว็บได้</li></ol>Location : คือ ไดเรกทอรีที่เราจะเก็บชิ้นงานไว้<br />Language: มีให้เลือก 2 ภาษา คือ C# หรือ VisualBasic.NET<br />Target: ให้เราระบุเลือกว่าจะใช้ .NET Framework เวอร์ชันใด<br /> กรณีที่เลือก .NET Framework 3.0 จะมีข้อดีตรงที่ โปรแกรมสามารถรันบนวินโดว์วิสต้าได้ทันที (โดยไม่ต้องติดตั้ง .NET 3.5)<br /> (แต่ถ้าจะรันบน วินโดว์ XP ก็ยังคงต้องติดตั้ง .NET 3)<br /> กรณีที่เลือก .NET Framework 3.5 จะมีข้อดีตรงที่ โปรแกรมสามารถใช้ฟีเจอร์ Linq ได้ แต่ต้องติดตั้ง .NET 3.5 ลงในเครื่องที่จะรันโปรแกรม<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNByC2bXsUI/AAAAAAAAAAg/kB-PJ83eznQ/s1600-h/d_new_2.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://1.bp.blogspot.com/_c0tjnzgh2F0/SNByC2bXsUI/AAAAAAAAAAg/kB-PJ83eznQ/s320/d_new_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5246818959182246210" border="0" /></a><br />แล้วกด OK โปรแกรมก็จะสร้างโปรเจ็กขึ้นมา<br /><br />ให้ดูที่ด้านขวาบน จะเห็นดังนี้<br />ในหัวข้อ Project จะมีไฟล์ต่างเกิดขึ้น คือ<br /><br />Solution : คือ ไฟล์ที่เป็นไฟล์แม่ สำหรับเปิดโปรเจ็กขึ้นมา<br />Project : คือ ไฟล์โปรเจ็ก (สังเกตุว่าจะมี Icon ที่บอกภาษา เช่น C#)<br />App.xaml : คือ ไฟล์กลางสำหรับตั้งค่าต่าง ๆ ของโปรแกรม<br />AssemblyInfo.cs : คือ ไฟล์กลางสำหรับตั้งค่าเช่นเดียวกัน<br />Window1.xaml : คือ ไฟล์ xaml ที่เราจะใช้เป็นประจำ มีไว้สำหรับกำหนด UI ของโปรแกรม ใช้คู่กับไฟล์ Window1.xaml.cs(c#) หรือ Window1.xaml.vb (VisualBasic) ให้กดปุ่มลูกศร > แล้วจะเห็นไฟล์นี้<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-137235885423701687?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0tag:blogger.com,1999:blog-7816424259476523004.post-74882362734134698962008-09-15T23:50:00.000-07:002008-09-22T21:13:57.845-07:00ขอเกริ่นเล็กน้อย WPF<br />ย่อมาจาก Window Presentation Foundation เป็นระบบ User Interace(UI) แบบใหม่ ที่ทำให้โปรแกรมเมอร์กับกราฟิกดีไซเนอร์ ทำงานร่วมกันเพื่อสร้างโปรแกรมที่สวยงามขึ้น ใช้ง่ายขึ้น และ Interactive กับผู้ใช้มากขึ้น<br /><br />โดยเกิดภาษาใหม่ขึ้น ชื่อว่า XAML เป็นภาษาที่ใช้อธิบายว่า UI เป็นอย่างไร เช่น<br />&lt;textblock&gt;<br /> Hello,World !<br />&lt;/textblock&gt;<br />โปรแกรมก็จะแสดง ช่องข้อความที่มีคำว่า Hello, World<br />เป็นภาษาที่ใช้ XML เป็นพื้นฐาน คือ<br /><ol><li>มี Tag คือ ข้อความที่อยู่ในวงเล็บ <><br /></li><li>เมื่อมี Tag อะไรเกิดขึ้น ก็จะมี Tag ปิด คู่กันเสมอ โดยจะมีเครื่องหมาย / นำหน้าคำ</li><li>หากเป็น Tag ที่จบในตัวมันเอง (ไม่มี Tag ปิด) ก็จะมีเครื่องหมาย / ต่อท้ายเช่น &lt;textblock text="Test" /&gt;</li><li>ถือตัวอักษรใหญ่/เล็ก ว่าแตกต่างกัน (Case Sensitive)</li></ol><br />เครื่องมือที่จะใช้สร้างงาน มี 2 โปรแกรม<br /><ol><li>MS Expression Blend สำหรับให้ กราฟิกดีไซเนอร์ สร้างงานออกแบบที่เป็นกราฟิกแบบเวกเตอร์ (คล้ายกับ Illustrator) โดยจะได้เห็นเป็นภาพ และโค้ดภาษา XAML หามาใช้ได้ไม่ยากจาก <a href="http://www.microsoft.com/expression/try-it/Default.aspx">ตรงนี้</a><br /></li><li>MS Visual Studio 2008 Express สำหรับให้ โปรแกรมเมอร์ เขียนโปรแกรม(ภาษา C# หรือ VisualBasic) เชื่อมกับโค้ด XAML ที่ได้จาก Blend เพื่อออกมาเป็นโปรแกรมที่สมบูรณ์ หามาใช้ได้ไม่ยากจาก <a href="http://www.microsoft.com/express/product/default.aspx">ตรงนี้ </a><br /></li></ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7816424259476523004-7488236273413469896?l=wpftutor.blogspot.com' alt='' /></div>Johttp://www.blogger.com/profile/03400128710739454820noreply@blogger.com0