在wpf中将treeviewitem显示为网格行

Posted 2023-04-01

【中文标题】在wpf中将treeviewitem显示为网格行

【英文标题】：Display treeviewitem as grid rows in wpf

【发布时间】：2014-08-25 11:45:03

【问题描述】：

基本上需要在wpf中使用treeview控件来实现这样的东西：（随机图片）

_{（来源：msdn.com）}

节点和子节点具有相同的标头。

我用谷歌搜索了很多，但我对 wpf 的了解并不那么好。

这是我的父节点类：

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

还有孩子：

public class Child : PropertyChangedBase

    public string ChildName  get; set; 

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

我尝试使用Grid，但显然它会创建不同的网格，因此我可以根据列宽进行中继。

我试过How to make gridview a child element of a treeview in wpf application，但他们使用ListView。这对我来说现在不是一个选项，因为树视图项选择功能与我的树视图和背后的代码紧密耦合。

有什么想法可以做到吗？谢谢。

【问题讨论】：

除了每个项目的列宽不同的问题之外，您的 代码是否正常工作？

是的，它可以工作，但不是我需要的方式。我需要树视图的通用标题，它是子节点。所以我可以调整它们的大小，并且节点的大小是一样的。

【参考方案1】：

试试这个 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#代码

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;

结果

【讨论】：

如何将固定标题添加为数据网格列标题？

要添加固定标题，我们可以将所有内容放在一个 Dockpanel 中，添加一个只有 DataGridTextColumn 宽度规范和 x:Name="col0" 的 Datagrid，然后使用 Width= 将 ColumnDefinition Grid 相互连接“Binding ElementName=col0,Path=ActualWidth”。参考：coderoad.ru/37433320/…

【参考方案2】：

如果您的代码的唯一问题是每个树视图项以不同的网格列宽度呈现，您可以尝试使用“共享大小范围”功能将它们全部对齐。在 TreeView 控件中，将Grid.IsSharedSizeScope 设置为 true：-

然后将SharedSizeGroup 添加到ColumnDefinitions 中，该ColumnDefinitions 应在所有树视图项中具有相同的宽度（无论如何，您的第一列定义具有固定宽度，因此不需要它）：-

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

这些值只是用于“命名”列的字符串，可以是您喜欢的任何值。

【讨论】：

“在 TreeView 控件中，将 Grid.IsSharedSizeScope 设置为 true”。没有此代码，它不起作用。非常感谢