ทำโปรเจ็ก Silverlight ตอนที่ 2 การจัดวางตำแหน่ง

(แปลจาก บล็อกภาษาอังกฤษของ Scottgu ที่นี่)
กดปุ่มนี้จะดาวโหลด sourcecode โปรแกรมที่เสร็จแล้ว

ต่อจากตอนที่แล้ว เราจะมาดูเรื่อง การจัดวางตำแหน่ง หรือ Layout กัน
ทำความเข้าใจเรื่อง การจัดวาง Layout
Silverlight และ WPF ได้ให้ Control ที่จะช่วยโปรแกรมเมอร์จัดวางตำแหน่ง UI ได้อย่างสะดวก โดยจะมีทั้งแบบกำหนดตำแหน่งตายตัว และแบบที่ให้ Layout จัดการให้

Layout ที่ใช้ใน Silverlight 2 ได้แก่

• Canvas
• StackPanel
• Grid

การจัดวางแบบ Canvas
เป็นการจัดวางที่ให้โปรแกรมเมอร์กำหนดตำแหน่งของ Control ที่จะวางบน Canvas ได้อย่างอิสระ โดยกำหนดพิกัด (ตามแนว x,y) ได้
โดยใช้แอตทริบิว Left แทนตำแหน่ง X และ แอตทริบิว Top แทนตำแหน่ง Y
ดังตัวอย่างที่จะใส่ปุ่ม Button 2 ปุ่ม ลงบน Canvas ดังนี้


ซึ่งจะปรากฏผล ดังนี้

Canvas จะมีประโยชน์ในกรณี ที่ Control จะไม่ขยับตำแหน่ง และขนาดไม่เปลี่ยน
แต่เมื่อตำแหน่งหรือขนาดของ Control เปลี่ยน จะทำให้โปรแกรมเมอร์ต้องมาเปลี่ยนพิกัด จัดใหม่ ให้ดูดี
ในกรณีนี้ ควรจะใช้ Layout แบบอื่น ๆ คือ StackPanel หรือ Grid

StackPanel
StackPanel เป็นการจัดวางที่จะวาง Control ที่อยู่ภายใน เรียงเป็นตามแนวเดียวกัน (ตามแนวนอน หรือตามแนวตั้ง) เช่น


จะได้ผลดังนี้


หากเราจะจัดวางเรียงไปตามแนวนอน ให้เราเพิ่มแอตทริบิว Orientation="Horizontal" ดังนี้



ได้ผลดังนี้



การจัดวางแบบ Grid คือการจัดวางแบบตาราง
คือ การจัดวางที่ยืดหยุ่นที่สุด ทำให้วางในตำแหน่งช่องใดก็ได้ในตาราง และมีขนาดได้มากกว่าหนึ่งช่อง
ดังตัวอย่าง จะ สร้างตารางซึ่งมี 3 คอลัม
โดยเราจะประกาศ คอลัมภ์ ไว้ในแท็ก 3 อันไว้ใน
และประกาศ คอลัมภ์ ไว้ในแท็ก 3 อันไว้ใน

หลังจากนั้น จะใส่ <button> ที่บอกตำแหน่งที่จะใส่ไว้ใน Grid ด้วยแอตทริบิว Grid.Column="x" Grid.Row="y" ดังนี้

จะได้ผลดังนี้


นอกจากการระบุพิกัดแบบตายตัว เช่น Height=60 แล้ว
RowDefinition และ ColumnDefinition ยังมีโหมด AutoSize (ปรับขนาดอัตโนมัติ)
เช่น Height="Auto" จะทำให้ความสูงของ Row นั้น ปรับตามขนาดของ Control ที่อยู่ข้างใน
ซึ่งมีประโยชน์มาก

นอกจากนั้น ขนาดยังกำหนดให้เป็นสัดส่วนต่อกันได้ด้วย เช่น
<RowDefinition Height="1*">
<RowDefinition Height="2*">

แถวที่สอง จะมีความหนากว่า แถวแรก สองเท่า

ตัวอย่างการจัดหน้าจอ แบบ Digg(เว็บไซต์ยอดนิยมแห่งหนึ่ง)
เราจะสร้างหน้าจอ ให้เหมือนแบบนี้


โดยเราจะสร้างให้มี Grid 2 แถว ก่อน แถวแรกสูง 40 pixel(จุดสี) แล้วแถวที่สองให้กินที่ที่เหลือทั้งหมด (Height="*")

โดยเพิ่มแอททริบิว ShowGridLines="True" เพื่อให้เห็นเส้นประ บอกตำแหน่ง

แล้วเราก็จะใส่ Grid ลงไปในช่องแถวแรกของ Grid นอก โดยแบ่งเป็น 3 คอลัม ดังนี้

ทำให้เราเห็นการแบ่ง แถวแรกออก ดังนี้


โดยช่องแรก เราจะใส่คอนโทรล <Border> โดยหัวมุมให้ตัดมน รัศมี 10
แล้วใส่ข้อความ <TextBlock> ไว้ข้างในอีกที
ช่องถัดมาใส่ <WatermarkedTextBox>
ช่องถัดมาใส่ปุ่ม <Button>

แล้วในแถวถัดมา ใส่ <TextBlock> ดังนี้

ได้ผลดังนี้



ตอนนี้เรายังจำกัดความกว้างสูงของ หน้า Silverlight ไว้ที่ 600 x 300 อยู่


ทำให้ ถ้าเราถึงหน้าเว็บเพจออกกว้างก็จะเห็น silverligth ไม่เต็มจอ

ให้เราเอาบรรทัด Width="600" Height="300" ออก
ก็จะให้โปรแกรมที่เต็มหน้าจอบราวเซอร์



โปรดติดตามตอนต่อไป