ตัวควบคุมคอนเทนเนอร์แนวนอนใน Power Apps

ตัวควบคุมคอนเทนเนอร์แนวนอนจะกําหนดตําแหน่งของส่วนประกอบย่อยเพื่อที่คุณจะไม่ต้องตั้งค่า X, Y สําหรับส่วนประกอบภายในคอนเทนเนอร์

คำอธิบาย

ตัวควบคุมคอนเทนเนอร์แนวนอนจะกระจายช่องว่างที่พร้อมใช้งานไปยังส่วนประกอบย่อยตามการตั้งค่ารวมถึงกําหนดการจัดแนวของส่วนประกอบย่อย

คุณสมบัติ

BorderColor – สีเส้นขอบของตัวควบคุม

BorderStyle – กําหนดว่าเส้นขอบของตัวควบคุมจะเป็น เส้นทึบเส้นประเส้นไข่ปลา หรือ ไม่มี

BorderThickness – ความหนาของเส้นขอบของตัวควบคุม

สี - สีของการควบคุมคอนเทนเนอร์

เงาเมื่อปล่อย - เพิ่มลักษณะพิเศษเงารอบตัวควบคุม

Fill – สีพื้นหลังของตัวควบคุม

Height – ระยะห่างระหว่างขอบด้านบนและด้านล่างของตัวควบคุม

ทิศทาง - กําหนดทิศทางการจัดวางคอนเทนเนอร์สําหรับส่วนประกอบย่อย แนวนอนและแนวตั้ง

จัดชิดขอบ (แนวตั้ง) - กําหนดวิธีการจัดแนวองค์ประกอบย่อยกับแกนหลัก Start, End, Center, Space Between

จัดแนว (แนวนอน) - กําหนดวิธีการจัดตําแหน่งองค์ประกอบย่อยในคอนเทนเนอร์ ในแกนปิด (ตรงกันข้ามจาก LayoutDirection) Start, Center, End, Stretch

ช่องว่าง - กําหนดช่องว่างระหว่างคอนเทนเนอร์คอมโพเนนต์ย่อยในหน่วยพิกเซล

โอเวอร์โฟลว์แนวนอน - กําหนดว่าคอนเทนเนอร์จะแสดงแถบเลื่อนหรือลบเนื้อหาออกเมื่อมีขนาดใหญ่เกินไปที่จะพอดีหรือไม่ เลื่อนและซ่อน

RadiusBottomLeft – องศาที่มุมล่างซ้ายของตัวควบคุมจะถูกปัดเศษขึ้น

RadiusBottomRight – องศาที่มุมล่างขวาของตัวควบคุมจะถูกปัดเศษขึ้น

RadiusTopLeft – องศาที่มุมบนซ้ายของตัวควบคุมจะถูกปัดเศษขึ้น

RadiusTopRight – องศาที่มุมบนขวาของตัวควบคุมจะถูกปัดเศษขึ้น

โอเวอร์โฟลว์แนวตั้ง - กําหนดว่าคอนเทนเนอร์จะแสดงแถบเลื่อนหรือลบเนื้อหาออกเมื่อมีขนาดใหญ่เกินไปที่จะพอดีหรือไม่ เลื่อนและซ่อน

Wrap - กําหนดว่าเนื้อหาจะตัดเป็นแถวหรือคอลัมน์ใหม่เมื่อไม่พอดีหรือไม่

จัดแนวในคอนเทนเนอร์ - กําหนดวิธีการจัดแนวแต่ละคอมโพเนนต์ไปยังองค์ประกอบหลัก ค่าเริ่มต้น ซึ่งตั้งค่าตามคอนเทนเนอร์ จะรับทอดค่าจากคุณสมบัติหลัก LayoutAlignItems ในขณะที่คุณสมบัติอื่น ๆ สามารถใช้เพื่อกําหนดการจัดแนวสําหรับคอมโพเนนต์ย่อยแต่ละรายการ ตั้งค่าโดยคอนเทนเนอร์เริ่มต้นสิ้นสุดกึ่งกลาง และ ยืด

ส่วนการเติม - กําหนดวิธีการที่แต่ละคอมโพเนนต์ขยายขึ้นเมื่อมีอสังหาริมทรัพย์หน้าจอเพิ่มเติมที่กําหนดให้กับองค์ประกอบหลัก ตัวเลขแสดงถึงส่วนหนึ่งของพื้นที่ว่างเพิ่มเติมที่กําหนดให้กับคอมโพเนนต์จากพื้นที่ว่างเพิ่มเติมที่มีอยู่ทั้งหมดที่อ้างสิทธิ์โดยโหนดลูกของพื้นที่หลัก ตัวอย่างเช่น หากเด็ก A ได้ Fill portions ตั้งค่าเป็น 1 และ child B ได้ Fill portions ตั้งค่าเป็น 2 child A จะได้รับพื้นที่เพิ่มเติม 1/3 ในขณะที่เด็ก B มีพื้นที่ว่างเพิ่มเติม 2/3

ความกว้างต่ําสุด - แสดงขนาดต่ําสุดของคอมโพเนนต์ในทิศทางของ Fill portions (นั่นคือ พาเรนต์)Direction

PaddingBottom – ระยะห่างระหว่างข้อความในตัวควบคุมและขอบด้านล่างของตัวควบคุมนั้น

PaddingLeft – ระยะห่างระหว่างข้อความในตัวควบคุมและขอบด้านซ้ายของตัวควบคุมนั้น

PaddingRight – ระยะห่างระหว่างข้อความในตัวควบคุมและขอบด้านขวาของตัวควบคุมนั้น

PaddingTop – ระยะห่างระหว่างข้อความในตัวควบคุมและขอบด้านบนสุดของตัวควบคุมนั้น

Visible – กําหนดว่าตัวควบคุมแสดงอยู่หรือถูกซ่อนอยู่

Width – ระยะห่างระหว่างขอบด้านซ้ายและด้านขวาของตัวควบคุม

X – ระยะห่างระหว่างขอบด้านซ้ายของตัวควบคุมและขอบด้านซ้ายของคอนเทนเนอร์หลัก (หน้าจอ ถ้าไม่มีคอนเทนเนอร์หลัก)

Y – ระยะห่างระหว่างขอบด้านบนของตัวควบคุมและขอบด้านบนของคอนเทนเนอร์หลัก (หน้าจอ ถ้าไม่มีคอนเทนเนอร์หลัก)

ตัวอย่าง

1. สร้าง แอปพื้นที่ทำงานเปล่า ด้วยเค้าโครง แท็บเล็ต

2. เลือก ไฟล์>ตั้งค่า>ขนาดหน้าจอ + การวางแนว และปิดใช้งาน สเกลให้พอดีล็อกอัตราส่วนกว้างยาว และ ล็อกการวางแนว และเลือก นําไปใช้

3. ตอนนี้จากบานหน้าต่าง แทรก ในแถบด้านข้างด้านซ้าย ภายใต้แท็บ เค้าโครง เลือก คอนเทนเนอร์แนวนอน

   

4. ตั้งค่าคุณสมบัติต่อไปนี้เพื่อใช้พื้นที่ที่พร้อมใช้งานเต็มรูปแบบของหน้าจอ:

   1. X = 0
   2. Y= 0
   3. ความกว้าง = Parent.Width
   4. ความสูง = Parent ความสูง

5. เพิ่มปุ่มสองถึงสามปุ่ม การป้อนข้อความ สื่อ ไอคอน และเลือก F5 เพื่อดูวิธีที่แอปปรับไปตามหน้าจอ