从数据库绑定分层树视图

Question

我对使用TreeView完全不熟悉。我的解决方案有两个项目，一个名为Business Layer，即一个类库，它从数据库和另一个实际的WPF应用程序本身获取数据。

我的Family数据库中有两个非常简单的表，其数据如下：

我的Business Layer项目中有四个类。

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）最后DataRetrieval.cs从数据库中获取数据。这里我有一个非常简单的存储过程，它基本上结合了Family和Person表。

我有以下课程：

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;

    }

}

现在在主WPF应用程序中，我创建了一个名为TreeViewModel的类，如下所示

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

现在在我的主窗口中，我想要一个在最后一个图中看起来的层次结构。所以我有一些样本xaml如下。 datacontext是TreeViewModel。我应该提到什么数据类型，它似乎将数据绑定到树视图。请帮助我做的错误。我得到了错误的输出

<!--
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>

我希望树视图看起来如下，