树形图的比较

MVC：
MVC树形图实现需要环境：bootstrap.css叠层样式、jquery-2.0.3.min.js代码库
Html代码：

<a href="#" id="offen">常用WPF控件</a>
    <a href="#" id="dianjishouqi" style="display:none;">点击收起</a>
    <h5 style="display:none;" name="neirong">指针</h5>
    <h5 style="display:none;" name="neirong">Border</h5>
    <h5 style="display:none;" name="neirong">Button</h5>
    <h5 style="display:none;" name="neirong">CheckBox</h5>
    <h5 style="display:none;" name="neirong">ComboBox</h5>
    <h5 style="display:none;" name="neirong">Grid</h5>
    <h5 style="display:none;" name="neirong">Image</h5>
    <h5 style="display:none;" name="neirong">Lable</h5>
    <br />
    <a href="#" id="Only">所有WPF控件</a>
    <a href="#" id="dianjishouqi1" style="display:none;">点击收起</a>
    <h5 style="display:none;" name="neirong1">Canvas</h5>
    <h5 style="display:none;" name="neirong1">DockPicker</h5>
    <h5 style="display:none;" name="neirong1">Ellipse</h5>
    <h5 style="display:none;" name="neirong1">Menu</h5>
    <h5 style="display:none;" name="neirong1">PasswordBox</h5>
    <h5 style="display:none;" name="neirong1">Slider</h5>
    <h5 style="display:none;" name="neirong1">TextBox</h5>
    <h5 style="display:none;" name="neirong">TextBlock</h5>
    <br />
<a href="#" id="changgui">常规</a>

Javascript代码：

<script type="text/javascript">
        $("#offen").click(function () {
            var index = $('h5[name="neirong"]').css("display", "block");
            for (var i = 0; i < index.length; i++) {
                var indexs = index[i];
            }
            $("#offen").css("display", "none");
            $("#dianjishouqi").css("display", "block");
        });
        $("#dianjishouqi").click(function () {
            var index = $('h5[name="neirong"]').css("display", "none");
            for (var i = 0; i < index.length; i++) {
                var indexs = index[i];
            }
            $("#offen").css("display", "block");
            $("#dianjishouqi").css("display", "none");
        });
        $("#Only").click(function () {
            var index = $('h5[name="neirong1"]').css("display", "block");
            for (var i = 0; i < index.length; i++) {
                var indexs = index[i];
            }
            $("#Only").css("display", "none");
            $("#dianjishouqi1").css("display", "block");
        });
        $("#dianjishouqi1").click(function () {
            var index = $('h5[name="neirong1"]').css("display", "none");
            for (var i = 0; i < index.length; i++) {
                var indexs = index[i];
            }
            $("#Only").css("display", "block");
            $("#dianjishouqi1").css("display", "none");
        });
    </script>

代码讲解：
使用jQuery插件库获取html的# offen ID点击事件，click点击触发offen，获取所有树形内容name值并且声明index索引变量，进行for循环遍历树形内容长度，获取完7个索引内容，进行css样式处理把树形内容display block显示出来，触发offen的点击事件后进行一次切换事件收起。
MVC树形图：

WPF代码：

<TreeView>
        <TreeViewItem Header="常用WPF控件" IsExpanded="True">
            <TreeViewItem Header="指针"></TreeViewItem>
            <TreeViewItem Header="Border"></TreeViewItem>
            <TreeViewItem Header="Button"></TreeViewItem>
            <TreeViewItem Header="CheckBox"></TreeViewItem>
            <TreeViewItem Header="ComboBox"></TreeViewItem>
            <TreeViewItem Header="Grid"></TreeViewItem>
            <TreeViewItem Header="Image"></TreeViewItem>
            <TreeViewItem Header="Lable"></TreeViewItem>
        </TreeViewItem>
        <TreeViewItem Header="所有WPF控件" IsExpanded="True">
            <TreeViewItem Header="Canvas"></TreeViewItem>
            <TreeViewItem Header="DockPicker"></TreeViewItem>
            <TreeViewItem Header="Ellipse"></TreeViewItem>
            <TreeViewItem Header="Menu"></TreeViewItem>
            <TreeViewItem Header="PasswordBox"></TreeViewItem>
            <TreeViewItem Header="Slider"></TreeViewItem>
            <TreeViewItem Header="TextBox"></TreeViewItem>
            <TreeViewItem Header="TextBlock"></TreeViewItem>
        </TreeViewItem>
        <TreeViewItem Header="常规"></TreeViewItem>
</TreeView>

代码讲解：
TreeView表示显示在树结构中分层数据具有项目可展开和折叠的控件。
TreeViewItem 实现 System.Windows.Controls.TreeView 控件中的可选择项。
Header获取或设置标记控件的项目。
IsExpanded获取或设置 System.Windows.Controls.TreeViewItem 中的嵌套项是处于展开状态还是折叠状态。

WPF树形图：

总结：同样是Visual Studio 写出来的，但WPF写的比较简单