Wielokolumnowy widok drzewa w WPF

Question

Ktoś wie, gdzie mogę uzyskać sterowanie takie jak widok drzewa w WPF?

Answer 1

Zaimplementowałem to na podstawie starego wpisu na blogu here. Ale jeśli dobrze pamiętam, musiałem wykonać ręczną pracę, żeby wszystko działało prawidłowo. W szczególności z pasków przewijania.

Ale to powinno dać dobry początek.

Answer 2

Jest artykuł na codeproject, które mogą pomóc:

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

Istnieje sporo innych przydatnych articles tam o WPF TreeView.

Answer 3

SharpDevelop ma podklasę ListView o nazwie , która robi to, czego szukasz.

można obejrzeć na żywo przykład tej kontroli w oknie SharpDevelop za "Watch":

XAML stosowanego w oknie Watch (jak w 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> 

Zasób jest ustawiony na właściwość Widok kontrolki SharpTreeView.

Answer 4

Jeśli nie potrzebujesz nagłówków kolumn, jest to dość łatwe. Możesz po prostu podać szablon pojemnika z przedmiotami, dodać kolumny siatki o stałej szerokości po prawej stronie i powiązać je z odpowiednimi danymi elementu.

Domyślny pojemnik pozycja dla TreeView ma siatkę zdefiniowany jako (z pewnymi dodanych komentarzach):

<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> 

Więc po prostu przedłużyć tę siatkę zawierać przewidywalne-szerokość kolumn w prawo i będziesz miał kolumny.

• Dodaj definicję kolumny do nowej kolumny, sprawiają, że auto wielkości
• Aktualizacja rozpiętość kolumna „ItemsHost” span dodatkową kolumnę
• Dodaj przewidywalnego szerokości kontrolę do tej kolumny:

Porcje dotkniętych:

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

Jeżeli dodana granica jest taka sama szerokość dla wszystkich wierszy, będziesz miał widok, który wygląda jak widok drzewa z kolumnami. To oczywiście nie skaluje się dobrze, ale jeśli potrzebujesz tylko szybkiego i brudnego rozwiązania, powinieneś być w stanie to zrobić w kilka minut bez dodawania zależności dla zewnętrznych kontroli/bibliotek.

Nasze potrzeby szybko rosła i dodaliśmy siatkę z etykietami kolumn spoza drzewa i z danymi szerokość kolumn nie do szerokości tych „kolumn” [faktycznie szerokości o trwającej kontroli w kolumn w kwestii korzystania kolumny o rozmiarze automatycznym]. Działa, a to wszystko, co powiem w jego obronie.

Takie podejście można również wykonać w szablonie elementu generowanego zamiast w kontenerze przedmiotu, jeśli nie masz nic przeciwko (lub chcesz) polu wyboru (granica "Bd") rozciągającemu się na wszystkie kolumny.