在 wpf 中将 treeviewitem 显示为网格行 [英] Display treeviewitem as grid rows in wpf

问题描述

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

_{(来源:msdn.com)}

其中节点和子节点具有相同的标头.

我用谷歌搜索了很多，但我对 wpf 的了解不是很好.

这是我的父节点类:

 公共类父级:PropertyChangedBase{公共字符串 ParentName { 获取；放;}公共 BindableCollection<Child>孩子{得到;放;}}

还有孩子:

public class Child : PropertyChangedBase{公共字符串 ChildName { 获取；放;}}

我的 xaml 树视图:

 <TreeView.Resources><HierarchicalDataTemplate DataType="{x:Type projectModels:Parent}" ItemsSource="{Binding Children}"><堆栈面板><网格><Grid.ColumnDefinitions><ColumnDefinition Width="20"></ColumnDefinition><ColumnDefinition Width="Auto"></ColumnDefinition><列定义></列定义></Grid.ColumnDefinitions><CheckBox Grid.Column="2"></CheckBox><TextBlock Grid.Column="1" Text="{Binding ParentName}"></TextBlock></网格></StackPanel></HierarchicalDataTemplate><DataTemplate DataType="{x:Type projectModels:Child}"><StackPanel Orientation="水平"><TextBlock Text="{Binding ChildName}"></TextBlock></StackPanel></数据模板></TreeView.Resources></树视图>

我尝试使用 Grid 但显然它创建了不同的网格，所以我可以中继列宽.

我尝试了 如何使 gridview 成为 wpf 应用程序中树视图的子元素，但它们使用 ListView.这不是我现在的选择，因为树视图项选择功能与我的树视图和代码紧密耦合.

有什么想法可以做到吗?谢谢.

解决方案

试试这个xml

 <TreeView.ItemTemplate><数据模板><TreeViewItem ItemsSource="{绑定模​​型}"><TreeViewItem.Header><网格宽度="350"><Grid.ColumnDefinitions><ColumnDefinition Width="100"></ColumnDefinition><ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition><列定义></列定义></Grid.ColumnDefinitions><TextBlock Text="{绑定任务}" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/><TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/><TextBlock Text="{Binding HeadNote}" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/></网格></TreeViewItem.Header><TreeViewItem.ItemTemplate><数据模板><网格边距="-20,0,0,0"><Grid.ColumnDefinitions><ColumnDefinition Width="100"></ColumnDefinition><ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition><列定义></列定义></Grid.ColumnDefinitions><TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/><TextBlock Text="{Binding Duration}" Margin="10,0,10,0" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="1"/><TextBlock Text="{Binding Notes}" Horizo​​ntalAlignment="Left" VerticalAlignment="Center" Grid.Column="2"/></网格></数据模板></TreeViewItem.ItemTemplate></TreeViewItem></数据模板></TreeView.ItemTemplate></树视图>

c# 代码

公共类公司{公共字符串任务{获取；放;}公共字符串 durationTotal { 获取；放;}公共字符串 HeadNote { get;放;}公共列表<型号>模型 { 得到;放;}}公共类模型{公共字符串子任务 { 获取；放;}公共字符串持续时间{获取；放;}公共字符串注释{获取；放;}}

<小时>

 List制造商列表 = 新列表<公司>();制造商列表.添加(新公司(){任务 = "编码",持续时间总计 = "4",HeadNote = "编码任务",模型 = 新列表<模型>(){new Model(){SubTask = "Write", Duration = "2", Notes ="它支付账单" },new Model(){SubTask = "Compile", Duration = "1", Notes ="c# or go home" },new Model(){SubTask = "Test", Duration = "1", Notes ="适用于我的 m/c" },}});制造商列表.添加(新公司(){任务 = "沟通",持续时间总计 = "2",HeadNote = "沟通任务",模型 = 新列表<模型>(){new Model(){SubTask = "Email", Duration = "0.5", Notes ="这么多垃圾邮件" },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 = 制造商列表；

结果

Basically in need to achieve something like this using treeview control in wpf: (random picture)

_{(source: msdn.com)}

Where nodes and child nodes have same headers.

I googled a lot, but my knowledge in wpf not that good.

Here is my parent node class:

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

And child:

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

My xaml tree view:

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

I tried using Grid but obviously it create different grids, so I can relay on column width.

I tried How to make gridview a child element of a treeview in wpf application , but they use ListView. It's not an option for me right now, as treeviewitem selection functionality is tightly coupled with my treeview and code behind.

Any ideas how it can be done? Thanks.

解决方案

Try this 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# code

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;

Result

这篇关于在 wpf 中将 treeviewitem 显示为网格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！