ปรับ App ให้เหมาะสมกับ Device Portrait vs. Landscape

Portrait vs. Landscape

Portrait คือการแสดงผลแบบแนวตั้ง Landscape คือการแสดงผลแบบแนวนอน ซึ่งทั้งสองแบบนั้นเป็นคุณสมบัติพื้นฐานใน Windows Phone 7 Application แต่ค่าเริ่มต้นใน Silverlight จะเป็นแบบ Portrait ส่วน XNA จะเป็นแบบ Landscape (ซึ่งเกมส์จะแสดงผลได้ดี ถ้าจอเป็นแนวนอน) สำหรับในตอนนี้ผมจะเน้นไปที่ Silverlight Application และเราจะทำอย่างไรเมื่อมีการเปลี่ยนจากแนวตั้ง เป็นแนวนอนโดยให้ Application ของเราไม่ได้รับผลกระทบ

หน้าจอเริ่มต้นคือ “Portrait” อย่างเดียวเหรอ?

ถ้าคุณเริ่ม Project ใหม่ คุณจะเห็นสองพร๊อพเพอตี้ที่อยู่บนสุดของหน้า MainPage.xml คือ

สำหรับ SupportedOrientation เป็นการเซ็ตตำแหน่งหน้าจอแรกให้กับApplication ของคุณ โดยมีค่าอยู่ สามค่าคือ

• - Portrait (default)
• - Landscape
• - PortraitOrLandscape

สำหรับ Orientation เป็นค่าเริ่มต้นให้กับ Application ของคุณเมื่อมีการเริ่มต้นใหม่ ซึ่งมีอยู่หลายค่าที่คุณสามารถเพิ่มเติมเข้าไปได้ดังนี้

• - Landscape
• - LandscapeLeft
• - LandscapeRight
• - Portrait
• - PortraitDown
• - PortraitUp

ข้อแนะนำหากคุณต้องการใช้โหมด Landscape คุณควรกำหนดค่าใน SupportedOrientationเป็น Landscape ด้วย จะรายการด้านบน คุณไม่จำเป็นให้ Application เริ่มต้นแบบ Portrait หรือ Landscape เพียงอย่างเดียว คุณสามารถให้ Application ของคุณเริ่มจากมุมไหนก็ได้บนหน้าจอ

ปรับหน้าจอ App ตามใจคุณ

มีอยู่สองวิธีในการปรับแต่งค่า Orientation คือ แบบแรก คือกำหนดค่า SupportedOrientationเป็น “PortraitOrLandscape” ซึ่ง OS บนเครื่องจะช่วยคุณเองในจุดๆนี้ มีอยู่หลายกรณีที่ผมไม่แนะนำ เพราะจะทำให้ App ของคุณไม่พอดีกับหน้าจอบนเครื่อง แบบที่สองคือแก้ไขผ่าน Code ซึ่งผมจะแสดงตัวอย่างให้ในลำดับถัดไป

เริ่มหน้าจอแรกเป็นแบบแนวตั้งก่อน ตัวอย่างรูปด้านล่าง

คุณจะเห็นว่าในแนวนอนของ Application ปุ่มส่วนมากจะแสดงผลไม่ตรงตามที่ควรจะเป็น วิธีการจัดการง่าย เพียงแค่นำหัวข้อ “เครื่องคิดเลข” ทำให้หายไป เพราะผมเชื่อว่าผู้ใชงานทั่วไป ไม่ได้สนใจหากรู้จัก Application นั้นแล้ว ซึ่งจะทำให้ปุ่มตัวเลขสามารถเรียงตัวได้อย่างถูกต้อง ผมได้แก้ไข Code บางส่วนในหน้า MainPage.xaml.csในการแก้ไขให้ Application สามารถแสดงผลทั้งแนวตั้งและแนวนอน

จุดประสงค์หลักของบทความวันนี้ เพราะผมคิดว่านักพัฒนาควรให้ความสนใจในเรื่องการแสดงผล Application ทั้งแนวตั้งและแนวนอน ซึ่งคุณสามารถนำไปประยุกต์ให้ Application ของคุณให้มีความแตกต่างจาก Application อื่นๆได้
ผลที่ได้จากการแก้ไข Code เป็นดังนี้

การทำหน้าจอให้เหมาะสม จะส่งผลถึงการทำ Accelerometer ด้วย