Silverlight - เค้าโครงแบบไดนามิก

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

Silverlight นำเสนอแผงควบคุมสองแผงพร้อมกลยุทธ์เค้าโครงแบบไดนามิก

  • StackPanel - ซึ่งจัดเรียงองค์ประกอบในแนวตั้งหรือแนวนอน

  • Grid - ซึ่งให้ระบบเค้าโครงเหมือนตารางหรือเหมือนตารางที่ยืดหยุ่น

แผงสแต็ค

แผงสแต็กเป็นแผงเค้าโครงที่เรียบง่ายและมีประโยชน์ใน XAML ในStack Panelองค์ประกอบลูกสามารถจัดเรียงเป็นบรรทัดเดียวได้ทั้งในแนวนอนหรือแนวตั้งตามคุณสมบัติการวางแนว มักใช้เมื่อใดก็ตามที่ต้องการสร้างรายการประเภทใด ๆ รายการการควบคุมใช้แผงสแต็กMenu, ListBox และ ComboBox เป็นแผงเค้าโครงภายในเริ่มต้น

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

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

Background

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

2

Children

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

3

Height

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

4

ItemHeight

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

5

ItemWidth

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

6

LogicalChildren

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

7

LogicalOrientation

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

8

Margin

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

9

Name

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

10

Orientation

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

11

Parent

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

12

Resources

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

13

Style

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

14

Width

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

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

<UserControl x:Class = "DynamicLayout.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"> 
      <StackPanel>
         <Button x:Name = "button" Content = "Button" Margin = "10" /> 
         <Button x:Name = "button1" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button2" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button3" Content = "Button" Margin = "10"/> 
      </StackPanel>  
   </Grid> 
	
</UserControl>

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

StackPanel พยายามจัดให้แต่ละองค์ประกอบมีพื้นที่มากเท่าที่ต้องการในทิศทางของการเรียงซ้อน

ตอนนี้ถ้าคุณปรับขนาดเบราว์เซอร์คุณจะเห็นว่าความกว้างของปุ่มก็เปลี่ยนไปเช่นกัน

กริด

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

  • Fixed value - เพื่อกำหนดขนาดคงที่ของหน่วยตรรกะ (1/96 นิ้ว)

  • Auto - จะใช้พื้นที่ซึ่งจำเป็นสำหรับการควบคุมในแถว / คอลัมน์นั้น ๆ

  • Star (*) - จะใช้พื้นที่ที่เหลือเมื่อ Auto และ fixed sized เต็มไป

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

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

Background

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

2

Children

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

3

ColumnDefinitions

รับรายการของวัตถุ ColumnDefinition ที่กำหนดบนอินสแตนซ์ของ Grid

4

Height

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

5

ItemHeight

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

6

ItemWidth

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

7

Margin

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

8

Name

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

9

Orientation

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

10

Parent

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

11

Resources

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

12

RowDefinitions

รับรายการของวัตถุ RowDefinition ที่กำหนดไว้ในอินสแตนซ์ของ Grid

13

Style

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

14

Width

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

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

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

GetColumn

รับค่าของคุณสมบัติที่แนบ Grid.Column XAML จาก FrameworkElement ที่ระบุ

2

GetColumnSpan

รับค่าของคุณสมบัติที่แนบ Grid.ColumnSpan XAML จาก FrameworkElement ที่ระบุ

3

GetRow

รับค่าของคุณสมบัติ Grid.Row XAML ที่แนบมาจาก FrameworkElement ที่ระบุ

4

SetColumn

ตั้งค่าของคุณสมบัติที่แนบ Grid.Column XAML บน FrameworkElement ที่ระบุ

5

SetRow

ตั้งค่าของคุณสมบัติ Grid.Row XAML ที่แนบมาบน FrameworkElement ที่ระบุ

6

SetRowSpan

ตั้งค่าของคุณสมบัติที่แนบ Grid.RowSpan XAML บน FrameworkElement ที่ระบุ

ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มองค์ประกอบลูกลงในตารางเพื่อระบุในรูปแบบตาราง ด้านล่างคือการใช้งาน XAML ซึ่งมีการเพิ่มองค์ประกอบ UI บางอย่าง

<UserControl x:Class = "DynamicLayout.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"> 
	
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "130" /> 
         <ColumnDefinition Width = "1*" /> 
         <ColumnDefinition Width = "2*" /> 
      </Grid.ColumnDefinitions>
		
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "50" /> 
      </Grid.RowDefinitions>  
		
      <TextBlock Grid.Column = "0" Grid.Row = "0" 
         Text = "Content that no longer fits, not even close here" 
         TextWrapping = "Wrap" /> 
			
      <Button Grid.Column = "1" Grid.Row = "0" Content = "OK" />  
      <Ellipse Grid.Column = "1" Grid.Row = "1"  Fill = "Aqua" /> 
      <Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20" />  
		
   </Grid> 
	
</UserControl>

คอลัมน์แรกตั้งค่าเป็นขนาดคงที่ องค์ประกอบใด ๆ ในคอลัมน์นี้จะมีความกว้างนั้นGrid.Column และ Grid.Row คุณสมบัติระบุว่ารายการเหล่านี้อยู่ในแถวและคอลัมน์ใดและเป็นคุณสมบัติที่ใช้ 0

คอลัมน์ที่สองหรือสามมีความกว้าง 1* และ 2*. ซึ่งหมายความว่าพวกเขาแบ่งปันพื้นที่ว่างที่เหลือหลังจากคอลัมน์ความกว้างคงที่และอัตโนมัติใช้พื้นที่ไปแล้ว ความสำคัญของ1 และ 2 นี่คือไฟล์ 2* คอลัมน์ได้รับพื้นที่สองเท่าของ 1* คอลัมน์.

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

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