Binding hierarchical treeview from database

问题

I am totally new to using TreeView. My solution has two projects one called the Business Layer i.e a class library that gets data from the database and the other actual WPF application itself.

I have two very simple tables in my Family database that have data as follows:

I have four classes in my Business Layer project.

1) ChildrenModel.cs

public class ChildrenModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public double Income { get; set; }
    public string Address { get; set; }
    public int FId { get; set; }
}

2) FamilyModel.cs

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

    public List<ChildrenModel> ChildenData { get; set; }
}

3) FamilyTemp.cs

public class FamilyTemp
{
    public int id { get; set; }
    public string name { get; set; }
}

4) Finally DataRetrieval.cs to get the data from database. Here I have a very simple stored procedure that basically combines both Family and Person table.

I have the following class:

public class DataRetrieval
   {
        List<FamilyModel> familyList = new List<FamilyModel>();
        List<ChildrenModel> childList = new List<ChildrenModel>();
        List<FamilyTemp> familyNames = new List<FamilyTemp>();
        using (SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0; AttachDbFilename=|DataDirectory|\Families.mdf; Integrated Security=True; Connect Timeout=30;"))
        {

            con.Open();
            //int count = 1;
            //int temp = 1;
            SqlCommand cmd = new SqlCommand("sp_GetFamilies", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                ChildrenModel cModel = new ChildrenModel();
                cModel.Name = dr["PersonName"].ToString();
                cModel.Age = Convert.ToInt32(dr["PersonAge"]);
                cModel.Address = dr["PersonAddress"].ToString();
                cModel.Income = double.Parse(dr["PersonIncome"].ToString());
                cModel.FId = Convert.ToInt32(dr["FamilyId"]);
                childList.Add(cModel);

            }
            dr.Close();
            SqlCommand cmd1 = new SqlCommand("Select Distinct * from Family", con);
            SqlDataReader dr1 = cmd1.ExecuteReader();
            while (dr1.Read())
            {
                FamilyTemp ft = new FamilyTemp()
                {
                    id = Convert.ToInt32(dr1["Id"]),
                    name = dr1["Name"].ToString()
                };
                familyNames.Add(ft);
            }

            for (int i = 0; i < familyNames.Count; i++)
            {
                FamilyModel fModelResult = new FamilyModel();
                fModelResult.Name = familyNames[i].name;
                foreach (var item in childList.Where(x => x.FId == familyNames[i].id).ToList())
                {
                    fModelResult.ChildenData.Add(item);
                }
                familyList.Add(fModelResult);
            }

        }
        return familyList;

    }

}

Now in the main WPF application I created a class called TreeViewModel as follows

public class TreeViewModel:INotifyPropertyChanged
{
    private List<FamilyModel> _familyList;
    public List<FamilyModel> FamilyList
    {
        get
        {
            return _familyList;
        }
        set
        {
            _familyList = value;
            NotifiyPropertyChanged("FamilyList");
        }
    }
    public TreeViewModel()
    {

        FamilyList = DataRetrieval.familyData();
    }



    void NotifiyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(property));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Now in my main Window I want a hierarchical structure that looks in the last figure. So I have some sample xaml as follows. The datacontext is the TreeViewModel. What datatype should I mention and it dosent seem to bind the data to the treeview. please help what mistake am I doing.I get some wrong output as

<!--
self namespace is:
xmlns:self="clr-namespace:BusinessLayer;assembly=BusinessLayer"
-->
<Grid>
    <TextBlock Text="Family Tree" Foreground="Red"></TextBlock>
    <TreeView Margin="10" Height="200">
        <HierarchicalDataTemplate ItemsSource="{Binding FamilyList}" DataType="{x:Type self:FamilyModel}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"></TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type self:ChildrenModel}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"></TextBlock>
                <TextBlock Text="{Binding Age}"></TextBlock>
            </StackPanel>
        </DataTemplate>

    </TreeView>
</Grid>

I want the treeview to look as follows,

来源：https://stackoverflow.com/questions/38084429/binding-hierarchical-treeview-from-database