Silverlight使用DataGrid的模板列(DataGridTemplateColumn)实现类似TreeListView控件的效果

 

 

TreeListView是挺好的控件，VC++项目中用得挺多。
Silverlight控件应该没有，我没有找到，请高手指点。
先不择手段实现功能再说吧。
要实现的效果如图：

 

<UserControl x:Class="HCLoad.uc_DataGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid Height="300" HorizontalAlignment="Left" Name="dgList" Width="600">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="ID" Binding="{Binding ID}" Width="100"></sdk:DataGridTextColumn>
                <sdk:DataGridTemplateColumn Header="分类">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Width="{Binding Width}" Height="{Binding Height}" Source="{Binding Source}" MouseLeftButtonDown="Image_MouseLeftButtonDown"></Image>
                            </StackPanel>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HCLoad
{
    public partial class uc_DataGrid : UserControl
    {
        public uc_DataGrid()
        {
            InitializeComponent();
            Bind();
        }
        List<Model> list = new List<Model>();
        public class Model
        {
            public int ID { get; set; }
            public int Width { get; set; }
            public int Height { get; set; }
            public string Source { get; set; }
            public Model() { }
            public Model(int _ID, int _Width, int _Height, string _Source)
            {
                ID = _ID;
                Width = _Width;
                Height = _Height;
                Source = _Source;
            }
        }
        private void Bind()
        {
            list.Clear();
            list.Add(new Model(1, 100, 50, "icon/btnNew.jpg"));
            list.Add(new Model(2, 50, 100, "icon/btnOpen.jpg"));

            dgList.ItemsSource = list;
        }
        /*想实现类似treelistview控件的效果
         * 1.动态绑定Image控件的图像
         * 2.单击图像，比如+号，展开子列表。
         *   这个过程，其实是重新绑定数据。
         * 3.感觉上应该可以动态隐藏DataGrid的部分行，但是我没有找到方法，请教高手。
         */
        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Model model = dgList.SelectedItem as Model;
            //MessageBox.Show(model.ID.ToString());
            if (model.ID == 1)
            {
                BindNew();
            }
        }
        private void BindNew()
        {
            list.Clear();
            list.Add(new Model(1, 100, 50, "icon/btnNew.jpg"));
            list.Add(new Model(2, 50, 100, "icon/btnOpen.jpg"));
            list.Add(new Model(3, 50, 100, "icon/btnOpen.jpg"));

            dgList.ItemsSource = list;
        }
    }
}