แชร์ผ่าน

Elevation ตัวควบคุม

  • บทความ

ตัวควบคุมที่ใช้สร้างการ์ดและเมนูลอย

ตัวควบคุม Elevation

Description

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

ไปที่หน้า ลักษณะการยกระดับ Fluent UI เพื่อแนวทางปฏิบัติที่ดีที่สุด

คุณสมบัติ

คุณสมบัติที่สำคัญ

คุณสมบัติ Description
Depth ความลึกของเงา
HoverDepth ความลึกของเงาที่ปรากฏบนโฮเวอร์

คุณสมบัติ Style

คุณสมบัติ Description
FillColor สีพื้นหลังของตัวควบคุม Elevation
HoverFillColor สีของพื้นหลังของตัวควบคุม Elevation ที่ปรากฏบนโฮเวอร์
PaddingLeft ช่องว่างขอบด้านซ้ายระหว่างการ์ดและขอบเขตการควบคุม
PaddingRight ช่องว่างขอบด้านขวาระหว่างการ์ดและขอบเขตการควบคุม
PaddingTop ช่องว่างขอบด้านบนระหว่างการ์ดและขอบเขตการควบคุม
PaddingBottom ช่องว่างขอบด้านล่างระหว่างการ์ดและขอบเขตการควบคุม
DarkOverlay เมื่อเปิดใช้งาน แสดงเอฟเฟ็กต์การซ้อนทับสีเข้มในพื้นที่ที่เติมใหม่

การจัดรูปแบบเนื้อหาเหนือ Elevation พร้อมคอนเทนเนอร์เค้าโครง

  1. เพิ่มตัวควบคุม Container ลงในหน้าจอ (ไม่ใช่ Horizontal container หรือ Vertical container)

  2. เพิ่มส่วนประกอบ Elevation ในคอนเทนเนอร์

  3. ตั้งค่าคุณสมบัติ Elevation เพื่อให้พอดีกับ Container หลัก:

    คุณสมบัติ มูลค่า
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. ตั้งค่าคุณสมบัติ PaddingRight, PaddingTop และ PaddingBottom เพื่ออ้างอิง Self.PaddingLeft

  5. เลือก Depth ที่ต้องการและปรับค่าของ PaddingLeft เพื่อให้มีช่องว่างเพียงพอไม่ให้เงาตัดขาด

  6. ใส่ Vertical container เป็น Container หลักเดียวกัน ใช้เพื่อโฮสต์เนื้อหาของการ์ด

  7. ตั้งค่าคุณสมบัติ Vertical container เพื่อให้สอดคล้องกับสายตาของขอบของส่วนประกอบ Elevation:

    คุณสมบัติ มูลค่า
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. เพิ่มเนื้อหาลงใน Vertical container เพื่อเติมบัตร

ตัวอย่างการยกระดับ

ข้อจำกัด

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น