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 { getset; }
            
public int Width { getset; }
            
public int Height { getset; }
            
public string Source { getset; }
            
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(110050"icon/btnNew.jpg"));
            list.Add(
new Model(250100"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(110050"icon/btnNew.jpg"));
            list.Add(
new Model(250100"icon/btnOpen.jpg"));
            list.Add(
new Model(350100"icon/btnOpen.jpg"));

            dgList.ItemsSource 
= list;
        }
    }
}

 

posted @ 2010-07-19 10:59  大气象  阅读(4951)  评论(9编辑  收藏  举报
http://www.tianqiweiqi.com