display TreeViewItem come righe della griglia in WPF

Question

In sostanza ha bisogno per realizzare qualcosa di simile utilizzando il controllo TreeView in WPF: (foto a caso)

http://blogs.msdn.com/blogfiles/delay/SimpleTreeGridUX.png

in cui i nodi e nodi figlio hanno stesse intestazioni.

Ho cercato su Google molto, ma la mia conoscenza del wpf non è buona.

Ecco il mio genitore classe nodo:

public class Parent : PropertyChangedBase 
    { 
     public string ParentName { get; set; } 
     public BindableCollection<Child> Children { get; set; } 
    } 

E bambino:

public class Child : PropertyChangedBase 
{ 
    public string ChildName { get; set; } 
} 

mio punto di vista albero XAML:

<TreeView Grid.Row="0" Grid.Column="0" ItemsSource="{Binding Nodes}"> 
     <TreeView.Resources> 
      <HierarchicalDataTemplate DataType="{x:Type projectModels:Parent}" ItemsSource="{Binding Children}"> 
       <StackPanel> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="20"></ColumnDefinition> 
          <ColumnDefinition Width="Auto"></ColumnDefinition> 
          <ColumnDefinition></ColumnDefinition> 
         </Grid.ColumnDefinitions> 
         <CheckBox Grid.Column="2"></CheckBox> 
         <TextBlock Grid.Column="1" Text="{Binding ParentName}"> 
         </TextBlock> 
        </Grid> 
       </StackPanel> 
      </HierarchicalDataTemplate> 
      <DataTemplate DataType="{x:Type projectModels:Child}"> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="{Binding ChildName}"></TextBlock> 
       </StackPanel> 
      </DataTemplate> 
     </TreeView.Resources> 
    </TreeView> 

Ho provato ad utilizzare Grid ma ovviamente creare griglie differenti , quindi posso trasmettere sulla larghezza della colonna.

Ho provato How to make gridview a child element of a treeview in wpf application, ma usano ListView. Al momento non è un'opzione per me, poiché la funzionalità di selezione di treeviewitem è strettamente associata alla mia vista ad albero e al codice sottostante.

Qualche idea su come può essere fatto? Grazie.

Answer 1

Prova questo XAML

<TreeView x:Name="treeviewList" ItemsSource="{Binding ManufacturerList}"> 
    <TreeView.ItemTemplate> 
     <DataTemplate> 
      <TreeViewItem ItemsSource="{Binding Models}"> 
       <TreeViewItem.Header> 
        <Grid Width="350"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="100"></ColumnDefinition> 
          <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition> 
          <ColumnDefinition ></ColumnDefinition> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="{Binding Task}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/> 
         <TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/> 
         <TextBlock Text="{Binding HeadNote}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/> 
        </Grid> 
       </TreeViewItem.Header> 
       <TreeViewItem.ItemTemplate> 
        <DataTemplate> 
         <Grid Margin="-20,0,0,0"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="100"></ColumnDefinition> 
           <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition> 
           <ColumnDefinition></ColumnDefinition> 
          </Grid.ColumnDefinitions> 
          <TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/> 
          <TextBlock Text="{Binding Duration}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/> 
          <TextBlock Text="{Binding Notes}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/> 
         </Grid> 
        </DataTemplate> 
       </TreeViewItem.ItemTemplate> 
      </TreeViewItem> 
     </DataTemplate> 
    </TreeView.ItemTemplate> 
</TreeView> 

C# codice

public class Company 
{ 
    public string Task { get; set; } 
    public string durationTotal { get; set; } 
    public string HeadNote { get; set; } 
    public List<Model> Models { get; set; } 
} 
public class Model 
{ 
    public string SubTask { get; set; } 
    public string Duration { get; set; } 
    public string Notes { get; set; }  
} 

---

List<Company> ManufacturerList = new List<Company>(); 

     ManufacturerList.Add(new Company() 
     { 
      Task = "Coding", 
      durationTotal = "4", 
      HeadNote = "Coding Task", 
      Models = new List<Model>() 
      {new Model(){SubTask = "Write", Duration = "2", Notes ="It pays the bills" }, 
      new Model(){SubTask = "Compile", Duration = "1", Notes ="c# or go home" }, 
      new Model(){SubTask = "Test", Duration = "1", Notes ="works on my m/c" },} 
     }); 


     ManufacturerList.Add(new Company() 
     { 
      Task = "Communicate", 
      durationTotal = "2", 
      HeadNote = "Communicate Task", 
      Models = new List<Model>() 
      {new Model(){SubTask = "Email", Duration = "0.5", Notes ="so much junk mail" }, 
      new Model(){SubTask = "Blogs", Duration = "0.25", Notes ="blogs.msdn.com/delay" }, 
      new Model(){SubTask = "Twitter", Duration = "0.25", Notes ="RT:nothing to report" },} 
     }); 

     treeviewList.ItemsSource = ManufacturerList; 

Risultato

Answer 2

Se l'unico problema con il codice è che ogni elemento di treeview viene visualizzato con diverse larghezze della griglia, è possibile provare la funzione "share size scope" per allinearli tutti. Nel controllo TreeView, impostare Grid.IsSharedSizeScope true: -

quindi aggiungere un SharedSizeGroup alle ColumnDefinition s che dovrebbero avere la stessa larghezza in tutti gli elementi TreeView (la prima definizione di colonna ha una larghezza fissa in ogni caso, in modo da non è necessaria su questo): -

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="20" /> 
    <ColumnDefinition Width="Auto" SharedSizeGroup="A" /> 
    <ColumnDefinition SharedSizeGroup="B" /> 
</Grid.ColumnDefinitions> 

i valori sono solo stringhe utilizzate per "nome" le colonne, e può essere qualcosa che ti piace.