[WPF] Comment créer une treeview avec des items custom?

Version imprimable

Bonjour,

Je me met à apprendre le WPF et aujourd'hui j'essaie de faire une treeview custom, afin d'afficher des objets à moi. J'ai un peu de mal à comprendre comment manipuler les templates (HierarchicalDataTemplate, DataTemplate, ItemTemplate, etc...).

Voici les objets que je veux représenter:

MyTreeNode.cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
    public class MyTreeNode    {
        private string text;
        private ObservableCollection<MyTreeNode> items;
        private ObservableCollection<MyTreeNodeAttribute> attributes;
 
 
        public string Text
        {
            get { return this.text; }
            set { this.text = value; }
        }
 
 
        public ObservableCollection<MyTreeNode> Items
        {
            get
            {
                if (this.items == null)
                    this.items = new ObservableCollection<MyTreeNode>();
                return items;
            }
        }
 
 
        public ObservableCollection<MyTreeNodeAttribute> Attributes
        {
            get
            {
                if (this.attributes == null)
                    this.attributes = new ObservableCollection<MyTreeNodeAttribute>();
                return attributes;
            }
        }
 
 
        public MyTreeNode() { }
 
 
        public MyTreeNode(string text)
        {
            this.Text = text;
        }
 
 
        public MyTreeNode(string text, params string[] attributes)
        {
            this.Text = text;
 
 
            foreach (string[] attr in attributes.Where(x => x.Contains(':')).Select(x => x.Split(':')))
                this.Attributes.Add(new MyTreeNodeAttribute(attr[0], attr[1]));
        }
    }

MyTreeNodeAttribute.cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    public class MyTreeNodeAttribute    {
        public string Key { get; set; }
        public string Value { get; set; }
 
 
        public MyTreeNodeAttribute() { }
 
 
        public MyTreeNodeAttribute(string key, string value)
        {
            this.Key = key;
            this.Value = value;
        }
    }

Et voici le xaml que j'ai (qui n'affiche que la propriété Text de mes MyTreeNode pour le moment):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<TreeView x:Class="Test_TreeView_2.Tree.MyTreeView"            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:tree="clr-namespace:Test_TreeView_2.Tree"
            mc:Ignorable="d" 
            d:DesignHeight="300"
            d:DesignWidth="300">
    <TreeView.Resources>
        <ResourceDictionary>
            <HierarchicalDataTemplate ItemsSource="{Binding Items}" DataType="{x:Type tree:MyTreeNode}" >
                    <TextBlock Text="{Binding Text}" />
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Attributes}" DataType="{x:Type tree:MyTreeNodeAttribute}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Key}" />
                    <TextBlock Grid.Column="1" Text="{Binding Value}" />
                </Grid>
            </HierarchicalDataTemplate>
        </ResourceDictionary>
    </TreeView.Resources>
</TreeView>

J'aimerais avoir le résultat suivant:

Citation:

Item.Text