如何使用 WPF 创建分层组合框？

Question

我想在 WPF 中创建一个分层组合框。我会将组合框绑定到一个类的集合，其结构如下：

Public Class Folder                 
{     
  Public string Name;            
  Public string Path;           
  List<SubFolder> SubFolder;   
}

我希望组合框看起来像这样：

---------------------- |文件夹名称 |子文件夹名称 | |子文件夹名称 | |子文件夹名称 | ---------------------- ---------------------- |文件夹名称 |子文件夹名称 | |子文件夹名称 | |子文件夹名称 | ---------------------- ---------------------- |文件夹名称 |子文件夹名称 | |子文件夹名称 | |子文件夹名称 | ----------------------

用户应该能够选择文件夹或子文件夹。

请告诉我该怎么做。

Answer 1

要使其适合组合框模型，即显示离散项的顺序列表的ItemsControl，您需要将层次结构展平为单个列表。

因为我很懒，所以我会创建一个公开Padding 和Text 属性的视图模型，然后让填充视图模型的代码根据层次结构中每个项目的级别设置Padding .然后我会为组合框创建一个项目模板，如下所示：

<DataTemplate>
   <TextBlock Padding="{Binding Padding}" Text="{Binding Text}"/>
</DataTemplate>

这种方法有很多缺点。但它很容易构建，它会让您快速了解这是否真的是呈现这些信息的合适方式。

Answer 2

我不知道这个解决方案是否适合您的需求，但是：

1. 创建新的 WPF 应用程序（例如 HierarchicalComboBox）并粘贴下面的代码而不是 Window1.xaml.cs 代码：

   public partial class Window1 : Window
   {
       public ObservableCollection<Folder> Folders { get; set; }
   
   
   public Window1()
   {
       var folders = new List&lt;Folder&gt;
                     {
                       new Folder()
                         {
                           Name = "First",
                           SubFolders =
                             new ObservableCollection&lt;Folder&gt;
                               {
                                 new Folder() {Name = "FirstFolderFirstSub"},
                                 new Folder() {Name = "FirstFolderSecondSub"},
                                 new Folder() {Name = "FirstFolderThirdSub"}
                               }
                         },
                         new Folder()
                         {
                           Name = "Second",
                           SubFolders =
                             new ObservableCollection&lt;Folder&gt;
                               {
                                 new Folder() {Name = "SecondFolderFirstSub"},
                                 new Folder() {Name = "SecondFolderSecondSub"},
                                 new Folder() {Name = "SecondFolderThirdSub"}
                               }
                         }
                     };
     Folders = new ObservableCollection&lt;Folder&gt;(folders);
     InitializeComponent();
     DataContext = this;
   
   
   }
   
   
   }
   
   
   public class Folder
   {
       public string Name { get; set; }
       public ObservableCollection<Folder> SubFolders { get; set; } 
   }
   

2. 然后在Window1.xaml中粘贴下面的代码：

   <Window x:Class="HierarchicalComboBox.Window1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:HierarchicalComboBox="clr-namespace:HierarchicalComboBox" Title="Window1">
       <Window.Resources>
           <HierarchicalDataTemplate DataType="{x:Type HierarchicalComboBox:Folder}">
               <StackPanel>
                   <TextBlock Text="{Binding Name}"/>
                   <ComboBox Margin="8,0,0,0" ItemsSource="{Binding SubFolders}"/>
               </StackPanel>
           </HierarchicalDataTemplate>
       </Window.Resources>
       <Grid>
           <ItemsControl x:Name="HierarchicalComboBox" ItemsSource="{Binding Folders}" VerticalAlignment="Top">
           </ItemsControl>
       </Grid>
   </Window>  
   

解释：

在Window.Resources中我们声明了HierarchicalDataTemplate，就是将我们的ViewModel类（这里是Folder类）绑定到对应的View上，也就是HierarchicalDataTemplate的内容。

然后在 Window1.xaml 中我们写入内容ItemsControl，它将托管我们的文件夹列表。

就是这样，您可以在您的解决方案中进行类似的操作。希望这可以帮助。如果您有任何问题，欢迎来到 cmets。

关于格式化

很抱歉格式不佳但无能为力，如果你们中的某些人有能力编辑答案，请尝试重新格式化代码示例。