WPF Layout (Part I)

by
Post Views: 440

Introduction to WPF Layout

การอออกแบบ controls  คือส่วนสำคัญของการออกแบบโปรแกรมที่นำมาใช้งาน การจัดวาง controls ที่มีการกำหนดค่าขนาดของ pixel ของ controls นั้นๆ อาจจะใช้งานได้ดีในกรณีสภาพแวดล้อมที่ถูกจำกัด แต่ในขณะเดียวกันจะได้ผลลัพธ์ที่ไม่พึงประสงค์นักหากไปแสดงบนหน้าจอที่มีความละเอียดของหน้าจอหรือขนาดของตัวอักษรที่ต่างกันออกไป WPF จึงมีการนำ panel มาแก้ไขปัญหาในส่วนนี้  โดย panel ที่ใช้ในการจัดวาง Layout มีอยู่ 5 ชนิดที่นิยมใช้การการออกแบบดังนี้

  • Grid Panel
  • Stack Panel
  • Dock Panel
  • Wrap Panel
  • Canvas Panel

Best Practices

  1. หลีกเลี่ยงการกำหนดค่าตำแหน่ง : กรณีที่ต้องการกำหนดตำแหน่งการวาง controls ใน panel ควรใช้ Alignment properties ร่วมกับ Margin เพื่อกำหนดค่าตำแหน่งใน panel แทนการกำหนดเป็นค่าคงที่ในตำแหน่งนั้นๆ
  2. หลีกเลี่ยงการกำหนดขนาด : ควรกำหนด Width และ Height ของ element ให้เป็น Auto
  3. ไม่ใช้ canvas panel ในการจัดวาง layout ของ element ใช้ canvas panel กรณีที่เป็น vector graphic เท่านั้น
  4. ควรใช้ Stack panel เพื่อจัดเรียงปุ่ม
  5. ใช้ grid panel ในกับ form ที่เป็น form สำหรับการรับข้อมูลเข้า โดย control ที่อยู่ใน grid panel ที่เป็น label ควรกำหนดขนาดเป็น Auto และ controlที่เป็น Textbox ควรกำหนดขนาดเป็น *
  6. ใช้ itemControl ใน DataTemplate ของ grid panel เพื่อใช้ในการจัดวาง control ที่แสดงข้อมูลที่มีการเปลี่ยนแปลงของ keyตลอดเวลา และควรใช้ SharedSize เพื่อให้ label มีขนาดความกว้างเท่ากัน

Vertical and Horizontal Alignment

ใช้ VerticalAlignment และ HorizontalAlignmant properties เพื่อกำหนด  Control ให้อยู่ในส่วนเดียวกันหรือหลายๆส่วนใน panel   นั้นๆ  โดยมีตัวอย่างดังภาพ

https://www.wpftutorial.net/images/v2_alignment.png

Margin and Padding

Margin และ Padding properties จะจองพื้นที่ช่องว่างรอบๆของcontrol ดังนี้
• The Margin คือ ส่วนของช่องว่างรอบๆของ control.
• The Padding คือส่วนของช่องว่างที่อยู่ภายใน control.
• The Padding ของ control ที่อยู่ภายนอก คือ Margin ของ control ที่อยู่ภายใน Control นั้นๆ

Height and Width

ไม่แนะนำให้กำหนดค่า Height และ Width เนื่องจากจะทำให้ยุ่งยากในการจัดการ  การจัดการที่ดีควรจะกำหนดค่า  MinHeight, MaxHeight, MinWidth และ MaxWidth ตามต้องการ  หรือหากต้องการกำหนด width หรือ height เป็น Auto ขนาดของ controls ก็จะมีขนาดเท่ากับของข้อมูลโดยอัตโนมัติ

Overflow Handling

Clipping

ในกรณีที่ elementsซ้อนทับ border ของ panel เราจะกำหนดการแสดงการจัดวางของ control โดยใช้ ClipToBounds property โดยมีกำหนดค่าเป็น  true หรือ false  ดังรูป

https://www.wpftutorial.net/images/cliptobounds.PNG

Scrolling

กรณีที่เนื้อหาของข้อมูลมีจำนวนมากเกินกว่าขนาดของ panel ที่จะสามารถแสดงให้เห็นได้ทั้งหมดใน panel นั้นๆ คุณสามารถนำความสามารถของ ScrollViewer มาใช้แก้ปัญหาตรงจุดนี้ได้ โดยประกอบด้วยสองส่วนคือ  vertical ScrollbarVisibility  และ horizontal ScrollbarVisibility properties ดังตัวอย่าง

<ScrollViewer>    
<StackPanel>         
<Button Content="First Item" />         
<Button Content="Second Item" />        
<Button Content="Third Item" />     
</StackPanel> 
</ScrollViewer>

 แหล่งอ้างอิง
https://www.wpftutorial.net/LayoutProperties.html