在DataGrid中顯示圖片

在DataGrid中顯示圖片有兩種要求，一種是固定圖片，如刪除圖標；一種是根據字段值決定顯示哪張圖片。

在VS中加入一個類BootToTimageConverter（此處代碼為網上引用，感謝原作者）：

namespace SilverlightApplication11
{
        public class BoolToImageConverter : BoolToValueConverter<string> { }
        public class BoolToValueConverter<T> : IValueConverter
        {
            public T FalseValue { get; set; }
            public T TrueValue { get; set; }

            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value == null)
                    return FalseValue;
                else
                    return (bool)value ? TrueValue : FalseValue;
            }

            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                return value != null ? value.Equals(TrueValue) : false;
            }
        }
   }

 

XAML中DataGrid的定義：

        <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}" >
            <!--聲明對BoolToImageConverter的引用，根據布爾字段值顯示相應的圖片-->
            <sdk:DataGrid.Resources>
                <myc:BoolToImageConverter   x:Key="boolconvert"
                                         TrueValue="/SilverlightApplication11;component/Images/mail.png"
                                         FalseValue="/SilverlightApplication11;component/Images/femail.png"/>
            </sdk:DataGrid.Resources>
            <sdk:DataGrid.Columns>
                <!--在DataGrid前加一列小圖標（最好16*16）,並且調用MouseLeftButtonUP事件-->
                <sdk:DataGridTemplateColumn  CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="刪除" Width="Auto" >
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                              <Image Source="/SilverlightApplication11;component/Images/cross.png" Height="16" Width="16" Cursor="Hand" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
                         </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTextColumn Binding="{Binding id, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="學號" Width="Auto" />
                <sdk:DataGridTextColumn Binding="{Binding name, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="姓名" Width="Auto" />
                <sdk:DataGridTextColumn Binding="{Binding dept, Mode=TwoWay}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="院系" Width="Auto" />
                <!--定義模板列，並調用boolconvert方法，實現顯示不同的圖片-->
                <sdk:DataGridTemplateColumn Header="性別">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding sex, Mode=TwoWay, Converter={StaticResource boolconvert}}"
                                  Width="16" Height="16" />
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

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