Discussion :

[NeoKript]

Bonsoir à tous,

Quelqu'un pourrait-il m'expliquer comment binder un TreeView sur un ViewModel
sachant que chaque nœud aura simplement un String et une ImageSource.

J'ai regardé du côté de CodeProject mais j'avoue ne pas tout comprendre..

Merci d'avance,
NeoKript

[tomlev]

Il faut utiliser un HierarchicalDataTemplate. Ton ViewModel doit avoir une propriété qui renvoie la liste des enfants, une propriété pour le texte, et une propriété pour l'image.

Par exemple :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<TreeView ItemsSource="{Binding Items}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" />
                <TextBlock Text="{Binding Text}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
public class NodeViewModel : ViewModelBase
{
    public string Text { get; set; }
    public ImageSource Image { get; set; }
    public ObservableCollection<NodeViewModel> Children { get; private set; }
}

[NeoKript]

Salut,

alors j'ai testé ce que tu m'a dis mais rien ne ce passe :

J'ai fais ceci :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        <TreeView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Data.SelectedUser.Explorer.Node}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Image}" Width="16" Height="16" />
                        <TextBlock Text="{Binding Text}" Margin="5,0,0,0" />
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

et dans le ViewModel :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

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
public Explorer()
        {
            NodeViewModel Model = new NodeViewModel();
            Model.Text = "Test";
            Model.Image = new BitmapImage(new Uri("../Resources/Test.png", UriKind.Relative));
            this.Node= Model;
 
            Model.Children.Add(new NodeViewModel { Text = "coucou" });
        }
 
        #region NodeViewModel
        private NodeViewModel _Node = null;
        public NodeViewModel Node
        {
            get
            {
                return (this._Node );
            }
            set
            {
                this._Node = value;
                this.OnPropertyChanged("Node");
            }
        }
        #endregion
 
    }

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

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
public class NodeViewModel : ViewModelBase
    {
        private String _Text = String.Empty;
        public String Text 
        {
            get
            {
                return (this._Text);
            }
            set
            {
                this._Text = value;
                this.OnPropertyChanged("Text");
            }
        }
        private ImageSource _Image = null;
        public ImageSource Image 
        {
            get
            {
                return (this._Image);
            }
            set
            {
                this._Image = value;
                this.OnPropertyChanged("Image");
            }
        }
        private ObservableCollection<NodeViewModel> _Children = new ObservableCollection<NodeViewModel>();
        public ObservableCollection<NodeViewModel> Children 
        {
            get
            {
                return (this._Children);
            }
            private set
            {
                this._Children = value;
                this.OnPropertyChanged("Children");
            }
        }
    }

Le problème ne vient pas de : Data.SelectedUser.Explorer.Node
car je bind déja des choses sur Data.SelectedUser.Explorer.XXX et cela fonctionne.

Si quelqu'un a une idée.


Merci d'avance

[tomlev]

Le problème ne vient pas de : Data.SelectedUser.Explorer.Node

Si, le problème vient bien de là... il faut binder ItemsSource sur une collection, pas sur un node unique (tu peux faire une collection avec un seul élément)

[NeoKript]

Si, le problème vient bien de là... il faut binder ItemsSource sur une collection, pas sur un node unique (tu peux faire une collection avec un seul élément)

Mouhaha, honte à moi d'avoir binder un seul objet alors que le TreeView s'attend à recevoir un IEnumerable ...

Merci encore, ça fonctionne du coup !