WPF中自定义DataGrid控件

之前项目中要用到DataGrid这个控件，让显示读取本地文件夹下的东西。这个文件夹包含三个东西，一个是png图片一个是TXT文本，另一个是一个.lmf文件。要求是把图片以及txt里的文本同时显示在DataGrid里。显示文字还算简单一点，绑定一下就行啦。至于在DataGrid上显示图片以前没接触过，于是就baidu啦或google啦，费了一些时间，找到了一些类似的Demo，于是就对类似的进行了一番修改与优化。整理了一下贴出来，以备需要的人用。

下面是XAML：

1 < Grid x:Name ="LayoutRoot" ShowGridLines ="True" >
2 < Grid.ColumnDefinitions >
3 < ColumnDefinition />
4 </ Grid.ColumnDefinitions >
5 < Canvas >
6 < Canvas.Background >
7 < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
8 < GradientStop Color ="Black" Offset ="1" />
9 < GradientStop Color ="#FFA6D3F9" />
10 </ LinearGradientBrush >
11 </ Canvas.Background >
12 </ Canvas >
13
14 < DataGrid
15 x:Name ="dataGrid1"
16 IsReadOnly ="True"
17 Width ="Auto" Height ="Auto"
18 HorizontalScrollBarVisibility ="Hidden" SelectionMode ="Extended"
19 CanUserAddRows ="False" CanUserDeleteRows ="False"
20 CanUserResizeRows ="False" CanUserSortColumns ="False"
21 AutoGenerateColumns ="False" ItemsSource =" {Binding Path=EduFilePathList} "
22 SelectedIndex =" {Binding Path=DataGridSelectedIndex} "
23 HorizontalGridLinesBrush ="#00000000" VerticalGridLinesBrush ="#00000000" Background =" {x:Null} "
24 BorderBrush =" {x:Null} " Foreground =" {x:Null} " Margin ="-6,0,8,0" >
25
26 < DataGrid.Columns >
27 < DataGridTemplateColumn Header ="" >
28 < DataGridTemplateColumn.CellTemplate >
29 < DataTemplate >
30 < Grid Height ="75" Background ="Transparent" >
31 < Grid.ColumnDefinitions >
32 < ColumnDefinition Width ="*" />
33 < ColumnDefinition Width ="6*" />
34 </ Grid.ColumnDefinitions >
35 < Grid Margin ="10,0,0,0" Grid.Column ="1" >
36 < Grid.RowDefinitions >
37 < RowDefinition Height ="*" />
38 < RowDefinition Height ="2*" />
39 </ Grid.RowDefinitions >
40 < TextBlock Grid.Row ="0" Margin ="0,5,0,0" Height ="24" Foreground ="Red" FontSize ="20" FontFamily ="方正舒体" TextWrapping ="Wrap" Text =" {Binding Sex} " />
41 < TextBlock Margin ="1.429,15,0,0" Foreground ="Blue" Grid.Row ="1" FontFamily ="微软雅黑" TextWrapping ="Wrap" Text =" {Binding Name} " />
42 </ Grid >
43 < Image Margin ="7,9,8,8" Source =" {Binding Pic} " />
44
45 </ Grid >
46 </ DataTemplate >
47 </ DataGridTemplateColumn.CellTemplate >
48 </ DataGridTemplateColumn >
49 </ DataGrid.Columns >
50 < DataGrid.ColumnHeaderStyle >
51 < Style TargetType ="DataGridColumnHeader" >
52 < Setter Property ="Background" Value ="#00000000" >
53
54 </ Setter >
55 < Setter Property ="Foreground" Value ="White" />
56 < Setter Property ="FontSize" Value ="1" />
57 </ Style >
58 </ DataGrid.ColumnHeaderStyle >
59 < DataGrid.RowStyle >
60 < Style TargetType ="DataGridRow" >
61 < Setter Property ="Background" Value ="#00000000" />
62 < Setter Property ="BorderBrush" Value ="#00000000" />
63 < Setter Property ="Foreground" Value ="White" />
64 < Setter Property ="FontSize" Value ="13" />
65 < Style.Triggers >
66 < Trigger Property ="IsMouseOver" Value ="True" >
67 < Setter Property ="Background" >
68 < Setter.Value >
69 < LinearGradientBrush StartPoint ="1,0" EndPoint ="0,1" >
70 < GradientStop Color ="#FF013B48" Offset ="0" />
71 < GradientStop Color ="#FF054C58" Offset ="1" />
72 < GradientStop Color ="#FF2B809A" Offset ="0.295" />
73 < GradientStop Color ="#FF287D96" Offset ="0.68" />
74 </ LinearGradientBrush >
75 </ Setter.Value >
76 </ Setter >
77 < Setter Property ="Foreground" Value ="White" />
78 </ Trigger >
79 </ Style.Triggers >
80 </ Style >
81 </ DataGrid.RowStyle >
82 </ DataGrid >
83
84 </ Grid >

简单的对XAML说一下，上面的DataGrid的部分属性绑定是在之前项目用到的，此处并无其他用，但可以证明的是对于每一项的选择我们可以像类似listbox那样利用索引去处理SelectedChanged事件。里面涉及到一些效果，此处此处可有可无，不用注意。主要是<DataGrid.Columns>。

在下面是后台的代码：

1 public partial class MainWindow : Window
2 {
3 public class user:INotifyPropertyChanged
4 {
5 private string _name;
6 private string _sex;
7 private string _Pic;
8 public event PropertyChangedEventHandler PropertyChanged;
9 public string Name
10 {
11 get { return _name; }
12 set { _name = value;
13 NotifyPropertyChanged( " Name " );
14 }
15 }
16 public string Sex
17 {
18 get { return _sex; }
19 set { _sex = value;
20 NotifyPropertyChanged( " Sex " );
21 }
22 }
23
24 public string Pic
25 {
26 get { return _Pic; }
27 set { _Pic = value;
28 NotifyPropertyChanged( " Pic " );
29 }
30 }
31
32 public void NotifyPropertyChanged( string propertyName)
33 {
34 if (PropertyChanged != null )
35 {
36 PropertyChanged( this , new PropertyChangedEventArgs(propertyName));
37 }
38 }
39
40 }
41 public MainWindow()
42 {
43 this .InitializeComponent();
44 List < user > users = new List < user > ();
45 users.Add( new user()
46 { Name = " 名字：贾宝玉 人物介绍：此为红楼梦的男主角。 " ,
47 Sex = " 性别：男 " ,Pic = " E:\\pic.png " });
48 users.Add( new user()
49 { Name = " 名字：林黛玉 人物介绍：此为红楼梦的女主角。 " ,
50 Sex = " 性别：女 " ,Pic = " E:\\pic.png " });
51 users.Add( new user()
52 { Name = " 名字：王熙凤 人物介绍：此人不太认识，因为没看过红楼梦。 " ,
53 Sex = " 性别：女 " ,Pic = " E:\\pic.png " });
54 users.Add( new user()
55 { Name = " 名字：薛宝钗 人物介绍：此人不太认识，因为没看过红楼梦。 " ,
56 Sex = " 性别：女 " ,Pic = " E:\\pic.png " });
57 users.Add( new user()
58 { Name = " 名字：史湘云 人物介绍：此人不太认识，因为没看过红楼梦。 " ,
59 Sex = " 性别：女 " ,Pic = " E:\\pic.png " });
60 dataGrid1.ItemsSource = users;
61 }
62 }

此处要加上头文件using System.ComponentModel;

下面是DataGrid里显示图片以及文字的预览：

对于此处有个问题一直也没时间去弄，就是我们整个DataGrid整体往窗体外移了一小部分，因为在DataGrid左侧总有一块白的区域，暂时还没有什么好方法给去掉，希望路人能给指点一二。

写的不好，请多板砖。。。