如何在WPF中使用HierarchicalDataTemplate表示分层数据

Question

I am using MVVM and trying to represent my ViewModel data in View.

I have a class called Track containing list of Variations. I want to represent each variation as a TextBlock using data binding.

I am able to represent a single track as:

    <Window.Resources>
                <src:Track x:Key="trck"/>
                ...
    </Window.Resources>
    <StackPanel DataContext="{Binding Source={StaticResource trck}}" Orientation="Horizontal">
            <ItemsControl ItemsSource="{Binding Vars}" Height="53" Width="349">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Background="{Binding Path=color}" Height="15" Width="{Binding Path=elapsedtime}"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
    </StackPanel>

I also have a class called TrackList containing collection of Tracks. I tried to use HierarchicalDataTemplate to represent Hierarchical Data of TrackList. But it's not working..

I am new to WPF, and I have tried the below things so far:

    <DockPanel.Resources>
        <DataTemplate DataType="{x:Type src:Variation}">
            <TextBlock Background="{Binding Path=color}" Height="15" Width="{Binding Path=elapsedtime}"/>
        </DataTemplate>

        <HierarchicalDataTemplate DataType = "{x:Type src:Track}" ItemsSource = "{Binding Path=Vars}">
            <StackPanel/>
        </HierarchicalDataTemplate>
    </DockPanel.Resources>

public class TrackList : ViewModel
    {
        private ICollection<Track> tracks;
        private Track selectedTrack;
        public string Name 
        { get; set; }

        public TrackList()
        {
            this.tracks = new List<Track>();
            this.tracks.Add(new Track("T1"));
            this.tracks.Add(new Track("T2"));
            Name = "Track List";
            selectedTrack = tracks.ElementAt(1);
        }

        public ICollection<Track> Tracks
        {
            get { return this.Tracks; }
            set { this.Tracks = value; }
        }

        public Track SelectedTrack
        {
            get { return this.selectedTrack; }
            set
            {
                if (this.selectedTrack != value)
                {
                    this.selectedTrack = value;
                    this.OnPropertyChanged("SelectedTrack");
                }
            }
        }
    }

public class Track : ViewModel
    {
        private ICollection<Variation> vars;
        private Variation selectedVar;
        public string Name { get; set; }

        public Track()
        {
            Init();
        }

        public Track(string p)
        {
            // TODO: Complete member initialization
            this.Name = p;
            Init();
        }

        private void Init()
        {
            this.vars = new List<Variation>();
            this.vars.Add(new Variation("var1", 20, Brushes.Red));
            this.vars.Add(new Variation("var2", 60, Brushes.Green));
            this.vars.Add(new Variation("var3", 40, Brushes.Khaki));
            this.vars.Add(new Variation("var4", 120, Brushes.Aqua));
            selectedVar = vars.ElementAt(1);
        }

        public ICollection<Variation> Vars
        {
            get { return this.vars; }
            set { this.vars = value; }
        }

        public Variation SelectedVar
        {
            get { return this.selectedVar; }
            set
            {
                if (this.selectedVar != value)
                {
                    this.selectedVar = value;
                    this.OnPropertyChanged("SelectedVar");
                }
            }
        }
    }

public class Variation : ViewModel
    {
        public int elapsedtime { get; set; }

        public string Name { get; set; }

        public System.Windows.Media.Brush color { get; set; }

        public Variation(string varname)
        {
            Name = varname;
        }

        public Variation(string name, int time, System.Windows.Media.Brush br)
        {
            // TODO: Complete member initialization
            this.Name = name;
            this.elapsedtime = time;
            this.color = br;
        }
    }

public abstract class ViewModel : INotifyPropertyChanged
    {
        private readonly Dispatcher _dispatcher;

        protected ViewModel()
        {
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected Dispatcher Dispatcher
        {
            get { return _dispatcher; }
        }

        protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            PropertyChanged(this, e);
        }

        protected void OnPropertyChanged(string propertyName)
        {
            OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }
    }

Please let me know for any farther information. Thanks

Answer 1

You can represent your hierarchical data using a TreeView :

<TreeView ItemsSource="{Binding Tracks}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type src:Track}" ItemsSource="{Binding Vars}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

Answer 2

I don't think you need HierarchicalDataTemplate , your tree has known number of levels (TrackList>Track>Variation). You can simply do this:

<DockPanel.Resources>
    <DataTemplate DataType="{x:Type src:Variation}">
        <TextBlock Background="{Binding Path=color}" Height="15" Width="{Binding Path=elapsedtime}"/>
    </DataTemplate>

    <DataTemplate DataType="{x:Type src:Track}">
        <StackPanel>
            <TextBlock Text="{Binding Name}"/>
            <ItemsControl ItemsSource="{Binding Vars}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </StackPanel>
    </DataTemplate>
</DockPanel.Resources>

<ItemsControl ItemsSource="{Binding Tracks}" />

Where ItemsControl bind to Tracks property of the TrackList (ItemsControl.DataContext = TrackList).