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左侧总有一块白的区域，暂时还没有什么好方法给去掉，希望路人能给指点一二。

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