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

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

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

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

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

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

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

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

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

ด้านล่างนี้เป็นคุณสมบัติที่ใช้บ่อยที่สุดของ 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>

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