用WPF从0构建一个iOS风格自定义TreeView控件｜含全过程视频讲解

最新推荐文章于 2024-09-06 21:44:17 发布
最新推荐文章于 2024-09-06 21:44:17 发布
阅读量873 收藏 23
点赞数 12
文章标签： wpf ios github ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vickyqu214/article/details/141391505
版权

控件名称：Cupertino TreeView
作者：Vicky&James
源码链接:https://github.com/JamesnetGroup/cupertino-treeview
教学视频：https://www.bilibili.com/video/BV1xz42187wV

这篇文章是对 WPF CupertinoTreeView 教程视频的技术回顾。

本文介绍了Vicky的第六个WPF教程系列视频的内容，该视频在哔哩哔哩上免费公开了一个小时的详细技术讲解教程。此外，还通过GitHub分享了源代码，欢迎大家通过点击Stars表示支持，也可以通过Forks参与该开源项目，并通过Discussions与我们进行沟通交流。

1.为什么需要在WPF中定制TreeView

在WPF中，TreeView/TreeViewItem与其他普通控件一样，默认提供了模板。然而，TreeView的表现方式多种多样，且其自由的层次结构布局没有限制，这使得默认提供的模板使用起来存在一定的局限性。因此，非常有必要详细了解和使用这个继承自ItemsControl的TreeView控件的机制和特性。

2.虽继承自ItemsControl，但与ListBox完全不同的TreeView机制

在继承自ItemsControl的典型控件中，ListBox是一个例子，它的父子层次结构机制分明。因此，虽然ListBox继承了ItemsControl，但ListBoxItem继承了ContentControl，这种继承结构使得层次结构直观易懂。

但是，对于TreeView/TreeViewItem，顶层父控件是TreeView，但其子控件TreeViewItem既是子控件，也可以拥有子控件，因此它既扮演子控件的角色，也扮演父控件的角色。因此，TreeViewItem也继承了ItemsControl。这将是理解TreeView控件的基本概念。

3.通过ItemsSource属性和ItemsPresenter元素窥探TreeView的本质

如前所述，TreeView/TreeViewItem都继承自ItemsControl，因此这两个控件都有ItemsSource集合属性。因此，父控件在模板中必须指定ItemsPresenter元素的区域，但对于拥有递归结构的子控件，也需要绑定ItemsSource属性并创建ItemsPresenter区域。

总结的代码如下：

TreeView Template

<Style TargetType="{x:Type TreeView}">
    <Setter Property="ItemsSource" Value="{Binding Files}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <ItemsPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TreeViewItem Template

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="ItemsSource" Value="{Binding Children}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Name}"/>
                    <ItemsPresenter/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

比较TreeView/TreeViewItem的两个模板源码，可以发现它们都共同使用了ItemsSource和ItemsPresenter，这种结构上的相似性使我们能够窥见其机制上的统一。正是通过这些机制性的元素，TreeView控件才能在没有任何层次约束的情况下灵活且自由地扩展。

因此，如果我们能很好地理解并构建这些特性，原本看起来复杂的TreeView结构也会变得极其容易和快速地实现。

4.为TreeView控件设计数据模型

首先，我们需要选择用于TreeView控件层次表达的数据。在本次教程视频中，我们基于文件/文件夹结构来构建数据。这使我们很容易联想到Windows资源管理器或Mac的Finder，这也是一个非常适合表达递归层次结构的例子。

模型设计如下：

FileItem 模型

public class FileItem
{
    public string Name { get; set; }
    public string Path { get; set; }
    public string Type { get; set; }
    public string Extension { get; set; }
    public long? Size { get; set; }
    public int Depth { get; set; }
    public List<FileItem> Children { get; set; }
}

模型的属性组成是构建Windows资源管理器或Finder的最少项，值得注意的属性是Path、Depth和Children。通过以下对属性的详细解释来仔细观察它们。

  • Name: 文件/文件夹的名称，从Path中提取。
  • Path: 文件/文件夹的完整路径。
  • Type: 文件/文件夹的类型。
  • Extension: 文件的扩展名。
  • Size: 文件的大小。
  • Depth: 当前项目的深度（级别）。
  • Children: 子项列表。

5.创建演示数据

虽然可以像Windows资源管理器或Finder那样加载实际系统的目录，但在本次教程视频中，我们将直接在“我的文档”这样的公共访问空间中创建文件/文件夹结构，以确保安全执行。

因此，我们需要如下所示的文件/文件夹结构生成逻辑。

FileCreator.cs

public class FileCreator
{
    public string BasePath = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);

    public void Create()
    {
        string textData = "Vicky test file content.";

        string[] tempFiles = 
        {
            @"\Vicky\Microsoft\Visual Studio\solution.txt",
            @"\Vicky\Microsoft\Visual Studio\debug.mp3",
            @"\Vicky\Microsoft\Visual Studio\class.cs",
            @"\Vicky\Microsoft\Sql Management Studio\query.txt",
            @"\Vicky\Apple\iPhone\store.txt",
            @"\Vicky\Apple\iPhone\calculator.mp3",
            @"\Vicky\Apple\iPhone\safari.cs",
        };

        foreach (string file in tempFiles)
        { 
            string fullPath = BasePath + file;
            string dirName = Path.GetDirectoryName(fullPath);

            if (!Directory.Exists(dirName))
            {
                Directory.CreateDirectory(dirName);
            }

            File.WriteAllText(fullPath, textData);
        }
    }
}

查看源代码可以看到，基于“我的文档”(Environment.SpecialFolder.MyDocuments)路径创建多个文件夹和文件的逻辑。为了构建层次化的目录结构和各种扩展名的文件，配置了各种项。在这里，大家还可以额外创建更多的文件。

通过此生成逻辑，这些文件夹/文件将安全地创建在“我的文档”中。

6.MVVM模式

在本教程中，我们将首次构建用于MVVM模式的ViewModel。在WPF中，MVVM模式的依赖性非常高，占有重要地位。

之所以在前五个教程中没有涉及MVVM，是因为在使用MVVM模式之前，我们希望首先充分学习WPF的基础，包括CustomControl、ControlTemplate以及ContentControl/ItemsControl。之后再涉及MVVM。

因此，如果你希望打好WPF的基础，建议按照顺序先学习前五个WPF教程系列。

7.在ViewModel中生成基于文件夹/文件的列表

在本教程中，我们将首次使用MVVM模式的核心——ViewModel。因此，我们将创建ViewModel类，并基于FileCreator.cs类中定义的BasePath物理路径，通过.NET的Directory类提供的GetDirectories和GetFiles方法，获取所有文件夹/文件列表并构建FileItem数据。

首先，创建要绑定到TreeView的ItemsSource的List属性。

绑定到ItemsSource的Files属性

public List<FileItem> Files { get; set; }

需要注意的是，这里没有处理Files属性的OnPropertyChanged。这意味着Files列表将在ViewModel的构造函数阶段生成。因此，使用init而不是set是一个不错的选择。

使用init代替set

public List<FileItem> Files { get; init; }

虽然是小细节，但这些因素共同构成了良好的代码。

接下来，需要实现一个方法，用于递归遍历文件夹并将文件夹/文件列表生成FileItem模型。

实现GetFiles方法

private void GetFiles(string root, List<FileItem> source, int depth)
{
    string[] dirs = Directory.GetDirectories(root);
    string[] files = Directory.GetFiles(root);

    foreach (string dir in dirs)
    {
        FileItem item = new();
        item.Name = Path.GetFileNameWithoutExtension(dir);
        item.Path = dir;
        item.Size = null;
        item.Type = "Folder";
        item.Depth = depth;
        item.Children = new();

        source.Add(item);

        GetFiles(dir, item.Children, depth + 1);
    }

    foreach (string file in files)
    {
        FileItem item = new();
        item.Name = Path.GetFileNameWithoutExtension(file);
        item.Path = file;
        item.Size = new FileInfo(file).Length;
        item.Type = "File";
        item.Extension = new FileInfo(file).Extension;
        item.Depth = depth;

        source.Add(item);
    }
}

这段代码中首先要注意的是，仅在目标文件夹/文件项为目录时继续遍历下级文件夹。因此，递归调用的部分仅在dirs的foreach逻辑中调用。在此逻辑中，通过Children继续查找并添加子项。

接下来是Depth。此部分预先计算当前文件夹/文件的深度。虽然数据在逻辑上是层次结构的，但在XAML中进行TreeViewItem模板的设计时，需要知道项目的级别，因此这是一个非常重要的属性。因此，每次递归方法调用时，都会增加Depth值以区分。其他元素则是用于传递视觉数据的，可以简单了解。

8.查看ViewModel的完整源代码

现在，通过查看ViewModel的完整源代码，我们来看看Files属性是如何在构造函数中生成的。

CupertinoViewModel.cs

public partial class CupertinoWindowViewModel : ObservableBase
{
    public List<FileItem> Files { get; set; }
    public CupertinoWindowViewModel()
    {
        FileCreator fileCreator = new();
        fileCreator.Create();

        int depth = 0;
        string root = fileCreator.BasePath + "/Vicky";
        List<FileItem> source = new();

        GetFiles(root, source, depth);

        Files = source;
    }

    private void GetFiles(string root, List<FileItem> source, int depth)
    {
        string[] dirs = Directory.GetDirectories(root);
        string[] files = Directory.GetFiles(root);

        foreach (string dir in dirs)
        {
            FileItem item = new();
            item.Name = Path.GetFileNameWithoutExtension(dir);
            item.Path = dir;
            item.Size = null;
            item.Type = "Folder";
            item.Depth = depth;
            item.Children = new();

            source.Add(item);

            GetFiles(dir, item.Children, depth + 1);
        }

        foreach (string file in files)
        {
            FileItem item = new();
            item.Name = Path.GetFileNameWithoutExtension(file);
            item.Path = file;
            item.Size = new FileInfo(file).Length;
            item.Type = "File";
            item.Extension = new FileInfo(file).Extension;
            item.Depth = depth;

            source.Add(item);
        }
    }
}

从源代码中可以看到，为了构建数据，所有的预处理工作都在构造函数中实现了。

构造函数在Window的DataContext绑定到ViewModel之前运行，在这个阶段对绑定属性进行set处理。当然，如果数据量大，异步加载是更理想的方式，但在本教程中，我们基于少量数据来构建TreeView，因此在构造函数阶段处理这些数据。因此，理解并使用这些特性可以更深入地实现基于MVVM的WPF应用程序。

接下来，让我们详细看看在ViewModel的构造函数中定义Files属性的部分。

构造函数

FileCreator fileCreator = new();
fileCreator.Create();

int depth = 0;
string root = fileCreator.BasePath + "/Vicky";
List<FileItem> source = new();

GetFiles(root, source, depth);

Files = source;

构造函数的逻辑如下：

  • fileCreator.Create: 在“我的文档”路径下创建示例演示数据。
  • depth: 将第一个文件夹/文件项的深度初始化为0。
  • root: “我的文档”路径的基础文件夹（在此可以再创建所需的文件夹）。
  • source: 创建列表。
  • GetFiles: 从“我的文档”路径基于root基础文件夹递归获取文件夹/文件列表。
  • Files = source: 递归调用结束后，将source分配给Files。

至此，数据准备和构建、通过ViewModel进行TreeView ItemsSource数据绑定的所有准备工作都完成了。

9.绑定DataContext

在这次的Cupertino Treeview教程中，我们没有使用诸如Prism之类的MVVM框架功能，因此直接在窗口视图的构造函数中创建ViewModel并绑定到DataContext。

namespace Cupertino.Forms.UI.Views
{
    public class CupertinoWindow : Window
    {
        static CupertinoWindow()
        {
            DefaultStyleKeyProperty
                .OverrideMetadata(typeof(CupertinoWindow), 
                    new FrameworkPropertyMetadata(typeof(CupertinoWindow)));
        }

        public CupertinoWindow()
        {
            DataContext = new CupertinoWindowViewModel();
        }
    }
}

如果在运行时数据没有绑定，可以从这里检查ViewModel绑定到DataContext的部分。

现在，后端代码的主要准备工作已经完成。

10.Cupertino TreeView ControlTemplate

TreeView ControlTemplate的实现与ListBox的实现非常相似。最重要的元素是ItemsPresenter。如果需要添加布局元素，如标题或分页处理，也在这里实现。在本教程中包含了标题，因此在TreeView的Template中与ItemsPresenter一起实现标题。

下面是最终实现的CupertinoTreeView CustomControl的Template的完整样子。

CupertinoTreeView.xaml

<Style TargetType="{x:Type units:CupertinoTreeView}">
    <Setter Property="Width" Value="800"/>
    <Setter Property="BorderBrush" Value="#AAAAAA"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Margin" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type units:CupertinoTreeView}">
                <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" MinWidth="400" SharedSizeGroup="Path"/>
                            <ColumnDefinition Width="Auto" MinWidth="100" SharedSizeGroup="Size"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="Name" 
                               Background="#FAFAFA" Padding="10" 
                               BorderBrush="#AAAAAA" BorderThickness="0 0 1 1"/>
                        <Label Grid.Column="1" Content="Path" 
                               Background="#FAFAFA" Padding="10" 
                               BorderBrush="#AAAAAA" BorderThickness="0 0 1 1"/>
                        <Label Grid.Column="2" Content="Size" 
                               Background="#FAFAFA" Padding="10" 
                               BorderBrush="#AAAAAA" BorderThickness="0 0 1 1"/>
                        <units:MagicStackPanel Grid.Row="1" Grid.ColumnSpan="3" 
                            VerticalAlignment="Top"
                            ItemHeight="{Binding ElementName=Items, Path=ActualHeight}">
                        </units:MagicStackPanel>
                        <ItemsPresenter x:Name="Items" Grid.Row="1" Grid.ColumnSpan="3" 
                                        VerticalAlignment="Top"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这里需要注意的是Header的布局和ItemsPresenter元素的摆放。TreeView控件默认不提供Header元素。此外，从用户界面的角度来看，TreeView通常不显示Header。但是，如果有需要，可以像现在这样直接实现Header。

ItemsPresenter上方的Header

为了使Header和ItemsPresenter中的TreeViewItem数据项的列(ColumnDefinition)大小保持一致，指定了SharedSizeGroup。（Path, Size）这些元素在后面的TreeViewItem内容中也会出现。

总结来说，Header布局和子元素的ItemsPresenter摆放是TreeView控件Template实现的核心。这比实现TreeViewItem要简单一些。

11.Cupertino TreeViewItem ControlTemplate

最后，最重要的TreeView控件核心元素——TreeViewItem Template的实现阶段。

正如前面提到的，TreeViewItem既是子控件又是父控件，因此具有继承自ItemsControl的结构。因此，虽然需要像ListBoxItem一样构建Template，但为了放置子项，还需要包含ItemsPresenter元素。

虽然看起来复杂，但简化布局后如下：

<Border>
    <StackPanel>       
        <!-- 文件名，文件大小等内容 -->
        <Grid>
        </Grid>
        <!-- 子元素 -->
        <ItemsPresenter/>
    </StackPanel>
</Border>

接下来，我们将这一布局扩展为完整的TreeViewItem模板。

CupertinoTreeViewItem.xaml

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel>
                        <!-- 文件名，路径和大小 -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="Path"/>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="Size"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding Name}" Padding="10"/>
                            <TextBlock Grid.Column="1" Text="{Binding Path}" Padding="10"/>
                            <TextBlock Grid.Column="2" Text="{Binding Size}" Padding="10"/>
                        </Grid>
                        <!-- 子元素 -->
                        <ItemsPresenter/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

通过这种方式，我们创建了一个包含文件名、路径和大小的Grid布局，并在其下方放置了一个ItemsPresenter，用于显示子元素。

到目前为止，我们已经实现了一个完整的Cupertino风格的TreeView和TreeViewItem。这些控件可以递归地展示文件夹和文件的层次结构，并且通过MVVM模式实现数据绑定和显示。

以上就是我们这期Cupertino TreeView 视频教程中所涵盖的内容，通过这些内容，我们可以深入了解WPF中的TreeView控件，学习如何自定义和扩展它们以适应特定的需求。希望这些信息对大家的开发工作有所帮助。

TreeViewItem的模板不仅要包含内容，还必须将ItemsPresenter元素正确地放置在合适的位置，这样在将层次数据绑定到ItemsSource时，才能构建出正确的TreeView。

如果没有充分理解TreeViewItem的这种特殊机制，实现TreeView控件可能会相对困难。

本教程视频时长超过1小时，旨在确保大家对TreeView控件的概念有深刻理解，因此反复学习会非常有帮助。

下面是最终实现的TreeViewItem模板的完整代码。

CupertinoTreeItem.xaml

<Style TargetType="{x:Type units:CupertinoTreeItem}">
    <Setter Property="SelectionCommand" Value="{Binding RelativeSource={RelativeSource AncestorType=units:CupertinoTreeView}, Path=DataContext.SelectionCommand}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="ItemsSource" Value="{Binding Children}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type units:CupertinoTreeItem}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel>
                        <Grid x:Name="Item" Background="{TemplateBinding Background}" Height="36">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto" MinWidth="200" SharedSizeGroup="Path"/>
                                <ColumnDefinition Width="Auto" MinWidth="100" SharedSizeGroup="Size"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" Margin="{Binding Depth, Converter={cnvts:DepthConverter}}">
                                <units:ChevronSwitch x:Name="Chevron" Margin="10" 
                                IsChecked="{Binding RelativeSource={RelativeSource Templatedparent}, Path=IsExpanded}"/>
                                <units:FileIcon Type="{Binding Type}" Margin="10" Extension="{Binding Extension}"/>
                                <TextBlock Text="{Binding Name}" Margin="10"/>
                            </StackPanel>
                            <TextBlock Grid.Column="1" Text="{Binding Path}" Margin="10"/>
                            <TextBlock Grid.Column="2" Text="{Binding Size, Converter={cnvts:SizeConverter}}" Margin="10"/>
                        </Grid>
                        <ItemsPresenter x:Name="Items" Visibility="Collapsed"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter TargetName="Items" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding ElementName=Item, Path=IsMouseOver}" Value="True">
                        <Setter TargetName="Item" Property="Background" Value="#D1E3FF"/>
                    </DataTrigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Item" Property="Background" Value="#004EFF"/>
                        <Setter TargetName="Item" Property="TextBlock.Foreground" Value="#FFFFFF"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding Type}" Value="File">
                        <Setter TargetName="Chevron" Property="Visibility" Value="Hidden"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这段代码实现了TreeViewItem的文件名、路径、文件大小、扩展名图标的显示，以及用于显示子项的ItemsPresenter元素。

接下来，查看运行结果并确认实际目录在“我的文档”中是否正确匹配。

12.设计元素

在本教程中，没有使用特别的设计元素。仅通过简单的Border的Background/BorderBrush颜色和Margin/Padding等布局设计元素，就可以实现出色的结果。

最重要的核心是Margin和Padding。所有视觉元素的Margin和Padding间距应保持一致，通过多次重复调整，可以制作出美观的控件。因此，为了训练大家的视觉感官，需要反复修改和检查这些属性。如果大家能重视这种训练，很快就能提升自己的感官。

13.Depth Converter

由于已经计算了所有文件项的Depth值，可以将其转换为每个项的左侧边距，从而在视觉上表示父子关系的层次结构。在TreeView中，通过使用每个项的Depth值，设置与该Depth成比例的左侧边距，可以清晰地表达项之间的层次关系。

下面是继承自IValueConverter的DepthConverter。

DepthConverter.cs

public class DepthConverter : MarkupExtension, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        int depth = (int)value;
        Thickness margin = new Thickness(depth * 20, 0, 0, 0);
        return margin;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

上述代码包括将Depth值转换为Thickness结构体以计算左侧边距的逻辑。此外，继承自MarkupExtension使其在XAML中更易于使用。

使用DepthConverter的示例

<StackPanel Orientation="Horizontal" Margin="{Binding Depth, Converter={local:DepthConverter}}">

最终，Depth值转换为左侧边距并应用的效果如下图所示。

通过Depth应用左侧边距的效果

图片中通过红色分隔线可以清晰地看到Depth值是如何应用的。另外，可以尝试更改DepthConverter逻辑中的depth * 20部分的值，看看会产生什么变化。

14.总结

本文未包含的更多关于Depth的深入内容在教程视频中通过动画进行了详细解释。此外，视频还详细介绍了如何使用ICommand方式在ViewModel中接收TreeView控件的选定项，以及解决事件冒泡问题的过程。

这次的教程视频超过1小时，内容详细且深入。大家可以通过哔哩哔哩观看完整版中文版教程。请关注、点赞，并分享给更多的开发者朋友。GitHub 仓库提供了开源代码，欢迎通过Stars/Forks，以及Discussions参与和鼓励。

谢谢大家！

Vicky&James
关注
WPF自定义TreeView滚动条样式
CodeBandit的博客
09-21 391
在上面的代码中，我们通过设置ScrollViewer的HorizontalScrollBarVisibility和VerticalScrollBarVisibility属性来控制滚动条的显示。我们需要在应用程序的资源中定义一个新的样式，并将其应用于TreeView的滚动条。在上面的代码中，我们定义了一个名为"CustomTreeViewScrollViewerStyle"的样式，并将其目标类型设置为ScrollViewer。现在，我们需要将自定义的滚动条样式应用于TreeView的滚动条。
【愚公系列】2023年10月 WPF控件专题 TreeView控件详解
时光隧道
08-14 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF自定义TreeViewItem 样式
10-30
WPF 自定义TreeViewItem的样式 CSDN 博客中有界面展示 http://blog.csdn.net/lvguoshan/article/details/40624961
WPF 自定义TreeView控件样式，仿QQ联系人列表
weixin_53370274的博客
12-15 1656
根据思路，我们需要设置三个样式，TreeView样式，TreeViewItem样式，HierarchicalDataTemplate分层模板样式。像这种联系人列表一般涉及到多层级数据，而且有很多数据是需要动态更新的，如果通过手动一条条增加数据反而更复杂，而且不方便。默认的TreeView控件四周会有边距，因此需要设置下TreeView的样式。另外鼠标经过和鼠标选中的背景色需要变化，因此还需要设置TreeViewItem的样式。分层模板中存在两种样式，一种是分组样式，一种是人员样式。
WPF TreeView控件的详细使用教程
最新发布
weixin_39604653的博客
09-06 1352
WPF 中的 TreeView 控件用于显示分层结构的数据，如文件夹结构、组织结构图等。它允许用户通过展开和折叠节点来查看和隐藏其子节点。
WPF中的自定义TreeView布局
04-02
这是“ WPF中的自定义TreeView布局”的替代方法
WPF 可以自定义字段的Treeview
dearbigdog的博客
09-25 1160
private string FOLDER_ICON=@"Image/33.png"; private string TAG_ICON=@"Image/31.png"; private string EDITABLE_ICON=@"Image/6.png"; private void ShowTreeView() {
【愚公系列】2023年10月 Winform控件专题 TreeView控件详解
时光隧道
09-15 3万+
Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。TreeView控件的Nodes属性是一个用于访问TreeView控件节点集合的属性。Nodes属性是一个TreeNodeCollection类型的对象，其中包含了所有TreeView控件的节点。
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
【愚公系列】2023年10月 WPF控件专题 ContextMenu控件详解
热门推荐
时光隧道
08-14 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
【愚公系列】2023年10月 WPF+上位机+工业互联 058-控件的详解（UserControl、CustomControl）
时光隧道
08-24 2万+
控件是指用于在图形用户界面中显示数据或执行特定操作的软件组件。控件可以是文本框、复选框、按钮、下拉列表、滑动条等。控件可以接受用户输入和处理输出，通常用于构建各种交互式应用程序，如桌面应用程序、移动应用程序和网页应用程序等。控件通常由开发工具、库或框架提供，开发人员可以使用这些组件来快速搭建应用程序的图形界面。WPF中的控件模板、UserControl、CustomControl是三种不同的组件类型，它们分别用于不同的场景，具体介绍如下：控件模板：控件模板是一种用于定义控件展示方式的机制。
WPF中的高级自定义TreeView布局
04-02
评论WPF TreeView的高级布局自定义。
wpf中，一个简单的自定义treeview
weixin_30482181的博客
11-02 414
首先创建一个自定义控件，在里面定义好treeview的样式，将本来的三角形的图标变为加号的图标，并且添加节点之间的连线。 <UserControl x:Class="TreeViewEx.myTreeView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
WPF控件TreeView应用示例
qq_27474555的博客
03-13 580
WPF中TreeView的静态、动态显示，同类型、不同类型数据的显示。
WPF TreeView自定义可视化树样式
qq_20758141的博客
05-27 3万+
目前项目中效果（没上传，需要的留言）   以下例子 最终效果： TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图） 来看看怎么一步步实现吧~ 补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样， 但基本结构是没有问题的，可以自己修改内容试试看！~   先做一个基础点的样式（图左侧） （右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器...
WPF 自定义TreeViewItem样式
姑爷一典型的专栏
10-30 2万+
首先自定义样式的目的是觉得
WPF TreeView自定义数据模板展开到指定层
hyh834773759的专栏
01-06 3651
TreeView 全部展开还是挺方便的只需设置TreeViewItem 样式即可全部展开，但展开到具体某一级就需要手工代码实现。如果TreeView 没有自定义数据模板 节点继承TreeViewItem 那么树的展开可以参考 MSDN博客  点击打开链接 public static class ExtensionMethods { public static void ExpandAll(t
WPF--TreeView对于自定义TreeViewItem的小应用
qq_41569198的博客
06-03 740
今天半天都被 TreeView里的SelectedItemChanged事件传过来的e参数困扰 private void fileviewer_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) 因为自定义了一个继承自TreeViewItem的类，想要多给他附上一些属性，以便自己使用 public class FileViewer : TreeViewItem { #r
WPF自定义模板--TreeView 实现菜单连接线
代码改变世界
07-03 689
WPF自定义模板--TreeView 实现菜单连接线 让菜单连线不在复杂
WPF自定义控件开发指南：构建高级用户体验
书中内容涵盖了WPF控件的开发基础到高级特性的构建，旨在帮助读者掌握构建自定义控件的关键技能。 全书共探讨了WPF Control Development的各个方面，包括但不限于以下知识点： 1. **WPF基础知识**：章节首先介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值