การควบคุมคอนเทนเนอร์ตารางใน Power Apps (ตัวอย่าง)

[บทความนี้เป็นเอกสารก่อนวางจําหน่ายและอาจมีการเปลี่ยนแปลง]

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

คอนเทนเนอร์นี้ทํางานเหมือนกับเส้นตารางสไตล์ CSS คุณกําหนด แถวและคอลัมน์ และตั้งค่าตําแหน่งที่แน่นอนสําหรับแต่ละคอมโพเนนต์ย่อยโดยใช้คุณสมบัติ

สําคัญ

• คุณลักษณะนี้อยู่ในพรีวิว
• คุณลักษณะตัวอย่างไม่ได้มีไว้สําหรับการใช้งานด้านการผลิตและอาจจํากัดฟังก์ชันการทํางาน คุณลักษณะเหล่านี้จะอยู่ภายใต้ ข้อกําหนดการใช้เพิ่มเติม และมีให้บริการก่อนการเปิดตัวอย่างเป็นทางการเพื่อให้ลูกค้าสามารถเข้าถึงและให้คําติชมได้ก่อน
• คุณลักษณะนี้กำลังอยู่ในระหว่างกระบวนการเปิดตัวและอาจยังไม่มีให้บริการในภูมิภาคของคุณ

คำอธิบาย

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

• วางคอมโพเนนต์ย่อยในรูปแบบ เส้นตาราง
• ระบุ แถวและคอลัมน์เริ่มต้นและสิ้นสุด สําหรับแต่ละรอง
• ทําการปรับแบบตอบสนองเมื่อคอนเทนเนอร์หรือขนาดหน้าจอเปลี่ยนแปลง
• ควบคุมการจัดแนว ระยะห่าง และโอเวอร์โฟลว์ภายในเส้นตาราง

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

คุณสมบัติการแสดงผล

• ช่องว่าง – ระยะห่างเป็นพิกเซลระหว่างคอมโพเนนต์ย่อยภายในเส้นตาราง
• คอลัมน์ – จํานวนคอลัมน์ในเค้าโครงเส้นตาราง
• แถว – จํานวนแถวในเค้าโครงเส้นตาราง

ขนาดและตำแหน่ง

• X – ระยะห่างแนวนอนจากขอบด้านซ้ายของคอนเทนเนอร์หลัก (หรือหน้าจอถ้าไม่มีพาเรนต์)
• Y – ระยะห่างแนวตั้งจากขอบด้านบนของคอนเทนเนอร์หลัก (หรือหน้าจอถ้าไม่มีพาเรนต์)
• Width – ระยะห่างระหว่างขอบด้านซ้ายและด้านขวาของตัวควบคุม
• Height – ระยะห่างระหว่างขอบด้านบนและด้านล่างของตัวควบคุม
• ช่องว่าง ภายใน - ระยะห่างระหว่างขอบคอนเทนเนอร์และส่วนประกอบย่อย

สีและเส้นขอบ

• Color – สีพื้นหน้าของคอนเทนเนอร์ ใช้สําหรับเส้นขอบและข้อความ ถ้ามี
• เส้น ขอบ
  • Style – ชนิดของเส้นขอบ: ทึบ, เส้นประ, จุด หรือ ไม่มี
  • ความหนา – ความกว้างของเส้นขอบเป็นพิกเซล
  • Color – สีของเส้นขอบ
• รัศมีเส้นขอบ – องศาที่มุมของคอนเทนเนอร์จะถูกปัดเศษขึ้น คุณสามารถใช้การตั้งค่านี้กับทุกมุมอย่างสม่ําเสมอหรือแยกเป็นแต่ละมุมในการตั้งค่าขั้นสูง
• เงาเมื่อปล่อย – เอฟเฟ็กต์เงาที่นําไปใช้กับคอนเทนเนอร์ ตัวเลือก: ไม่มี, เบา, ปานกลาง หรือ หนัก

การมองเห็น

• Visible – กําหนดว่าจะแสดงคอนเทนเนอร์ตารางหรือไม่ สลับเปิดหรือปิด

คุณสมบัติของเค้าโครงเส้นตาราง (เฉพาะรอง)

• คอลัมน์ เริ่มต้น / สิ้นสุดคอลัมน์ – กําหนดคอลัมน์เริ่มต้นและสิ้นสุดสําหรับคอมโพเนนต์ย่อย
• แถวเริ่มต้น/สิ้นสุดแถว – กําหนดแถวเริ่มต้นและสิ้นสุดสําหรับคอมโพเนนต์ย่อย

ตัวอย่าง

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

2. สร้างหน้าจอใหม่

3. จากบานหน้าต่าง แทรก ภายใต้ เค้าโครง ให้เลือก คอนเทนเนอร์เส้นตาราง

4. ตั้งค่าคุณสมบัติคอนเทนเนอร์เพื่อให้ได้เต็มหน้าจอ:

   • X = 0
   • Y = 0
   • ความกว้าง = Parent.Width
   • ความสูง = Parent.Height

5. เพิ่มคอมโพเนนต์ย่อยต่างๆ เช่น ปุ่ม การป้อนข้อความ ไอคอน และสื่อ สําหรับแต่ละลูก ให้ตั้งค่าคุณสมบัติตําแหน่งเส้นตาราง:

   • คอลัมน์เริ่มต้น/สิ้นสุด
   • แถวเริ่มต้น/สิ้นสุด
   • จัดแนวในเซลล์

6. กด F5 เพื่อแสดงตัวอย่าง ปรับขนาดหน้าจอและสังเกตว่าส่วนประกอบย่อย ยังคงอยู่ในตําแหน่งตาราง และปรับตามการตอบสนองอย่างไร