Wyświetlacz TreeViewItem jak wierszy siatki w WPF

Question

Zasadniczo w potrzebie, aby osiągnąć coś takiego przy użyciu kontroli TreeView w WPF: (Random picture)

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

Gdzie węzły i węzły potomne mają takie same nagłówki.

Dużo googlowałem, ale moja znajomość wpf nie była dobra.

Oto mój rodzic klasa węzeł:

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

A dziecko:

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

Moje drzewo XAML widok:

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

Próbowałem za pomocą Grid ale oczywiście tworzyć różne siatki , więc mogę przekazywać informacje o szerokości kolumny.

Próbowałem How to make gridview a child element of a treeview in wpf application, ale używają one ListView. Nie jest to teraz opcja dla mnie, ponieważ funkcja wyboru treeviewitem jest ściśle powiązana z moim widokiem drzewa i kodem.

Jakieś pomysły, jak to zrobić? Dzięki.

Answer 1

Spróbuj 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> 

kod C#

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; 

Wynik

Answer 2

Jeśli jedynym problemem z Twoim kodem jest to, że każdy element widoku drzewa renderuje z różnymi szerokościami kolumn siatki, możesz wypróbować funkcję "zakresu rozmiaru", aby wyrównać wszystkie. W kontroli TreeView, ustaw Grid.IsSharedSizeScope true: -

Następnie dodać SharedSizeGroup do ColumnDefinition s, które powinny mieć tę samą szerokość wśród wszystkich elementów TreeView (Twoja pierwsza definicja kolumna ma stałą szerokość i tak, więc to nie jest potrzebne): -

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

Wartości są po prostu ciągami używanymi do "nazwania" kolumn i mogą być dowolnymi.