Silverlight - เลย์เอาต์คงที่

รูปแบบการควบคุมมีความสำคัญและสำคัญมากสำหรับการใช้งานแอปพลิเคชัน ใช้เพื่อจัดกลุ่มองค์ประกอบ GUI ในแอปพลิเคชันของคุณ มีสิ่งสำคัญบางอย่างที่ควรพิจารณาในขณะเลือกแผงเค้าโครง พวกเขาคือ -

  • ตำแหน่งขององค์ประกอบลูก
  • ขนาดขององค์ประกอบลูก
  • การจัดวางองค์ประกอบลูกที่ทับซ้อนกันไว้ด้านบนของกันและกัน

การจัดเรียงพิกเซลคงที่ของการควบคุมจะไม่ทำงานหากมีการใช้แอปพลิเคชันกับความละเอียดหน้าจอที่แตกต่างกัน XAML มีชุดแผงเลย์เอาต์ในตัวมากมายเพื่อจัดเรียงองค์ประกอบ GUI ด้วยวิธีที่เหมาะสม

เราจะเริ่มต้นด้วยการดู simple fixedเค้าโครง จากนั้นเราจะดูที่Dynamicสถานการณ์เค้าโครงซึ่ง Silverlight ออกแบบมาเพื่อรองรับ เราจะเห็นคุณสมบัติและแนวคิดเกี่ยวกับเค้าโครงที่แทรกซึมองค์ประกอบอินเทอร์เฟซผู้ใช้ทั้งหมด

เค้าโครงคงที่

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

โดยปกติแล้วไฟล์ Canvasใช้สำหรับองค์ประกอบกราฟิก 2 มิติ (เช่นวงรีสี่เหลี่ยมผืนผ้า ฯลฯ ) ไม่ใช้สำหรับองค์ประกอบ UI เนื่องจากการระบุพิกัดสัมบูรณ์จะทำให้เกิดปัญหาเมื่อคุณปรับขนาดแปลหรือปรับขนาดแอปพลิเคชัน XAML ของคุณ

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไป properties ของ Canvas ชั้นเรียน

เลขที่ คุณสมบัติและคำอธิบาย
1

Background

รับหรือตั้งค่าแปรงที่เติมเต็มพื้นที่เนื้อหาของแผงควบคุม (สืบทอดจากแผงควบคุม)

2

Children

รับ UIElementCollection ขององค์ประกอบลูกของแผงนี้ (สืบทอดจากแผงควบคุม)

3

Height

รับหรือตั้งค่าความสูงที่แนะนำขององค์ประกอบ (สืบทอดมาจาก FrameworkElement)

4

ItemHeight

รับหรือตั้งค่าที่ระบุความสูงของรายการทั้งหมดที่อยู่ใน WrapPanel

5

ItemWidth

รับหรือตั้งค่าที่ระบุความกว้างของรายการทั้งหมดที่อยู่ภายใน WrapPanel

6

LogicalChildren

รับตัวแจงนับที่สามารถวนซ้ำองค์ประกอบลูกเชิงตรรกะขององค์ประกอบแผงนี้ (สืบทอดจากแผงควบคุม)

7

LogicalOrientation

การวางแนวของแผงควบคุมหากแผงรองรับเค้าโครงในมิติเดียว (สืบทอดจากแผงควบคุม)

8

LeftProperty

ระบุคุณสมบัติ Canvas ด้านซ้าย XAML ที่แนบมา

9

Margin

รับหรือกำหนดระยะขอบด้านนอกขององค์ประกอบ (สืบทอดมาจาก FrameworkElement)

10

Name

รับหรือตั้งชื่อระบุขององค์ประกอบ ชื่อนี้มีการอ้างอิงเพื่อให้โค้ดหลังเช่นโค้ดตัวจัดการเหตุการณ์สามารถอ้างถึงองค์ประกอบมาร์กอัปหลังจากที่สร้างขึ้นในระหว่างการประมวลผลโดยโปรเซสเซอร์ XAML (สืบทอดมาจาก FrameworkElement)

11

Orientation

รับหรือตั้งค่าที่ระบุมิติที่จัดเรียงเนื้อหาลูก

12

Parent

รับองค์ประกอบหลักเชิงตรรกะขององค์ประกอบนี้ (สืบทอดมาจาก FrameworkElement)

13

Resources

รับหรือตั้งค่าพจนานุกรมทรัพยากรที่กำหนดในเครื่อง (สืบทอดมาจาก FrameworkElement)

14

Style

รับหรือตั้งค่าสไตล์ที่ใช้โดยองค์ประกอบนี้เมื่อแสดงผล (สืบทอดมาจาก FrameworkElement)

15

TopProperty

ระบุคุณสมบัติ Canvas. Top XAML ที่แนบมา

16

Width

รับหรือกำหนดความกว้างขององค์ประกอบ (สืบทอดมาจาก FrameworkElement)

17

ZIndexProperty

ระบุคุณสมบัติที่แนบ Canvas.ZIndex XAML

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไป methods ของ Canvas.

เลขที่ วิธีการและคำอธิบาย
1

GetLeft

รับค่าของ Canvas คุณสมบัติ XAML ด้านซ้ายที่แนบมาสำหรับองค์ประกอบเป้าหมาย

2

GetTop

รับค่าของ Canvas คุณสมบัติที่แนบ XAML สูงสุดสำหรับองค์ประกอบเป้าหมาย

3

GetZIndex

รับค่าของคุณสมบัติ Canvas.ZIndex XAML ที่แนบมาสำหรับองค์ประกอบเป้าหมาย

4

SetLeft

ตั้งค่าของคุณสมบัติผ้าใบ XAML ด้านซ้ายที่แนบมาสำหรับองค์ประกอบเป้าหมาย

5

SetTop

ตั้งค่าของ Canvas คุณสมบัติที่แนบ XAML สูงสุดสำหรับองค์ประกอบเป้าหมาย

6

SetZIndex

ตั้งค่าคุณสมบัติที่แนบ Canvas.ZIndex XAML สำหรับองค์ประกอบเป้าหมาย

ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มองค์ประกอบลูกลงในไฟล์ Canvas. ด้านล่างนี้คือการใช้งาน XAML ซึ่ง Ellipse ถูกสร้างขึ้นภายใน Canvas ที่มีคุณสมบัติออฟเซ็ตที่แตกต่างกัน

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

เมื่อโค้ดด้านบนถูกคอมไพล์และดำเนินการคุณจะเห็นผลลัพธ์ต่อไปนี้