WPF - 元素樹

許多技術中的元素和元件都是以樹狀結構排列的，這樣程式設計師就可以輕鬆地處理物件並更改應用程式的行為。Windows Presentation Foundation (WPF) 以物件的形式擁有一個全面的樹狀結構。在 WPF 中，完整的物件樹有兩種概念化方式：

• 邏輯樹結構
• 視覺樹結構

藉助這些樹結構，您可以輕鬆建立和識別 UI 元素之間的關係。大多數情況下，WPF 開發人員和設計師要麼使用過程語言建立應用程式，要麼在 XAML 中設計應用程式的 UI 部分，同時牢記物件樹結構。

邏輯樹結構

在 WPF 應用程式中，XAML 中 UI 元素的結構表示邏輯樹結構。在 XAML 中，UI 的基本元素由開發人員宣告。WPF 中的邏輯樹定義以下內容：

• 依賴屬性
• 靜態和動態資源
• 根據其名稱等繫結元素。

讓我們看看以下示例，其中建立了一個按鈕和一個列表框。

<Window x:Class = "WPFElementsTree.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button x:Name = "button" Height = "30" Width = "70" Content = "OK" Margin = "20" /> 
		
      <ListBox x:Name = "listBox" Height = "100" Width = "100" Margin = "20"> 
         <ListBoxItem Content = "Item 1" /> 
         <ListBoxItem Content = "Item 2" /> 
         <ListBoxItem Content = "Item 3" /> 
      </ListBox> 
		
   </StackPanel> 
	
</Window> 

如果您檢視 XAML 程式碼，您會觀察到一個樹狀結構，即根節點是 Window，在根節點內部只有一個子節點，即 StackPanel。但 StackPanel 包含兩個子元素，按鈕和列表框。列表框還有三個子列表框項。

視覺樹結構

在 WPF 中，視覺樹的概念描述了視覺物件的結構，如 Visual 基類所示。它表示呈現到輸出螢幕的所有 UI 元素。

當程式設計師想要為特定控制元件建立模板時，他實際上是在呈現該控制元件的視覺樹。對於那些出於效能和最佳化原因想要繪製低階控制元件的人來說，視覺樹也非常有用。

在 WPF 應用程式中，視覺樹用於：

• 呈現視覺物件。
• 呈現佈局。
• 路由事件大多沿著視覺樹傳播，而不是邏輯樹。

要檢視上面包含按鈕和列表框的簡單應用程式的視覺樹，讓我們編譯並執行 XAML 程式碼，您將看到以下視窗。

應用程式執行時，您可以在“即時視覺樹”視窗中檢視正在執行的應用程式的視覺樹，該視窗顯示此應用程式的完整層次結構，如下所示。

視覺樹通常是邏輯樹的超集。您可以在此處看到所有邏輯元素也存在於視覺樹中。因此，這兩棵樹實際上只是構成 UI 的同一組物件的兩種不同檢視。

• 邏輯樹省略了許多細節，使您能夠專注於使用者介面的核心結構並忽略其呈現方式的細節。

• 邏輯樹是您用於建立使用者介面基本結構的內容。

• 如果您專注於演示，則視覺樹會很有用。例如，如果您希望自定義任何 UI 元素的外觀，則需要使用視覺樹。