如何實現具有層次結構的 TreeView 模版使用

資料模板 (DataTemplate) 和資料繫結 (Data Binding)

為了把資料和介面進行關聯，我們要做 3 件事:

1、在 MainWindow.xaml 中新增一個 TreeView 控制元件

<TreeViewx:Name="tv">
</TreeView>

2、將資料繫結到 TreeView 控制元件上在 WPF 中實現資料繫結的方法主要有2種: 在 XAML 中宣告或在 Code 中指定。詳細資訊請參考 MSDN: 由於此處的 TreeView 頂層節點需要 ParentID 為 NULL 的資料，所以我採用了在 Code 中指定的方式。

///

<summary>
/// MainWindow.xaml 的互動邏輯
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 新增 MainWindow.Loaded 事件
this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// 在程式碼中為 TreeView 控制元件設定 ItemsSource 屬性
var dc = new CSDNBlogDataContext();
var items = dc.Departments.Where(item =>item.ParentID == null);
tv.ItemsSource = items.ToArray();
}
}

關於 LINQ 請參考 MSDN: 完成以上工作並執行程式，將看到類似下圖中顯示的介面: 未定義資料模板

從上面的圖片可以看出，每一個 ListViewItem 都綁定了一個 Department 物件，由於我們尚未告訴 ListViewItem 如何顯示 Department 物件的內容(即屬性)，所以系統預設分配了一個 TextBlock 控制元件，並將 Department.ToString() 的資訊給呈現了出來。那 Department 的物件內容該如何顯示呢?

3、為 TreeView 控制元件新增資料模板 (DataTemplate)

打個比方，當前工程中用到的資料物件是 Department，而每個 Department 都擁有4個屬性: DepartmentID、ParentID、Name 和 Type。當我們將每個 Department 與 TreeViewItem 進行關聯(即資料繫結)之後，我們應該告訴 TreeViewItem 如何呈現與其關聯的 Department 物件，簡單理解就是如何顯示 Department 的那4個屬性。而 DataTemplate 就是用來定義這個結構的東東。

通常，描述資料物件的視覺化結構，直接使用 DataTemplate 就可以了。但是當前工程中的 Department 是可以包含“子部門”的資料項，而且其深度未知。所以，此處使用的是 HierarchicalDataTemplate 類，即允許包含“子資料項”的 DataTemplate.

例如:

a、使用一個 TextBlock 物件，僅用於呈現與該 ListViewItem 關聯的 Department 物件的 Name 屬性

<TreeView.ItemTemplate>
<HierarchicalDataTemplateItemsSource="{Binding Path=Children}">
<TextBlockText="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>

僅繫結名稱

b、稍微複雜一點的結構，呈現 Name(Type) 形式的2個屬性。

<TreeView.ItemTemplate>
<HierarchicalDataTemplateItemsSource="{Binding Path=Children}">
<StackPanelOrientation="Horizontal">
<TextBlockText="{Binding Path=Name}"/>
<TextBlockText="("/>
<TextBlockText="{Binding Path=Type}"/>
<TextBlockText=")"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>

通過上面2個簡單的示例，我們應該對 DataTemplate 是如何描述資料物件的視覺化結構有了一個直觀的瞭解。

接下來，將介紹如何實現文字的縱向顯示，這裡有個概念需要先說明下:

一個字串 (String) 可以被看作是一個字元陣列 (Char[])

根據這一特性，我們可以將一個字串作為資料來源繫結到某個支援 ItemsSource 或 IsItemsHost 屬性的控制元件上。例如: 將 Name 屬性指定給 StackPanel、Grid、ListBox 或者 ItemsControl 等物件。

同時，基於 WPF 的資料轉換規則，該字串中的每個 Char 物件都將被自動轉換為 String 物件輸出到使用者介面。

根據上述特徵，修改一下 DataTemplate 就能實現文字的縱向顯示了:

<TreeView.ItemTemplate>
<HierarchicalDataTemplateItemsSource="{Binding Path=Children}">
<!--<StackPanelOrientation="Horizontal">
<TextBlockText="{Binding Path=Name}"/>
<TextBlockText="("/>
<TextBlockText="{Binding Path=Type}"/>
<TextBlockText=")"/>
</StackPanel>-->
<ItemsControlItemsSource="{Binding Path=Name}">
<ItemsControl.Style>
<StyleTargetType="{x:Type ItemsControl}">
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:Type ItemsControl}">
<Grid>
<ItemsPresenterHorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.Style>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlockx:Name="block"RenderTransformOrigin="0.5,0.5"Text="{Binding}"TextAlignment="Center"/>
<DataTemplate.Triggers>
<DataTriggerBinding="{Binding}"Value="(">
<SetterTargetName="block"Property="RenderTransform">
<Setter.Value>
<RotateTransformAngle="90"/>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTriggerBinding="{Binding}"Value=")">
<SetterTargetName="block"Property="RenderTransform">
<Setter.Value>
<RotateTransformAngle="90"/>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTriggerBinding="{Binding}"Value="-">
<SetterTargetName="block"Property="RenderTransform">
<

相關推薦

如何實現具有層次結構的 TreeView 模版使用

資料模板 (DataTemplate) 和資料繫結 (Data Binding) 為了把資料和介面進行關聯，我們要做 3 件事: 1、在 MainWindow.xaml 中新增一個 TreeView 控制元件 <TreeViewx:Name="tv"&g

如何實現具有層次結構的 TreeView (WPF/TreeView/Style/Template)

打造使用者介面 (UI) 在上一節中，我們已經完成了資料的繫結工作，並通過 DataTemplate 實現了 Name 的縱向顯示。本節將主要介紹下面幾個內容: 1、對 TreeView 進行佈局，實現層次結構的檢視 2、設定 TreeViewItem 的樣式，令其在不同操

作業系統知識點總結（十五）檔案層次結構，目錄實現和檔案實現

（一）檔案層次結構現代作業系統有多種檔案系統型別（如FAT32、NTFS、 ext2、ext3、ext4等），因此檔案系統的層次結構也不盡相同。圖4-11是一種合理的層次結構。圖4-11檔案系統層次結構 1) 使用者呼叫介面檔案系統為使用者提供與檔案及目錄有

程式設計實現一個棧結構，用陣列來實現，具有入棧、出棧操作。

#include <stdio.h> #include <stdlib.h>typedef struct stack { int point; signed char mem[1024];}STACK;STACK g_statck ={0}; //定

樹狀結構---用jquery的小外掛jquery.treeview實現樹狀結構

用jquery的小外掛jquery.treeview實現樹狀結構步驟： 1)在頁面中引入相應的js、和css檔案(還有相應的圖片) 

【C++資料結構】模版類實現雙迴圈連結串列的基本操作

單鏈表結構為我們提供方便分資料插入和刪除工作，美中不足的是查詢資料不方便，對於單鏈表查詢資料至少要遍歷一邊．　　為此我們提出雙鏈表結構，從而方便的查詢資料．給出雙鏈表的一般結構：一種是帶頭結點（哨兵位）的管理方式，另一種是帶管理節點管理方式。但是我們不建議採用

C語言實現數據結構串（堆分配存儲表示法）

+= 賦值 size ++ fine hello n) clu 刪除字符串 ———————————————————————————————————————————— 堆分配存儲表示法 —————————————————————————————————————————

了解AutoCAD對象層次結構 ——應用程序

圖標接下來 sin 應用窗口 .com 不能實現 center 想象這樣一個場景：當您開始一天的工作，坐到電腦前面，用鼠標雙擊桌面上的AutoCAD Civil 3D圖標，這時一個AutoCAD Civil 3D應用程序將運行起來。打開Windows任務管理器，我們可

Angular_(作用域層次結構)

char level mod utf root -c func angular app html部分.......................................................................................

c++實現數據結構1.順序表

seq 程序主程 num c++ round private gravity ext 頭文件seqlist.h #ifndef _SEQLIST_H_ #define _SEQLIST_H_ #include<iostream> using namesp

如何實現echarts組織結構圖節點的收縮

點名 3.0 不讓信息修改 conf strong 值引用 option echarts本身沒有組織結構圖的節點收縮功能，因為項目需求要用到此功能。引入的echarts必須是2版本的，因為3.0取消了對組織結構圖的支持。下載2版本的源碼，找到關於onclick事件那部

使用 MySQL 管理層次結構的數據

而不是 order 建立添加節點 number 啟用左移 gen and 概述我們知道，關系數據庫的表更適合扁平的列表，而不是像 XML 那樣可以直管的保存具有父子關系的層次結構數據。首先定義一下我們討論的層次結構，是這樣的一組數據，每個條目只能有一個父條目，可以有

javaFX樹結構treeview使用

javafx 結構 ces sed resources resource 節點 stub generated //---------------------------------------------------在JavaFX Scene Builder裏已經加了wid

javascript實現數據結構----棧

peek 有序 javascrip items 修改添加數據結構 java turn //棧是一種遵從後進先出原則的有序集合。 //新添加的或待刪除的元素都保存在棧的末尾，稱作棧頂,另一端就叫棧底 //在棧裏，新元素都靠近棧頂，舊元素都叫做棧底

python實現一個層次聚類方法

mac ima 優先隊列 () don 標簽中位數 filepath normal 層次聚類(Hierarchical Clustering) 一.概念　　層次聚類不需要指定聚類的數目，首先它是將數據中的每個實例看作一個類，然後將最相似的兩個類合並，該過程叠代計算只到剩

作業題：輸入4個整數，找出其中最大的數。用一個函數來實現. 分別使用結構化方法和函數嵌套的方法。

system 是否進行如果 div 使用 clu 函數整型之前在main()函數中的思路是： #include <iostream> using namespace std; int main(){ //求四個數中最大的數？ /

c語言實現按層次（廣度優先）非遞歸遍歷二叉鏈樹

child str sizeof att col std 二叉樹頭結點 oot 1 #include<stdio.h> 2 #include<conio.h> 4 #include<malloc.h> 5 typedef cha

iOS 的視圖層次結構、繼承關系及常用結構體探討

typedef round tof 圖層矩形 send 其它 mov uiscreen UIView表示屏幕上的一塊矩形區域，它在App中占有絕對重要的地位，因為IOS中幾乎所有可視化控件都是UIView的子類。負責渲染區域的內容，並且響應該區域內發生的觸摸事件

JavaScript學習總結(二十一)——使用JavaScript的數組實現數據結構中的隊列與堆棧

運行 icu wql dem aix gaps sdg kml sam 今天在項目中要使用JavaScript實現數據結構中的隊列和堆棧，這裏做一下總結。一、隊列和堆棧的簡單介紹 1.1、隊列的基本概念　　隊列:是一種支持先進先出(FIFO)的集合,即先被插入的數據,先

xBIM IFC 層次結構

目錄插入 %20 clas web 基本 htm cnblogs ref 目錄 xBIM 應用與學習 (一） xBIM 應用與學習 (二） xBIM 基本的模型操作 xBIM 日誌操作 XBIM 3D 墻壁案例

如何實現具有層次結構的 TreeView 模版使用

相關推薦