การออกแบบ Responsive ด้วยคอนเทนเนอร์

Power Apps เบื้องต้น

Luise Freese

Azure & Power Platform Architect

ทำไมต้อง Responsive?

 

  • แอปเดียวกันเปิดได้ทั้งบน โทรศัพท์ แท็บเล็ต และแล็ปท็อป
  • เค้าโครงแบบตายตัว ถูกตัด บนหน้าจอเล็ก และ ดูไม่เข้าที่ บนหน้าจอใหญ่
  • Responsive คือเค้าโครงที่ ปรับตัวได้

$$

โทรศัพท์ แท็บเล็ต และแล็ปท็อปแสดงแอปเดียวกันที่ปรับเค้าโครงจากคอลัมน์เดียวเป็นหลายคอลัมน์

Power Apps เบื้องต้น

คอนเทนเนอร์เค้าโครงสมัยใหม่

ภาพประกอบเปรียบเทียบคอนเทนเนอร์เค้าโครงแนวตั้งและแนวนอน กับการจัดเรียงตัวควบคุมย่อยแบบซ้อนกันเทียบกับเรียงข้างกัน

 

  • คอนเทนเนอร์เค้าโครงแนวตั้ง จัดเรียงรายการย่อยจากบนลงล่าง
  • คอนเทนเนอร์เค้าโครงแนวนอน จัดเรียงรายการย่อยจากซ้ายไปขวา
  • ตัวควบคุมสมัยใหม่ ปรับเข้ากับพื้นที่ที่มี
Power Apps เบื้องต้น

ความกว้างและความสูงแบบยืดหยุ่น

 

  • FlexibleWidth และ FlexibleHeight
  • เมื่อ เปิด ตัวควบคุมจะ ขยาย เต็มคอนเทนเนอร์
  • เมื่อ ปิด ตัวควบคุมจะคงขนาด ตายตัว

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps เบื้องต้น

LayoutMinWidth กับ LayoutMinHeight

เปรียบเทียบโทรศัพท์กับแท็บเล็ต แสดง LayoutMinWidth เป็นจุดเปลี่ยนที่เค้าโครงสลับจากคอลัมน์เดียวเป็นแผงด้านข้างพร้อมเนื้อหา

 

  • คอนเทนเนอร์ต้องการ พื้นที่เพียงพอ เพื่อจัดวางได้อย่างถูกต้อง
  • LayoutMinWidth คือ ความกว้างต่ำสุด ก่อนที่จะจัดเรียงใหม่
  • ทำให้เกิด เค้าโครงที่ต่างกัน ระหว่างโทรศัพท์กับแท็บเล็ต
Power Apps เบื้องต้น

การตั้งค่าการแสดงผลของแอป

 

  • Settings → Display กำหนดทิศทางและขนาด
  • App layout: Fixed ซูมเป็นอัตราส่วนเดียว ส่วน Responsive ปรับตามหน้าจอ
  • ทดสอบที่ หลายขนาด

$$

หน้าต่าง Settings ของ Power Apps Studio ในแท็บ Display แสดงตัวเลือกเค้าโครง ทิศทาง และขนาดของ canvas

Power Apps เบื้องต้น

เค้าโครงสำเร็จรูป

ภาพหน้าจอจริงของเมนู New screen ใน Power Apps Studio แสดงเทมเพลตเค้าโครงสำเร็จรูป ได้แก่ Blank, Split screen, Sidebar, Header and footer, Approval request และ Welcome screen พร้อมภาพตัวอย่างขนาดเล็กของแต่ละแบบ

 

  • + New screen มาพร้อม เทมเพลตเค้าโครงสำเร็จรูป
  • Sidebar, Header and footer, Split screen ปรับได้ตามหน้าจออยู่แล้ว
  • จุดเริ่มต้นที่แนะนำ สำหรับแอป Responsive แรก
Power Apps เบื้องต้น

สิ่งที่จะสร้าง

$$

ห่อหุ้มตัวควบคุมด้วย คอนเทนเนอร์เค้าโครง · สลับระหว่าง ขนาดอุปกรณ์ · ดูแอป ตอบสนอง

ภาพประกอบแอปบนโทรศัพท์ แท็บเล็ต และแล็ปท็อป แสดงเค้าโครงแกลเลอรีที่ปรับตามขนาดหน้าจอแต่ละแบบ

Power Apps เบื้องต้น

มาฝึกกันเถอะ!

Power Apps เบื้องต้น

Preparing Video For Download...