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

阿新 • • 發佈：2019-02-06

打造使用者介面 (UI)

在上一節中，我們已經完成了資料的繫結工作，並通過 DataTemplate 實現了 Name 的縱向顯示。本節將主要介紹下面幾個內容:

1、對 TreeView 進行佈局，實現層次結構的檢視

2、設定 TreeViewItem 的樣式，令其在不同操作下呈現出相應的狀態

值得一提的是，在 dotNET 4.0 中提供的標準控制元件引入了 VisualStateGroup 類，有興趣的朋友可以在自定義控制元件中試試。由於此處部分狀態存在互斥的情況，所以仍使用了3.0的動畫定義方式。

1、對 TreeView 進行佈局，實現層次結構的檢視

預設情況下 TreeView 中的節點是自上而下排列，從左向右展開。在 WPF 中要改變這樣的佈局並不困難，只需要改變承載節點的容器即可。

<TreeView.Style>
    <Style TargetType="{x:Type TreeView}">
        <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush"
                Value="#FFB0C4DE"/>
        <Setter Property="BorderThickness"
                Value="1"/>
        <Setter Property="Foreground"
                Value="#FF042271"/>
        <Setter Property="Padding"
                Value="15,20"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="true"/>
        <Setter Property="VerticalContentAlignment"
                Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeView}">
                    <Grid>
                        <Rectangle x:Name="Rt"
                                   Opacity="0"
                                   Fill="#40000000">
                            <Rectangle.Effect>
                                <BlurEffect/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <Border x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="true">
                            <ScrollViewer x:Name="Scroll"
                                          Padding="-20,0,0,0">
                                <!-- 預設樣式中的標記是 <ItemsPresenter/> 使用的應該是 StackPanel -->
                                <!-- 此處我將其改為 WrapPanel 並設定 IsItemsHost="true" -->
                                <WrapPanel x:Name="ItemsHost"
                                           IsItemsHost="True"
                                           Margin="{TemplateBinding Padding}"
                                           Orientation="Horizontal"/>
                            </ScrollViewer>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsGrouping"
                                 Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll"
                                    Value="false"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Rt"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0:0:0.5"
                                                         To="1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Rt"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0:0:0.5"
                                                         To="0"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter TargetName="Bd"
                                    Property="Background"
                                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter TargetName="Bd"
                                    Property="BorderBrush"
                                    Value="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
                        </Trigger>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetName="Scroll"
                                                        Storyboard.TargetProperty="Padding"
                                                        DecelerationRatio="0.9"
                                                        Duration="0:0:3"
                                                        To="0"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Style>

應用了該樣式後將看到如下圖所示的介面:

此時，我們已經實現了節點的橫向排列以及從上往下展開。下面將介紹如何利用模板和觸發器定製節點的樣式。

2、設定 TreeViewItem 的樣式，令其在不同操作下呈現出相應的狀態

下面給出的 XAML 完整的程式碼，重新定義了 TreeViewItem 的邊框、表示含有子節點的箭頭、連線子節點的線段以及承載子節點的容器等。

至於操作狀態，主要包括: 節點被選中、TreeView 失去焦點以及節點無效(IsEnabled=false)等。

<TreeView.ItemContainerStyle>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush"
                Value="#FF336699"/>
        <Setter Property="BorderThickness"
                Value="1"/>
        <Setter Property="HorizontalAlignment"
                Value="Center"/>
        <Setter Property="HorizontalContentAlignment"
                Value="Center"/>
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Margin"
                Value="5,0"/>
        <Setter Property="Padding"
                Value="10"/>
        <Setter Property="HorizontalContentAlignment"
                Value="Center"/>
        <Setter Property="VerticalContentAlignment"
                Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0"
                              HorizontalAlignment="Center">
                            <!-- 陰影效果 -->
                            <Rectangle x:Name="el_Shadow"
                                       Fill="#30000000">
                                <Rectangle.Effect>
                                    <BlurEffect />
                                </Rectangle.Effect>
                            </Rectangle>
                            <!-- 底色 -->
                            <Rectangle Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
                            <!-- 邊框 -->
                            <Border x:Name="el_Border"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    HorizontalAlignment="Center"
                                    Padding="{TemplateBinding Padding}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                <ContentPresenter x:Name="PART_Header"
                                                  Grid.Row="0"
                                                  ContentSource="Header"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>
                        <!-- 用於表示節點展開/摺疊的箭頭 -->
                        <Grid x:Name="el_Arrow" Grid.Row="1"
                                Height="15">
                            <Path Data="M 1,1.5 L 4.5,5 L 8,1.5"
                                  Stroke="{TemplateBinding BorderBrush}"
                                  StrokeThickness="1"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  SnapsToDevicePixels="false"/>
                        </Grid>
                        <!-- 節點展開後與子節點間的連線線 -->
                        <Rectangle x:Name="el_Line"
                                   Grid.Row="1"
                                   Fill="{TemplateBinding BorderBrush}"
                                   Width="1" Height="0"
                                   Opacity="0"
                                   SnapsToDevicePixels="True"/>
                        <!-- 表示子節點範圍的線段 -->
                        <Border x:Name="el_Range"
                                Grid.Row="2"
                                Background="Transparent"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="1,1,1,0"
                                Height="0"
                                Opacity="0"
                                SnapsToDevicePixels="True"/>
                        <!-- 承載子節點的容器 -->
                        <WrapPanel x:Name="el_Host"
                                   Grid.Row="3"
                                   IsItemsHost="True"
                                   Orientation="Horizontal"
                                   Visibility="Collapsed"/>
                    </Grid>
                    <!-- 動畫觸發器 -->
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <!-- 當 ListViewItem 的 HasItems/IsExpanded 都為 true 時觸發動畫 -->
                            <MultiTrigger.Conditions>
                                <Condition Property="HasItems"
                                           Value="true"/>
                                <Condition Property="IsExpanded"
                                           Value="true"/>
                            </MultiTrigger.Conditions>
                            <!-- 1、顯示承載子節點的容器 el_Host(WrapPanel) -->
                            <Setter TargetName="el_Host"
                                    Property="Visibility"
                                    Value="Visible"/>
                            <!-- 2、分別對 el_Line/el_Range/elArrow 物件的 Opacity/Height 屬性應用動畫效果 0.2s -->
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="el_Line"
                                                         Storyboard.TargetProperty="Height"
                                                         To="15"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Line"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Range"
                                                         Storyboard.TargetProperty="Height"
                                                         To="15"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Range"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Arrow"
                                                         Storyboard.TargetProperty="Height"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Arrow"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="el_Line"
                                                         Storyboard.TargetProperty="Height"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Line"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Range"
                                                         Storyboard.TargetProperty="Height"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Range"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Arrow"
                                                         Storyboard.TargetProperty="Height"
                                                         To="15"
                                                         Duration="0:0:0.2"/>
                                        <DoubleAnimation Storyboard.TargetName="el_Arrow"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                        <!-- 展開/摺疊節點觸發器 顯示/隱藏 承載子節點的容器 el_Host(WrapPanel) -->
                        <Trigger Property="IsExpanded"
                                 Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="el_Host"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="el_Host"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0"
                                                         Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <!-- 針對 WrapPanel 的 Opacity=0 時觸發的動畫 -->
                        <Trigger SourceName="el_Host"
                                 Property="Opacity"
                                 Value="0">
                            <Setter TargetName="el_Host"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                        </Trigger>
                        <!-- 若不包含子節點 即 ListViewItem.HasItems=false 則隱藏 el_Host(WrapPaenl)/el_Arrow(指示箭頭) -->
                        <Trigger Property="HasItems"
                                 Value="false">
                            <Setter TargetName="el_Host"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                            <Setter TargetName="el_Arrow"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                        </Trigger>
                        <!-- 單個子節點觸發器 此時將隱藏表示子節點範圍的線段 el_Range 物件 -->
                        <DataTrigger Binding="{Binding ElementName=el_Host, Path=Children.Count}"
                                     Value="1">
                            <Setter TargetName="el_Range"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                        </DataTrigger>
                        <!-- 節點被選中觸發器 -->
                        <Trigger Property="IsSelected"
                                 Value="true">
                            <Setter TargetName="el_Border"
                                    Property="Background"
                                    Value="#FFC5D9F1"/>
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="el_Shadow"
                                                        Storyboard.TargetProperty="Fill.Color"
                                                        To="#AB000000"
                                                        Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="el_Shadow"
                                                        Storyboard.TargetProperty="Fill.Color"
                                                        To="#30000000"
                                                        Duration="0:0:0.2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <!-- 節點被選中但 TreeView 失去焦點時的觸發器 -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected"
                                           Value="true"/>
                                <Condition Property="IsSelectionActive"
                                           Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="el_Border"
                                    Property="Background"
                                    Value="#FFDDD9C3"/>
                        </MultiTrigger>
                        <!-- 有效性 IsEnabled 觸發器 -->
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Foreground"
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.ItemContainerStyle>

至此，這篇文章已經完成。寫這篇文章的原因，一是為了總結最近的學習成果，整理出一個完整的思路；二是分享成果，希望能與感興趣的朋友共同提高，文中不足望高手指點！

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

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

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

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

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

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

TreeView —WPF—MVVM—HierarchicalDataTemplate

task null not view evel lec raise read box 摘要：采用HierarchicalDataTemplate數據模板和treeview在MVVM模式下實現行政區劃樹，支持勾選。一、代碼 1、Model using System; u

wpf treeview 數據綁定遞歸綁定節點

group ret item path ember str part lose tex 1.先上效果將所有節點加入ComboBox數據源，在ComboBox中選擇時下方Treeview顯示該節點下的子節點。 1.xaml文件，將以下代碼加入界面合適位置 1 　　

WPF TreeView IsExpanded 繫結不上的問題

最近專案上需要通過MVVM來控制TreeView，其中需要需要控制通過搜尋來定位某個節點，正常邏輯下，首先通過需要在樹上面找到該節點，然後選中該節點，並將該節點的父節點展開，這個時候需要通過MVVM來控制，需要繫結起來，只是一直沒有binding上，程式碼如下： MVVM示例程式碼： 1 usi

WPF TreeView 相關技巧

WPF 中的 TreeView 相關實用技巧如下響應 TreeViewItem 的雙擊事件這是一個較怪異的問題，如果在 TreeView 的 MouseDoubleClick 中去處理 SelectedItem 時，則在當一個樹節點下只有一個子節點時，雙擊該子節點會轉到它的父節點上。使用方法應當是

Seaching TreeVIew WPF

字段 each spa object 需要 soft wpf class textbox 項目中有一個樹形結構的資源，需要支持搜索功能，搜索出來的結果還是需要按照樹形結構展示，下面是簡單實現的demo。 1.首先創建TreeViewItem的ViewModel，一般情況下，

WPF TreeView 中迴圈遍歷查詢要素並快速定位

/// <summary> /// 獲取當前節點下符合條件的子元素 /// </summary> /// <param name="container">當前節點</param> ///

WPF TreeView BringIntoViewBehavior

由於專案需要，需要能夠定位TreeView中的點，TreeView的節點數過多的情況下，即使找到了對應的節點並選中展示了，由於不在可視區域內，給使用者的感覺還是不好，因此設計如下的Behavior，來實現選中的TreeViewItem顯示在可見區域： 1 using System; 2 using Sy

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

（一）檔案層次結構現代作業系統有多種檔案系統型別（如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}; //定

WPF TreeView葉子太多時顯示很慢的解決辦法

在WPF中使用DataGrid時當資料很多時也會直接顯示但是會發現，當獲取沒有顯示的DataGridRow時會出錯，原因是因為DataGrid預設開啟的虛擬載入；今天在使用TreeView時也遇到的很多資料，顯示時出現了很長時間的卡頓，最終發現是因為TreeView預

WPF TreeView 節點選擇與展開的繫結

<TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewI

WPF TreeView Win8 樣式

WPF 的 TreeView 控制元件自帶的樣式如圖 1 的左邊所示，節點前的箭頭還不錯，但是選中效果實在是不給力，如果想更加華麗的話，那麼很有必要把 TreeView 的樣式好好自定義一番。我最後得到的結果如圖 1 的右邊所示，是一個 Win8 風格的 TreeView。圖 1 TreeView

wpf treeView新增右擊事件

剛開始接觸WPF，今天學習了下treeView控制元件，右擊新增事件。看了很多網上大牛的東西，終究是搞懂了。效果圖如下： Xmal部分： <TreeView Name="DataTreeView" Margin="1" Grid.Column="0" G

WPF TreeView如何展開到某個節點

初用WPF的TreeView控制元件，需要將樹展開到某個特定的TreeViewItem，各種方法都嘗試過，卻發現程式碼總在某些情況下出錯，然後仔細研究，才發現其中的曲折。　　解決問題的思路是，得到從樹的根節點到特定節點的路線，並開啟所有父節點。但是曲折的地方

WPF TreeView自定義視覺化樹樣式

目前專案中效果（沒上傳，需要的留言）以下例子最終效果： TreeView 摺疊箭頭，帶垂直方向、水平方向層級線條（如圖）來看看怎麼一步步實現吧~ 補充一點，程式碼本地試過，現剪下的所以可能部分執行顯示與截圖不完全一樣，但基本結構是沒有問題的，可以

WPF TreeView自定義資料模板展開到指定層

TreeView 全部展開還是挺方便的只需設定TreeViewItem 樣式即可全部展開，但展開到具體某一級就需要手工程式碼實現。如果TreeView 沒有自定義資料模板節點繼承TreeViewItem 那麼樹的展開可以參考 MSDN部落格點選開

wpf treeview滾動條居左

前臺: requestbringintoview ="treeviewitem_requestbringintoview" 後臺: private void treeviewitem_requestbringintoview(object sender，reques

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

相關推薦