在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的引用。