简单的WPF数据绑定问题与图标

Question

我有几种类型组成这样的层次结构：

+ Image0.Name
    Effect0.Name
    Effect1.Name
    Effect2.Name
    Layer0.Name
    Layer1.Name
    Layer2.Name
    ...
+ Image1.Name
    Effect0.Name
    Effect1.Name
    Effect2.Name
    Layer0.Name
    Layer1.Name
    Layer2.Name
    ...
+ Image2.Name
    Effect0.Name
    Effect1.Name
    Effect2.Name
    Layer0.Name
    Layer1.Name
    Layer2.Name
    ...

但我无法理解数据绑定。以下是类型的代码：

public class Image
{
    public string Name { get; set; }

    public IEnumerable<Effect> Effects { get; set; }
    public IEnumerable<Layer> Layers { get; set; }
}

public class Effect
{
    public string Name { get; set; }

    public Effect ( string name )
    {
        this.Name = name;
    }
}

public class Layer
{
    public string Name { get; set; }

    public Layer ( string name )
    {
        this.Name = name;
    }
}

public class EditorView : INotifyPropertyChanged
{
    IEnumerable<Node> images;
    public IEnumerable<Node> Images
    {
        get { return images; }
        set
        {
            this.images = value;
            this.RaisePropertyChanged ( "Images" );
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    void RaisePropertyChanged ( string propertyName )
    {
        var handler = this.PropertyChanged;
        if ( handler != null )
            handler ( this, new PropertyChangedEventArgs ( propertyName ) );
    }
}

此外，这些类型（Effect，Layer）每个类型都有一个唯一的图标，如果你还可以展示如何绑定它，这将有助于我理解这一切。

Answer 1

这就是我通常的做法，为子项创建基类，然后创建返回所有子项的I属性

 public class Image 
 { 
    public string Name { get; set;} 
    public IEnumerable<Effect> Effects { get; set; } 
    public IEnumerable<Layer> Layers { get; set; }
    public IEnumerable<Node> Nodes { get { return ((IEnumerable<Node>)Layers).Union((IEnumerable<Node>)Effects); } }
}

 public class Effect : Node
{
    public Effect(string name) 
    { 
        this.Name = name; 
    } 
}
public class Layer : Node
{ 
      public Layer(string name) { this.Name = name; } 
}

public class Node
{
    public string Name { get; set; }
    public Image Icon { get; set; }
}

您应该能够设置相应的效果和图层的图像属性（图像的网址，但您可以更改属性类型），然后我已将它连接起来，这应该可以正常工作

 <TreeView Height="221" HorizontalAlignment="Left" Margin="12,12,0,0" Name="treeView1" 
              VerticalAlignment="Top" Width="479" ItemsSource="{Binding Images}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Nodes}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}"></TextBlock>
                    <Image Source="{Binding Icon}"></Image>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

修改

然后将TreeView Item的DataContext设置为ViewModel，就像我在后面的代码中所做的那样：

Image img = new Image();
Effect effect = new Effect("Effect1");
Layer layer = new Layer("Layer1");
img.Name = "Image1";
List<Effect> effects = new List<Effect>();
effects.Add(effect);
img.Effects = effects;
List<Layer> layers = new List<Layer>();
layers.Add(layer);
img.Layers = layers;
List<WpfApplication1.Image> Images = new List<Image>();
Images.Add(img);
EditorView ev = new EditorView();
ev.Images = Images;
treeView1.DataContext = ev;

EDIT2：粘贴完整代码（不使用语句）：

namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new EditorView();
    }
}

public class Image 

{ 
    public string Name { get; set;} 
    public IEnumerable<Effect> Effects { get; set; } 
    public IEnumerable<Layer> Layers { get; set; }
    public IEnumerable<Node> Nodes { get { return ((IEnumerable<Node>)Layers).Union((IEnumerable<Node>)Effects); } }
}
public class Effect : Node
{
    public Effect(string name) 
    { 
        this.Name = name; 
    } 
}
public class Layer : Node
{ 
      public Layer(string name) { this.Name = name; } 
}

public class Node
{
    public string Name { get; set; }
    public string Icon { get; set; }
}

public class EditorView : INotifyPropertyChanged 
{
    public EditorView()
    {
        Image img = new Image();
        WpfApplication1.Effect effect = new WpfApplication1.Effect("Effect1");
        WpfApplication1.Layer layer = new Layer("Layer1");
        img.Name = "Image1";
        List<Effect> effects = new List<WpfApplication1.Effect>();
        effects.Add(effect);
        img.Effects = effects;
        List<Layer> layers = new List<Layer>();
        layers.Add(layer);
        img.Layers = layers;
        List<WpfApplication1.Image> Images = new List<Image>();
        Images.Add(img);
        this.Images = Images;
    }

    IEnumerable<Image> images;
    public IEnumerable<Image> Images 
    { 
        get 
    { 
            return images; 
    } 
        set { this.images = value; this.RaisePropertyChanged("Images"); 
        } 
    } public event 
        PropertyChangedEventHandler 
        PropertyChanged; 
    void RaisePropertyChanged(string propertyName) 
    { var handler = this.PropertyChanged; 
        if (handler != null)            

            handler(this, new PropertyChangedEventArgs(propertyName)); 
    } 
}
}

Answer 2

您需要实现 HierarchicalDataTemplate 。有关它的示例，请查看本文的最后部分 - http://msdn.microsoft.com/en-us/library/ms742521.aspx和此文章 - http://blogs.msdn.com/b/chkoenig/archive/2008/05/24/hierarchical-databinding-in-wpf.aspx