Multi-column Tree-View trong WPF

Question

Bất cứ ai biết nơi tôi có thể có được một điều khiển giống như Multi-column Tree-View trong WPF?

Answer 1

Tôi đã triển khai điều này dựa trên bài đăng blog cũ here. Nhưng nếu tôi nhớ đúng, tôi đã phải làm một số công việc thủ công để có được những thứ để làm việc đúng. Cụ thể với các thanh cuộn.

Nhưng điều đó sẽ cho bạn một khởi đầu tốt.

Answer 2

Có một bài viết trên CodeProject có thể giúp:

http://www.codeproject.com/KB/WPF/TreeListView.aspx

Có khá một vài khác hữu ích articles có về WPF TreeView.

Answer 3

SharpDevelop có ListView lớp con được gọi là SharpTreeView làm những gì bạn đang tìm kiếm.

Bạn có thể thấy một ví dụ sống tầm kiểm soát này trong cửa sổ "Watch" SharpDevelop của:

XAML được sử dụng trong cửa sổ Watch (như trong 5.1.0 beta):

<tv:SharpGridView x:Key="variableGridView" AllowsColumnReorder="False"> 
    <GridView.Columns> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.NameColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <tv:SharpTreeNodeView /> 
         <local:AutoCompleteTextBox x:Name="name" Margin="-6 0 0 0" MinWidth="100" Text="{Binding Node.Name}" IsEditable="{Binding Node.CanSetName}"> 
          <local:AutoCompleteTextBox.ContextMenu> 
           <MultiBinding Converter="{StaticResource menuBuilder}"> 
            <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
            <Binding Path="Node" /> 
           </MultiBinding> 
          </local:AutoCompleteTextBox.ContextMenu> 
         </local:AutoCompleteTextBox> 
        </StackPanel> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.ValueColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <local:AutoCompleteTextBox 
         MinWidth="100" 
         Text="{Binding Node.Value}" 
         IsEditable="{Binding Node.CanSetValue}"> 
         <local:AutoCompleteTextBox.ContextMenu> 
          <MultiBinding Converter="{StaticResource menuBuilder}"> 
           <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
           <Binding Path="Node" /> 
          </MultiBinding> 
         </local:AutoCompleteTextBox.ContextMenu> 
        </local:AutoCompleteTextBox> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
     <GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.TypeColumn}" Width="200"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <local:AutoCompleteTextBox MinWidth="100" Text="{Binding Node.Type}" IsEditable="False"> 
         <local:AutoCompleteTextBox.ContextMenu> 
          <MultiBinding Converter="{StaticResource menuBuilder}"> 
           <Binding Path="Node.ContextMenuAddInTreeEntry" /> 
           <Binding Path="Node" /> 
          </MultiBinding> 
         </local:AutoCompleteTextBox.ContextMenu> 
        </local:AutoCompleteTextBox> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
    </GridView.Columns> 
</tv:SharpGridView> 

Tài nguyên được đặt thành thuộc tính Chế độ xem của điều khiển SharpTreeView.

Answer 4

Nếu bạn không cần tiêu đề cột, điều này khá dễ dàng. Bạn chỉ có thể cung cấp mẫu vùng chứa mục, thêm cột lưới chiều rộng cố định ở bên phải và liên kết cột đó với dữ liệu có liên quan của mặt hàng của bạn.

Các container hàng mặc định cho một TreeView có một mạng lưới định nghĩa là (với một số ý kiến ​​bổ sung):

<Grid> 
     <Grid.ColumnDefinitions> 
      <!--Expander--><ColumnDefinition MinWidth="19" Width="Auto"/> 
      <!--Item--><ColumnDefinition Width="Auto"/> 
      <!--Overflow--><ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <!--Current Item--><RowDefinition Height="Auto"/> 
      <!--Sub-items--><RowDefinition/> 
     </Grid.RowDefinitions> 
     <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/> 
     <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
      <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
     </Border> 
     <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/> 
    </Grid> 

Vì vậy, chỉ cần mở rộng mạng lưới này để chứa các cột có thể dự đoán chiều rộng sang bên phải và bạn sẽ có cột.

• Thêm định nghĩa cột cho cột mới, làm cho nó tự động kích thước
• Cập nhật khoảng cột của "ItemsHost" để span thêm cột
• Thêm một điều khiển có thể dự đoán chiều rộng tới cột rằng:

các phần bị ảnh hưởng:

<Grid> 
... 
    <ColumnDefinition Width="Auto"/> 
... 
    <ItemsPresenter ... Grid.ColumnSpan="3" ... /> 
... 
    <Border Grid.Column="3"><!--Add column data here--></Border> 
... 
</Grid> 

Nếu biên giới gia tăng là chiều rộng tương tự cho tất cả các hàng, bạn sẽ có một xem có cảm giác như một lượt xem với các cột. Điều này rõ ràng sẽ không mở rộng tốt, nhưng nếu chỉ cần một giải pháp nhanh chóng và bẩn, bạn sẽ có thể làm điều này trong pha trộn trong một vài phút mà không cần thêm phụ thuộc cho điều khiển/thư viện bên ngoài.

Nhu cầu của chúng tôi tăng nhanh và chúng tôi đã thêm lưới có nhãn cột bên ngoài cây và dữ liệu chiều rộng của cột ở đó với chiều rộng của "cột" này [thực sự là độ rộng của điều khiển spanning trong các cột được đề cập sử dụng cột có kích thước tự động]. Nó hoạt động, đó là tất cả những gì tôi sẽ nói trong phòng thủ của nó.

Cách tiếp cận này cũng có thể được thực hiện trong mẫu mục được tạo thay vì mục chứa nếu bạn không nhớ (hoặc muốn) hộp chọn (đường viền "Bd") mở rộng trên tất cả các cột.