在DataGrid中显示图片

在DataGrid中显示图片有两种要求，一种是固定图片，如删除图标；一种是根据字段值决定显示哪张图片。

在VS中加入一个类BootToTimageConverter（此处代码为网上引用，感谢原作者）：

 1 namespace SilverlightApplication11
 2 {
 3         public class BoolToImageConverter : BoolToValueConverter<string> { }
 4         public class BoolToValueConverter<T> : IValueConverter
 5         {
 6             public T FalseValue { get; set; }
 7             public T TrueValue { get; set; }
 8 
 9             public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
10             {
11                 if (value == null)
12                     return FalseValue;
13                 else
14                     return (bool)value ? TrueValue : FalseValue;
15             }
16 
17             public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
18             {
19                 return value != null ? value.Equals(TrueValue) : false;
20             }
21         }
22    }

 

XAML中DataGrid的定义：

 1         <sdk:DataGrid AutoGenerateColumns="false" Height="104" HorizontalAlignment="Left" Margin="12,54,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="312" ItemsSource="{Binding ElementName=table_1DomainDataSource, Path=Data}" >
 2             <!--声明对BoolToImageConverter的引用，根据布尔字段值显示相应的图片-->
 3             <sdk:DataGrid.Resources>
 4                 <myc:BoolToImageConverter   x:Key="boolconvert"
 5                                          TrueValue="/SilverlightApplication11;component/Images/mail.png"
 6                                          FalseValue="/SilverlightApplication11;component/Images/femail.png"/>
 7             </sdk:DataGrid.Resources>
 8             <sdk:DataGrid.Columns>
 9                 <!--在DataGrid前加一列小图标（最好16*16）,并且调用MouseLeftButtonUP事件-->
10                 <sdk:DataGridTemplateColumn  CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="删除" Width="Auto" >
11                     <sdk:DataGridTemplateColumn.CellTemplate>
12                         <DataTemplate>
13                               <Image Source="/SilverlightApplication11;component/Images/cross.png" Height="16" Width="16" Cursor="Hand" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
14                          </DataTemplate>
15                     </sdk:DataGridTemplateColumn.CellTemplate>
16                 </sdk:DataGridTemplateColumn>
17                 <sdk:DataGridTextColumn Binding="{Binding id, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="学号" Width="Auto" />
18                 <sdk:DataGridTextColumn Binding="{Binding name, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="姓名" Width="Auto" />
19                 <sdk:DataGridTextColumn Binding="{Binding dept, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="院系" Width="Auto" />
20                 <!--定义模板列，并调用boolconvert方法，实现显示不同的图片-->
21                 <sdk:DataGridTemplateColumn Header="性别">
22                     <sdk:DataGridTemplateColumn.CellTemplate>
23                         <DataTemplate>
24                             <Image Source="{Binding sex, Mode=TwoWay, Converter={StaticResource boolconvert}}"
25                                   Width="16" Height="16" />
26                         </DataTemplate>
27                     </sdk:DataGridTemplateColumn.CellTemplate>
28                 </sdk:DataGridTemplateColumn>
29             </sdk:DataGrid.Columns>
30         </sdk:DataGrid>


注意要在前面加上xmlns:myc="clr-namespace:SilverlightApplication11的引用。

 

posted @ 2012-07-25 19:26  ajeeky  阅读(3962)  评论(0)  编辑  收藏  举报