WPF Treeview(MVVM)绑定源的实时表示(分组)

时间:2013-02-21 18:32:22

标签: wpf mvvm treeview wpf-controls reactiveui

任何人都可以提供WPF树视图的任何指针或示例(绑定到实时源),其中每个根节点及其子节点代表绑定源的不同类型的摘要?

道歉 - 我通常不会问这样开放的'写一些示例代码'这样的问题,但我对WPF相对较新,并且努力在最佳前进方向上立足。 < / p>

例如;

Year of Birth
 [] 80 (2)
 [] 85 (1)
 [] 90 (14)

Course
 [] Engineering (20)
 [] Accountancy (2)

Gender
 [] Male (10)
 [] Female (1)

例如,这个树视图将被绑定到可观察的学生列表(学生模型将包含他们的DOB,课程学习和性别)。 []表示一个复选框,允许用户根据数据源的选择过滤数据源。

PS。我将使用MVVM方法并计划使用ReactiveUI。

2 个答案:

答案 0 :(得分:1)

让我们从基础开始 - 实际上代表这个观点:

IEnumerable<ICategoryTileViewModel> TreeView;

public interface ICategoryTileViewModel
{
    public string CategoryName { get; set; }
    public IEnumerable<IFilterValueTileViewModel> Children { get; set; }
}

public interface IFilterValueTileViewModel
{
    public bool Checked { get; set; }
    public string Description { get; set; }
    public int CurrentCount { get; set; }
}

如何生成TreeView取决于您的数据源的外观,您尚未提及。但是,它几乎肯定涉及GroupBy运算符

答案 1 :(得分:0)

这涉及使用HierarchicalDataTemplate修改树视图的项模板,该模板应如下所示:

您的观点

<TreeView ItemsSource="{Binding Children, Mode=TwoWay}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children, Mode=TwoWay}">
            <StackPanel Orientation="Horizontal" ToolTip="{Binding Description}">
                <!--You can add your checkbox here and remove the image-->
                <Image Source="{Binding Icon}" Height="16" Width="16"/>
                <!--You can add your checkbox here and remove the image-->
                <TextBlock Text="{Binding Name}" Margin="4,0,4,0"/>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

您的VM应该继承此类

public abstract class VM
{
   public string Name {get; set;}
   public ObservableCollection<VM> Children {get; set;}
}

应用程序的数据上下文应该公开指向树视图的项目源的Children。

您必须将此扩展到您对树视图的摘要的想法。