WPF實現樹形表格控制項(TreeListView)

来源:https://www.cnblogs.com/qushi2020/p/18109923
-Advertisement-
Play Games

前言 本文將探討如何利用WPF框架實現樹形表格控制項，該控制項不僅能夠有效地展示覆雜的層級數據，還能夠提供豐富的個性化定製選項。我們將介紹如何使用WPF提供的控制項、模板、佈局、數據綁定等技術來構建這樣一個樹形表格。 一、運行效果 1.1預設樣式 1.2 自定義樣式 二、代碼實現 2.1 創建自定義控制項（ ...


前言

　　本文將探討如何利用WPF框架實現樹形表格控制項，該控制項不僅能夠有效地展示覆雜的層級數據，還能夠提供豐富的個性化定製選項。我們將介紹如何使用WPF提供的控制項、模板、佈局、數據綁定等技術來構建這樣一個樹形表格。

一、運行效果

1.1預設樣式

1.2 自定義樣式

二、代碼實現

2.1 創建自定義控制項（TreeListView）

      新建一個繼承自TreeView的控制項，並定義一個類型為ViewBase的View依賴屬性，用於在代碼中指定列。

public class TreeListView : TreeView
{
        public ViewBase View
        {
            get { return (ViewBase)GetValue(ViewProperty); }
            set { SetValue(ViewProperty, value); }
        }

        public static readonly DependencyProperty ViewProperty =
            DependencyProperty.Register("View", typeof(ViewBase), typeof(TreeListView));
}

2.2 在TreeListView控制項模板中處理列頭

   為了在TreeListView中顯示列頭，需要在合適的位置添加GridViewHeaderRowPresenter控制項，併在Columns屬性上綁定我們之前定義的View.Columns屬性。下麵我們首先來分析TreeView控制項模板的代碼。

<ControlTemplate TargetType="{x:Type TreeView}">
    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
        <ScrollViewer x:Name="_tv_scrollviewer_" Background="{TemplateBinding Background}" CanContentScroll="false" Focusable="false" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
            <ItemsPresenter/>
        </ScrollViewer>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        </Trigger>
        <Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
            <Setter Property="CanContentScroll" TargetName="_tv_scrollviewer_" Value="true"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

      通過以上代碼我們可以看出，只要將GridViewHeaderRowPresenter控制項添加到ScrollViewer控制項上面即可實現列頭功能，但這樣會有一個問題，那就是內容寬度超出控制項寬度後，滑鼠拖動橫向滾動條時列頭不會跟隨下方的數據列表一起滾動。為解決這個問題我們需要將GridViewHeaderRowPresenter放置到ScrollViewer控制項模板中，以下為完整代碼。

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
    <Setter Property="Focusable" Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <DockPanel Margin="{TemplateBinding Padding}">
                        <ScrollViewer
                                DockPanel.Dock="Top"
                                Focusable="false"
                                HorizontalScrollBarVisibility="Hidden"
                                VerticalScrollBarVisibility="Hidden">
                            <GridViewHeaderRowPresenter
                                    Margin="2,0,2,0"
                                    AllowsColumnReorder="{Binding TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderContainerStyle="{Binding TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderContextMenu="{Binding TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderStringFormat="{Binding TemplatedParent.View.ColumnHeaderStringFormat, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderTemplate="{Binding TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderTemplateSelector="{Binding TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                    ColumnHeaderToolTip="{Binding TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                    Columns="{Binding TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ScrollViewer>
                        <ScrollContentPresenter
                                x:Name="PART_ScrollContentPresenter"
                                CanContentScroll="{TemplateBinding CanContentScroll}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                KeyboardNavigation.DirectionalNavigation="Local"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </DockPanel>

                    <ScrollBar
                            x:Name="PART_HorizontalScrollBar"
                            Grid.Row="1"
                            Cursor="Arrow"
                            Maximum="{TemplateBinding ScrollableWidth}"
                            Minimum="0.0"
                            Orientation="Horizontal"
                            ViewportSize="{TemplateBinding ViewportWidth}"
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                    <ScrollBar
                            x:Name="PART_VerticalScrollBar"
                            Grid.Column="1"
                            Cursor="Arrow"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0.0"
                            Orientation="Vertical"
                            ViewportSize="{TemplateBinding ViewportHeight}"
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
                    <DockPanel
                            Grid.Row="1"
                            Grid.Column="1"
                            Background="{Binding Background, ElementName=PART_VerticalScrollBar}"
                            LastChildFill="false">
                        <Rectangle
                                Width="1"
                                DockPanel.Dock="Left"
                                Fill="White"
                                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                        <Rectangle
                                Height="1"
                                DockPanel.Dock="Top"
                                Fill="White"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                    </DockPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type local:TreeListView}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TreeListView}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer Padding="{TemplateBinding Padding}" Style="{StaticResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2.3 在TreeListViewItem模板中處理子項的展開和收縮

      新建一個繼承自TreeViewItem的類，命名為TreeListViewItem（如有個性化需求，可以在該類中處理），編輯控制項模板，在模板中添加以下代碼。

<Style TargetType="{x:Type local:TreeListViewItem}">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TreeListViewItem}">
                <StackPanel>
                    <Border
                            Name="Bd"
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <GridViewRowPresenter
                                x:Name="PART_Header"
                                Columns="{Binding RelativeSource={RelativeSource AncestorType=local:TreeListView}, Path=View.Columns}"
                                Content="{TemplateBinding Header}" />
                    </Border>
                    <ItemsPresenter x:Name="ItemsHost" />
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="false">
                        <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="HasHeader" Value="false" />
                            <Condition Property="Width" Value="Auto" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="PART_Header" Property="MinWidth" Value="75" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="HasHeader" Value="false" />
                            <Condition Property="Height" Value="Auto" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="PART_Header" Property="MinHeight" Value="19" />
                    </MultiTrigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="extensions:TreeViewItemExtensions.IsMouseDirectlyOverItem" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="{StaticResource Item.MouseOver.Background}" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.MouseOver.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False" />
                            <Condition Property="IsSelected" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="{StaticResource Item.SelectedInactive.Background}" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.SelectedInactive.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True" />
                            <Condition Property="IsSelected" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="{StaticResource Item.SelectedActive.Background}" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    此處的核心在於模板中添加了GridViewRowPresenter控制項，併在Columns屬性上綁定了我們之前定義的View.Columns屬性，這樣就可以在每一行上面顯示列數據。還有一個關鍵點是ItemsPresenter，它用於顯示子項數據，此處命名為ItemsHost，它由屬性觸發器中的代碼來控制項展開和收起。以下是屬性觸發器代碼。

<Trigger Property="IsExpanded" Value="false">
    <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>

2.4 在單元格模板中控制項子項的展開與收起

   為了達到展開和收起的效果，需要在首列的單元格中控制TreeListViewItem的IsExpanded屬性。以下為完整代碼。

<DataTemplate x:Key="ExpandCellTemplate">
    <DockPanel>
        <ToggleButton
                            x:Name="Expander"
                            Margin="{Binding Path=Level, Converter={StaticResource LevelIndentConverter}, RelativeSource={RelativeSource AncestorType={x:Type TreeListViewItem}}}"
                            ClickMode="Press"
                            IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource AncestorType={x:Type TreeListViewItem}}}"
                            Style="{StaticResource ExpandCollapseToggleStyle}" />
        <TextBlock Text="{Binding Property1}" />
    </DockPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=HasItems, RelativeSource={RelativeSource AncestorType={x:Type TreeListViewItem}}}" Value="False">
            <Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

其關鍵代碼為

IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource AncestorType={x:Type TreeListViewItem}}}"

2.5 控制項使用

<TreeListView ItemsSource="{Binding Collection}">
    <TreeListView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Collection, IsAsync=True}" />
    </TreeListView.ItemTemplate>
    <TreeListView.View>
        <GridView>
            <GridViewColumn CellTemplate="{StaticResource ExpandCellTemplate}" Header="Property1" />
            <GridViewColumn DisplayMemberBinding="{Binding Property2}" Header="Property2" />
            <GridViewColumn DisplayMemberBinding="{Binding Property3}" Header="Property3" />
            <GridViewColumn DisplayMemberBinding="{Binding Property4}" Header="Property4" />
            <GridViewColumn DisplayMemberBinding="{Binding Property5}" Header="Property5" />
            <GridViewColumn DisplayMemberBinding="{Binding Property6}" Header="Property6" />
            <GridViewColumn DisplayMemberBinding
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2024.04.04 網站初步搭建完成
    目錄1.Redis簡介2.使用場景3.C# 具體使用介紹(Nuget)StackExchange.RedisFreeRedisNewLife.RedisServiceStack.Redis (收費)4.Redis 常用面試問題以及回答5.建議及經驗分享建議Redis 經驗分享ShareFlow 1. ...
  • .NET Emit 入門教程：第六部分：IL 指令：4：詳解 ILGenerator 指令方法：參數存儲指令
    上一篇介紹了 IL 指令的分類以及參數載入指令，該載入指令以ld開頭，將參數載入到棧中，以便於後續執行操作命令。本篇開始介紹參數存儲指令，其指令以st開頭，將棧中的數據，存儲到指定的變數中，以方便後續使用。 ...
  • .Net單元測試xUnit和集成測試指南(1)
    引言 在現代化的軟體開發中，單元測試和集成測試是確保代碼質量和可靠性的關鍵部分。ASP.NET Core 社區內提供了強大的單元測試框架，xUnit 是其中之一，它提供了簡單、清晰和強大的測試功能，編寫單元測試有許多優點；有助於回歸、提供文檔及輔助良好的設計。下麵幾節我們來深入淺出探討如何使用 xU ...
  • Advanced .Net Debugging 6：程式集載入器
    隨著跨平臺應用的需求不斷增長，開發人員需要一種能夠在不同操作系統上運行的用戶界面（UI）框架。 Avalonia 是一種引人註目的選擇。在本文中，我們將深入瞭解 Avalonia 是什麼，它與 WPF 的區別，以及它的 UI 繪製引擎和原理、優點，以及一個簡單的示例代碼。 Avalonia 是什麼？ ...
  • iNeuOS工業互聯網操作系統，“低代碼”表單開發應用過程（一）
    iNeuOS工業互聯網操作系統“表單設計”功能經過升級後，能夠適用於更多應用場景，從業務上來講可以擴展設備管理、MES等表單類的管理功能，從技術上來講可以支持資料庫單表應用、多級關聯表應用、可以自定義寫SQL語句等，現在支持22個基礎表單組件、9個高級表單組件。 ...
  • .NET Emit 入門教程：第六部分：IL 指令：3：詳解 ILGenerator 指令方法：參數載入指令
    本篇教程深入探討了 ILGenerator 中的參數載入指令，通過詳細解釋Ldarg、Ldarga、Ldloc和Ldloca等指令的使用，讀者能夠清晰地認識到Ld指令用於載入參數或本地變數到堆棧，而St指令用於將值從堆棧存儲到參數或本地變數中。這些指令為動態方法的生成提供了基礎，幫助開發者更好地掌握... ...
  • Csharp線程
    CSharpe線程 目錄CSharpe線程C#如何操作線程Thread1. Thread如何開啟一個線程呢？2. Thread中常見的API3. thread的擴展封裝threadpool一、 .NET Framework2.0時代：出現了一個線程池ThreadPool二、線程池如何申請一個線程呢？ ...
  • 學習Source Generators之從swagger中生成類
    前面學習了一些Source Generators的基礎只是，接下來就來實踐一下，用這個來生成我們所需要的代碼。 本文將通過讀取swagger.json的內容，解析並生成對應的請求響應類的代碼。 創建項目 首先還是先創建兩個項目，一個控制台程式，一個類庫。 添加swagger文件 在控制台程式中添加F ...
一周排行
    -Advertisement-
    Play Games
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類