[WPF] TreeView et MVVM

Version imprimable

22/01/2011, 20h47
NeoKript

[WPF] TreeView et MVVM

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

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:

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:

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

Salut,

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

J'ai fais ceci :

Code:

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:

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:

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

23/01/2011, 00h59
tomlev

Citation:

Envoyé par NeoKript

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)
23/01/2011, 10h18
NeoKript

Citation:

Envoyé par tomlev

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 !