通过绑定创建TreeView（子节点作为列表） <MyType> ）在MVVM中

Question

I need my TreeView to display playlists and their songs, it should look something like this:

-Playlist1
--Song1
--Song2
--Song3
-Playlist2
--Song1
--Song2
--Song3
--Song4
-Playlist3
--Song1
--Song2

There can be an unlimited amount of playlists in the TreeView , with each node having differing amounts of songs. I want to achieve this using MVVM.

MainWindow.xaml

<TreeView ItemsSource="{Binding PlayLists}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type types:Playlist}" ItemsSource="{Binding PlayLists}">
            <TextBlock Text="{Binding Path=Name}"/>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type types:Song}">
            <TextBlock Text="{Binding Path=Title}"/>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

Playlist.cs

public class Playlist
{
    public string Name { get; set; }
    public List<Song> Songs { get; set; }

    public static ObservableCollection<Playlist> Playlists { get; set; } = new ObservableCollection<Playlist>();
}

Song.cs

public class Song
{
    public string FullPath { get; set; }
    public string Title { get; set; }
    public string Artist { get; set; }
    public string Genre { get; set; }
    public string Length { get; set; }
    public string Size { get; set; }
}

MainViewModel.cs

public ObservableCollection<Playlist> PlayLists { get; set; }

public MainViewModel()
{

    /* Get Play-lists */
    string listsPath = Path.Combine(
        Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "AppName",  "Playlists");
    if (!Directory.Exists(listsPath))
    {
        Directory.CreateDirectory(listsPath);
    }

    string[] playlists = Directory.GetDirectories(listsPath);

    foreach (var playlist in playlists)
    {
        var songs = new List<Song>();
        string[] songsInPath = Directory.GetFiles(playlist);
        foreach (var song in songsInPath)
        {
            songs.Add(NewSong(song));
        }

        Playlist newPlaylist = new Playlist()
        {
            Name = playlist.Split(Path.DirectorySeparatorChar).Last(),
            Songs = songs
        };

        Playlist.Playlists.Add(newPlaylist);
    }
    PlayLists = Playlist.Playlists;
}

This is what it looks like:

There should be a sub-nodes for every song in the playlist.

The TreeView only shows the Playlist 's Name , but not the Song 's Title . I realized this is because the Playlist 's property Songs is actually a List<Song> . I am not sure how I can display each Song 's Title from the property Playlist.Songs .

Can someone please help me with this.

Answer 1

Your structure for Songs is wrong

Have a look at this example:

<HierarchicalDataTemplate DataType="{x:Type self:Family}" ItemsSource="{Binding Members}">
    <StackPanel Orientation="Horizontal">
        <Image Source="/WpfTutorialSamples;component/Images/group.png" Margin="0,0,5,0" />
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text=" [" Foreground="Blue" />
        <TextBlock Text="{Binding Members.Count}" Foreground="Blue" />
        <TextBlock Text="]" Foreground="Blue" />
    </StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type self:FamilyMember}">
    <StackPanel Orientation="Horizontal">
        <Image Source="/WpfTutorialSamples;component/Images/user.png" Margin="0,0,5,0" />
        <TextBlock Text="{Binding Name}" />
        <TextBlock Text=" (" Foreground="Green" />
        <TextBlock Text="{Binding Age}" Foreground="Green" />
        <TextBlock Text=" years)" Foreground="Green" />
    </StackPanel>
</DataTemplate>

Given this Model

public class Family
{
    public Family()
    {
        this.Members = new ObservableCollection<FamilyMember>();
    }

    public string Name { get; set; }

    public ObservableCollection<FamilyMember> Members { get; set; }
}

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

    public int Age { get; set; }
}

Take a look at this for reference:

TreeView, data binding and multiple templates