(แปลจาก บล็อกภาษาอังกฤษของ Scottgu
ที่นี่)
กดปุ่มนี้จะดาวโหลด sourcecode โปรแกรมที่เสร็จแล้วต่อจากตอนที่แล้ว เราจะมาดูเรื่อง การจัดวางตำแหน่ง หรือ Layout กัน
ทำความเข้าใจเรื่อง การจัดวาง LayoutSilverlight และ WPF ได้ให้ Control ที่จะช่วยโปรแกรมเมอร์จัดวางตำแหน่ง UI ได้อย่างสะดวก โดยจะมีทั้งแบบกำหนดตำแหน่งตายตัว และแบบที่ให้ Layout จัดการให้
Layout ที่ใช้ใน Silverlight 2 ได้แก่
การจัดวางแบบ Canvasเป็นการจัดวางที่ให้โปรแกรมเมอร์กำหนดตำแหน่งของ Control ที่จะวางบน Canvas ได้อย่างอิสระ โดยกำหนดพิกัด (ตามแนว x,y) ได้
โดยใช้แอตทริบิว Left แทนตำแหน่ง X และ แอตทริบิว Top แทนตำแหน่ง Y
ดังตัวอย่างที่จะใส่ปุ่ม Button 2 ปุ่ม ลงบน Canvas ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sKo2WRfDt6XvnvxOGOoZ2TxgFTK0HvAozH-m4iIF7iqHGq1lg1-B8OFqwi582E2eu48GchDou0MEJJ5MONGjSwraVmVMTIIAo8FuX4042JEwLcKMH-uxx-lMA=s0-d)
ซึ่งจะปรากฏผล ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_urYPicyKQ8stmQo9DxXeCgikzV5NhfYkxHaYkscy8yJRxuEa1f7liSek6cOyw4o_gfmErRx3MoTE_4WN8tVQl9ilyYWaLLHpmNKbPoL9JpaelxpgjxKHu4Hg=s0-d)
Canvas จะมีประโยชน์ในกรณี ที่ Control จะไม่ขยับตำแหน่ง และขนาดไม่เปลี่ยน
แต่เมื่อตำแหน่งหรือขนาดของ Control เปลี่ยน จะทำให้โปรแกรมเมอร์ต้องมาเปลี่ยนพิกัด จัดใหม่ ให้ดูดี
ในกรณีนี้ ควรจะใช้ Layout แบบอื่น ๆ คือ StackPanel หรือ Grid
StackPanelStackPanel เป็นการจัดวางที่จะวาง Control ที่อยู่ภายใน เรียงเป็นตามแนวเดียวกัน (ตามแนวนอน หรือตามแนวตั้ง) เช่น
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s6QX_c9Jt8sVJ6Y4iUyRFevv9P1azcSQ2SEtCrcRMhiR7higDlC_oK7dNEGCgIQP01hLmwMxbmJYU9d4ZCsrDpEN0FuYhP25qOGOcqo3qqVcDc3XWBHSdE_g=s0-d)
จะได้ผลดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vKtjAKj0GNHADPjc6ZbmiDpAsiu6kNq-kLNq9Uz6cUAF6N-_YY7VATEL-nTxqfBpeVQM5xHnqiyHPt0miMc77XMmbHfVgO-SCaw9IzKiRhQY_Lj3SIvFslYvY=s0-d)
หากเราจะจัดวางเรียงไปตามแนวนอน ให้เราเพิ่มแอตทริบิว Orientation="Horizontal" ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_us-HKLltdQ3b8iy7ZaqNu9VWiuNinQQdV7TzBWzI4PbJzF4F3ytnOFfIkV-IOjOmIxw-Pw6o9HxiIUnn_98TwC-_cQDyAD5me9BsImkIdAio420S_YWtdT4A=s0-d)
ได้ผลดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t0LLXZ_36UgtE7GA2-FY8KPKDya35Ymshky62C96sbsxAg-eHki0ZyPPtDvYy1X0OFtyayM87dQSjSRJUsLDxEQzIWyVGYeZ5xZkdkhVLmiMO62AsnepuC2oM=s0-d)
การจัดวางแบบ Grid คือการจัดวางแบบตาราง
คือ การจัดวางที่ยืดหยุ่นที่สุด ทำให้วางในตำแหน่งช่องใดก็ได้ในตาราง และมีขนาดได้มากกว่าหนึ่งช่อง
ดังตัวอย่าง จะ สร้างตารางซึ่งมี 3 คอลัม
โดยเราจะประกาศ คอลัมภ์ ไว้ในแท็ก
3 อันไว้ใน
และประกาศ คอลัมภ์ ไว้ในแท็ก 3 อันไว้ใน
หลังจากนั้น จะใส่ <button> ที่บอกตำแหน่งที่จะใส่ไว้ใน Grid ด้วยแอตทริบิว Grid.Column="x" Grid.Row="y" ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uvNriQHI2vkTTc1Usu5r_mW2Msqqw7Ahc3lMNQQsuA_QE0ALxL52pfSnp8We4G40thpOCIho-wujpTBy3hvTSVHmqlKpb5bMyvK21OPOOVkKAE23JX1-l3hL4=s0-d)
จะได้ผลดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vq-NZTjtwG9snY_WeHDB6YEmFWz9zFjqyofF9hAlkkjmueZ3u27kov4gz7QRQ5nrRcAqiTIOI_xMeshvTXe5VIXK_TQzUI98rlPK8xPqRnG-3ZWfIqhBvjVQ=s0-d)
นอกจากการระบุพิกัดแบบตายตัว เช่น Height=60 แล้ว
RowDefinition และ ColumnDefinition ยังมีโหมด AutoSize (ปรับขนาดอัตโนมัติ)
เช่น Height="Auto" จะทำให้ความสูงของ Row นั้น ปรับตามขนาดของ Control ที่อยู่ข้างใน
ซึ่งมีประโยชน์มาก
นอกจากนั้น ขนาดยังกำหนดให้เป็นสัดส่วนต่อกันได้ด้วย เช่น
<RowDefinition Height="1*">
<RowDefinition Height="2*">
แถวที่สอง จะมีความหนากว่า แถวแรก สองเท่า
ตัวอย่างการจัดหน้าจอ แบบ Digg(เว็บไซต์ยอดนิยมแห่งหนึ่ง)
เราจะสร้างหน้าจอ ให้เหมือนแบบนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v1UdoCCtR88BwIYSeESro0WrgGBFONpnYN-eXqDjgjAQWIEu56ORYuk1gAeudkt5tOjawvXqXcMxyeGLmtnIcsb_2XUH95D9zbVRl29MdreZhVsSWAtCf1=s0-d)
โดยเราจะสร้างให้มี Grid 2 แถว ก่อน แถวแรกสูง 40 pixel(จุดสี) แล้วแถวที่สองให้กินที่ที่เหลือทั้งหมด (Height="*")
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tX1ZIvcShMDhjjpiETfZ-iW_ShjP0_B0s3UJqYbGK_aeTQ17eRKa1T9-CdbnUIgiaacoV57ysc5Cyj1mvnbopwD_UZL-HdDsDljrB6HRujTJ2WPeULGfHjJWM=s0-d)
โดยเพิ่มแอททริบิว ShowGridLines="True" เพื่อให้เห็นเส้นประ บอกตำแหน่ง
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s02a7EY4_MsdDabGHFKzSB1f-KSc4rBGm5Tk5FbBUshWSU5qdlqqRn3hXetZb3HMx4rmUklMgoKbK6lOl_IoBcFuYN42vUHAPCBm6xkmb-2rWYCEzUIe8_WhU=s0-d)
แล้วเราก็จะใส่ Grid ลงไปในช่องแถวแรกของ Grid นอก โดยแบ่งเป็น 3 คอลัม ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uwQ3cg8Rz4F5mN-oIfgO_EFisGPUrSGYBuE3wcSyhfkdyc5OzWI11j0PcmDHGT_KEShhV0GIQlqwVWo84m2ia9FI4Yw7bTYAbJ5mjQH54xXgKEzwWgjM8XVeE=s0-d)
ทำให้เราเห็นการแบ่ง แถวแรกออก ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s8rgWfRUzezwa_g3tbVUUptSQ-RecR9WBUNpaJF69abXl7v9HjJIDCtbZKbTraPkd3bHVFDjZXNCHYzLqVvipsZjVG-wiS3ivdulNNpRhqfQ4V0lB0bGCw3Q=s0-d)
โดยช่องแรก เราจะใส่คอนโทรล <Border> โดยหัวมุมให้ตัดมน รัศมี 10
แล้วใส่ข้อความ <TextBlock> ไว้ข้างในอีกที
ช่องถัดมาใส่ <WatermarkedTextBox>
ช่องถัดมาใส่ปุ่ม <Button>
แล้วในแถวถัดมา ใส่ <TextBlock> ดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uS05m6-9TFNnRtYTOQ8p8zonqdlGne0J7cofVJawSiPRRzWRbr71X1GE1jeBcOI824jjbFlC1GZi6-pPmHkXbpzxtioYfO7MNsfSptxBspXzJWQfIqwzZ6mv0=s0-d)
ได้ผลดังนี้
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tF9tFdqhEMeTRJ-U7vLZz0zTHSuj-HYZCpctkT4e3fVdt5HsY4aAscakS__K86K9wjCrKN8tU5G5GF2rL5B-yFylbosa0sQgMjw2o7D5RUkBaUov63SHPCumE=s0-d)
ตอนนี้เรายังจำกัดความกว้างสูงของ หน้า Silverlight ไว้ที่ 600 x 300 อยู่
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u0vmUfIT8TLYk0vPrf698rRfcatBn9bCH1Wqm6UtEGEYqiKR_xw1R4EkSDM950EWkO0YEQwiSSpORIdbwN7Uv0Su6odGBqtWKl7mUWbBhOO2mRh0uo06w_2i0=s0-d)
ทำให้ ถ้าเราถึงหน้าเว็บเพจออกกว้างก็จะเห็น silverligth ไม่เต็มจอ
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_txlL4JB2aJXpu6cZpMkZHUm1vZrcpn-ImT5FLvXbCEXDwxJ7EBgG5kn2Hn6t55rmD2dKMt-qKCVAK-Cn7ho1wrSo3-gS-zc3y2PwkhMhxhbNn8Vi9F-TkQi_g=s0-d)
ให้เราเอาบรรทัด Width="600" Height="300" ออก
ก็จะให้โปรแกรมที่เต็มหน้าจอบราวเซอร์
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sJX5LfC6hAYN7Lu2-_PYYdoh8ezlK09tp91x5nQAZial5gIFeXlCl4tbZaMq3DKbwijwtPAOkaZXJUQoQhNuW2HTmfXvdGt4LUwXZLF3j52aPDlRS8nq7PLA=s0-d)
โปรดติดตามตอนต่อไป