The WPF Viewbox
WPF viewbox จะสามารถปรับขนาด/ปรับมิติของ control ของ Windows Presentation Foundation ได้โดยอัตโนมัติ viewbox และสามารถปรับขนาดของ control เพื่อเติมเต็มพื้นที่ที่มีอยู่ คือจะมีการปรับขนาดของ child ซึ่งเป็น control ที่บรรจุอยู่ใน ViewBox ให้อัตโนมัติ ซึ่งจะมีการปรับพิกัดโดยอัตโนมัติเมื่อมีการปรับเปลี่ยนขนาดเพื่อให้ชุดของพิกัดที่กำหนดเป็นพิกเซลในขนาดดั้งเดิม
อะไรคือจุดประสงค์ของ WPF Viewbox? เมื่อไหร่ที่คุณจะใช้มัน?
เมื่อคุณพัฒนาโปรแกรม โดยทั่วไปแล้วคุณจะไม่สามารถรู้ถึงความแน่นอนของ hardware ของระบบที่จะเป็นไป โดยเฉพาะอย่างยิ่งหากแอปพลิเคชันมีไว้เพื่อการใช้งานในระยะยาว คุณไม่สามารถมั่นใจได้เลย ไม่ว่าจะเป็นขนาดหรือความละเอียดของจอภาพที่แสดงผลการใช้งานของระบบต่างๆ เพราะปีที่แล้วหน้าจออาจจะเป็น ultra-high-resolution ปีต่อมาอาจจะเป็น low-resolution monitor และถ้าคุณได้พัฒนาโปรแกรมโดยคำนึงถึงความละเอียดของหน้าจอของปีที่แล้วไว้ เมื่อมาดูในปีถัดมาในส่วนของหน้าต่างโปรแกรม ปุ่ม และ elements อื่นๆของ GUI ที่ได้พัฒนาไว้ อาจจะมีขนาดที่เล็กมาก จนทำให้เกือบจะใช้ไม่ได้เลย
Resize!
Viewbox จะปรับความละเอียดของหน้าจอให้อัตโนมัติทุกหน้าจอให้ตามความเหมาะสม แม้ว่าผู้ใช้งานจะปรับให้หน้าต่างโปรแกรมให้มีขนาดใหญ่สุดในหน้าจอที่มีความละเอียดใดๆก็ตาม โดยเมื่อผู้ใช้งานปรับขนาดและสัดส่วนของหน้าต่างโปรแกรม Viewbox จะทำการปรับขนาดและตำแหน่งที่สัมพันธ์กันของเนื้อหาให้พอดี ส่วนนี้จะทำให้ผู้พัฒนาโปรแกรมและผู้ใช้งานมีความยืดหยุ่นสูงสุด
จากตัวอย่าง XAML code จะสร้าง Viewbox กับ button ที่เมื่อมีการปรับขนาดของ button ให้อัตโนมัติเมื่อมีการปรับขนาดของ Viewbox window
<Window x:Class="ViewboxTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Viewbox Test"
SizeToContent="WidthAndHeight" Height="75" Width="250">
<Viewbox>
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
</Window>
What About the Margins?
จะน่าสนใจขนาดไหนถ้าcontrol ที่อยู่ใน Viewbox window ก็จะถูกปรับขนาดโดยอัตโนมัติ และจะเกิดอะไรขึ้นเมื่อ window ไม่ได้ถูกปรับขนาดแค่เพียงอย่างเดียวเท่านั้นแต่จะปรับในส่วนของมิติให้กับ control ที่ไม่พอดีกับ window ไปด้วย ? Viewbox มี 2 properties คือ Stretch และ StretchDirection ที่จะมาจัดการในส่วนนี้ให้คุณได้
Stretching it a Bit
จากโค้ดตัวอย่างข้างต้น เมื่อ complied เป็น EXE เราจะเห็นโปรแกรม “Viewbox Test” ที่มีข้อความ “I’m a Button” อยู่บนปุ่ม และเมื่อคุณปรับขนาดของ window ปุ่มก็จะถูกปรับขนาดและอัตราส่วนให้พอดีโดยอัตโนมัติ ทำให้ปุ่มมีขนาดของสัดส่วนที่พอดีสวยงามไม่ว่าจะมีการปรับให้มีขนาดใดก็ตาม ในกรณีที่อัตราส่วนของภาพใน view box แสดงขนาดไม่พอดีกับปุ่ม อาจจะเกิดจากการมีที่ช่องว่างทั้งด้านบนและด้านล่างปุ่มหรือทางซ้ายและขวา
The Default
กรณีที่ไม่ได้กำหนดค่าของ Stretch property จะมีค่า default ของ Viewbox ที่กำหนดในส่วนของ Stretch property คือ “Uniform” ดังตัวอย่าง
<Viewbox>
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
จากตัวอย่างข้างต้นจะมีความหมายเหมือนกับตัวอย่างข้างล่าง
<Viewbox Stretch="Uniform">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
Stretch property จะประกอบด้วย 4 ตัวเลือก ดังนี้
1. No Stretch At All
กรณีที่ไม่ต้องการให้มีการปรับขนาดของ child control จำเป็นที่จะต้องกำหนดค่า Stretch property เป็น None ดังตัวอย่าง
<Viewbox Stretch="None">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
เมื่อมีการกำหนดกำหนดค่า Stretch property เป็น None ปุ่มจะคงขนาดเดิมไว้ โดยจะไม่เกิดอะไรขึ้นไม่ว่าคุณจะปรับขนาดหรือมิติของ Viewbox window กรณีถ้ามีการเพิ่มขนาดของ window ปุ่มจะคงขนาดเดิมแต่มีช่องว่างรอบๆปุ่มแทน ส่วนถ้าย่อขนาดของ window ปุ่มก็จะคงขนาดเดิมเช่นกันแต่อาจจะถูก window บังปุ่มจนมองไม่เห็นทั้งปุ่ม หรือสุดท้ายเมื่อย่อขนาดลงเรื่อยๆจนทำให้เรามองไม่เห็นปุ่มเลย
2.Free-Form
เมื่อกำหนดค่า Stretch=”Fill” จะทำให้ child control ถูกปรับขนาดให้พอดีกับ Viewbox โดยไม่มีการตัดของเนื้อหาใดๆออกเลย คือจะแสดงผลอย่างสมบูรณ์ ในส่วนของการปรับขนาดในแนวตั้งและแนวนอนอาจจะแตกต่างกัน ซึ่งอาจจะทำให้เนื้อหาใน Viewbox ผิดเพี้ยนไป เนื่องจากจะถูกปรับเปลี่ยนอัตราส่วนเป็นขนาดตาม window ดังตัวอย่าง
<Viewbox Stretch="Fill">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
3.Uniform Adjustment
Uniform option จะเหมือนกับ Free-Form ที่อธิบายข้างบน และเป็นค่า default ของ Stretch เนื่องจากตัวลูกของ control จะรักษาขนาดและอัตราส่วนเดิมไว้ มันจะไม่ถูกบิดเบือนขนาดเมื่อมีการปรับขนาด ข้อเสียคือเมื่ออัตราส่วนของ View box มีขนาดไม่ตรงกันกับ control อาจจะทำให้มีช่องว่างรอบๆ control ได้ ดังตัวอย่าง
<Viewbox Stretch="Uniform">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
4.Uniform and Fill
กรณีที่ต้องการใช้ทั้งแบบ Uniform และ Fill เราสามารถกำหนดให้ Stretch=”UniformToFill” ดังตัวอย่าง
<Viewbox Stretch="UniformToFill">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
ในส่วน UniformToFill ที่คล้ายกับ Uniform คือ จะรักษาสัดส่วนต้นแบบของ control ไว้ แต่ในส่วนที่เหมือนกับ Fill คือ UniformToFill จะปรับให้เท่ากับขนาดของ view box อย่างสมบูรณ์ แต่เนื่องจากจำเป็นต้องรักษาสัดส่วนเดิมไว้และมีการปรับขนาดและมิติตามขนาดของ Viewbox ไว้ด้วย จะทำให้บางส่วนของ control ถูกตัดออกเพื่อให้มีขนาดพอดีกับสัดส่วนของปลายทาง
StretchDirection Property ประกอบด้วย 3 ตัวเลือก ดังนี้
1. UpOnly
กรณีที่มีการกำหนด StretchDirection=”UpOnly” จะทำให้ ถ้า Viewbox มีขนาดใหญ่กว่า size ของ child control จะส่งผลให้ child control มีขนาดใหญ่ไปด้วย แต่ถ้ามีการลดขนาด child control จะไม่ลดขนาดตาม จึงทำให้การแสดงผลบางส่วนถูกตัดออกไป ดังตัวอย่าง
<Viewbox Stretch="Uniform" StretchDirection="UpOnly">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
2. DownOnly
Viewbox จะอนุญาตให้ย่อขนาดลงให้น้อยกว่า default ของขนาดเดิม โดยการย่อขนาดลงจะส่งผลให้มีพื้นที่ว่างรอบๆ child control ดังตัวอย่าง
<Viewbox Stretch="Uniform" StretchDirection="DownOnly">
<Button Content="I'm a Button" Width="150"/>
</Viewbox>
3. Both
จะเป็นค่า default ของ StretchDirection Property โดย Viewbox จะอนุญาตให้สามารถย่อและขยายขนาดของ child control ได้
แหล่งอ้างอิง
https://www.wpftutorial.net
