使用实体框架在Silverlight4 Datagrid中显示图像

Question

我有Northwind数据库的Employee实体，并且此实体的字段之一是“Photo”，其类型是“Binary”。

现在我的问题是我应该如何在Silverlight 4数据网格中显示“照片”字段，以便我可以查看员工照片？

我需要在我的WCF代码或我的ModelView代码中使用待办事项？

我的XAML代码如下：

<navigation:Page x:Class="NorthWind.SMS.UI.Views.EmployeeListing" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      mc:Ignorable="d" 
      xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
      d:DesignWidth="640" d:DesignHeight="480" 
      Title="EmployeeListing Page" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"> 
    <Grid x:Name="LayoutRoot"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="50" MaxHeight="50" MinHeight="50" /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid Height="Auto" HorizontalAlignment="Left" Margin="5,5,0,0" Name="grid1" VerticalAlignment="Top" Width="Auto" /> 
     <TextBlock Grid.Row="0" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="tbHeader" Text="Employee Listing" VerticalAlignment="Top" FontSize="14" FontFamily="Verdana" TextAlignment="Center" /> 
     <sdk:DataGrid Grid.Row="1" ItemsSource="{Binding Path=Employees}" AutoGenerateColumns="False" Height="Auto" HorizontalAlignment="Left" Margin="5,5,0,0" Name="dgEmployee" VerticalAlignment="Top" Width="Auto" AlternatingRowBackground="{x:Null}"> 
      <sdk:DataGrid.Columns> 
       <sdk:DataGridTemplateColumn Header="Name"> 
        <sdk:DataGridTemplateColumn.CellTemplate> 
         <DataTemplate> 
          <TextBlock> 
           <Run Text="{Binding EmployeeName.TitleOfCourtesy}"></Run> 
           <Run Text="{Binding EmployeeName.FirstName}"></Run> 
           <Run Text="{Binding EmployeeName.LastName}"></Run></TextBlock> 
         </DataTemplate> 
        </sdk:DataGridTemplateColumn.CellTemplate> 
       </sdk:DataGridTemplateColumn> 
       <sdk:DataGridTextColumn Binding="{Binding Path=Title}" Header="Title" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=HireDate}" Header="HireDate" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=BirthDate}" Header="DOB" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=HomePhone}" Header="Phone" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=City}" Header="City" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=Region}" Header="Region" /> 
       <sdk:DataGridTextColumn Binding="{Binding Path=Country}" Header="Country" /> 
      </sdk:DataGrid.Columns> 
     </sdk:DataGrid> 
    </Grid> 
</navigation:Page> 

我的模型视图代码如下给出;

private void RefreshEmployees() 
     { 
      this.serviceClient.GetEmployeesListingCompleted += (s, e) => 
       { 
        this.Employees = e.Result; 
       }; 
      this.serviceClient.GetEmployeesListingAsync(); 

     } 

所获得的数据我的WCF的代码如下显示;

[OperationContract] 
     public IEnumerable<Employee> GetEmployeesListing() 
     { 
      using (var context = new NorthwindEntities()) 
      { 
       //context.ContextOptions.LazyLoadingEnabled = false; 
       var result = context.Employees.ToList(); 
       result.ForEach(e => context.Detach(e)); 
       return result; 
      } 
     } 

Answer 1

我发现我的问题的答案在这里是我做的;

第1步：修改转换的二进制 “照片” 字段为JPEG格式

WCF代码。

代码如下所示;

[OperationContract] 
     public IEnumerable<Employee> GetEmployeesListing() 
     { 
      List<Employee> empList = new List<Employee>(); 
      using (var context = new NorthwindEntities()) 
      { 
       //context.ContextOptions.LazyLoadingEnabled = false; 
       var result = context.Employees.ToList(); 
       result.ForEach(e => context.Detach(e)); 
       //return result; 
       foreach (Employee emp in result) 
       { 
        Employee e = new Employee(); 
        e.EmployeeName.TitleOfCourtesy = emp.EmployeeName.TitleOfCourtesy; 
        e.EmployeeName.FirstName = emp.EmployeeName.FirstName; 
        e.EmployeeName.LastName = emp.EmployeeName.LastName; 
        e.Title = emp.Title; 
        e.HireDate = emp.HireDate; 
        e.BirthDate = emp.BirthDate; 
        e.City = emp.City; 
        e.Region = emp.Region; 
        e.Country = emp.Country; 
        if (emp.Photo != null) 
        { 
         byte[] blob = emp.Photo; 
         using (MemoryStream ms = new MemoryStream()) 
         { 
          ms.Write(blob, 78, blob.Length - 78); 
          Bitmap bm = (Bitmap)Image.FromStream(ms); 
          using (MemoryStream msJpg = new MemoryStream()) 
          { 
           bm.Save(msJpg, ImageFormat.Jpeg); 
           e.Photo = msJpg.GetBuffer(); 
          } 
         } 
        } 

        empList.Add(e); 
       } 
       return empList; 
      } 
     } 

第2步：

创建一个图像转换器类实现在你的Silverlight项目的界面的IValueConverter。

代码如下所示;

public class ByteToImageConverter : IValueConverter 
    { 
     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      byte[] pic = value as byte[]; 
      if (value != null) 
      { 

       MemoryStream ms = new MemoryStream((byte[])value, false); 
       BitmapImage bmi = new BitmapImage(); 
       bmi.SetSource(ms); 
       return bmi; 
      } 
      else return null; 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
     { 
      throw new NotImplementedException(); 
     } 
    } 

步骤4

在你有你的数据网格中添加ByteToImageConverter类这样的refernce XAML文件;

的xmlns：SRC = “CLR的命名空间：NorthWind.SMS.UI.Converters”

步骤5

添加在你这样的XAML文件中的静态资源的详细信息;

<UserControl.Resources> 
     <src:ByteToImageConverter x:Key="ConvertToImage"> 
     </src:ByteToImageConverter> 
    </UserControl.Resources> 

步骤6

更新你这样的DataGrid的图像模板;

<sdk:DataGridTemplateColumn> 
        <sdk:DataGridTemplateColumn.CellTemplate> 
         <DataTemplate> 
          <Image x:Name="img1" Source ="{Binding Path=Photo, Converter={StaticResource ConvertToImage}}" Width="75" Height="75" Visibility="Visible"/> 
         </DataTemplate> 
        </sdk:DataGridTemplateColumn.CellTemplate> 
       </sdk:DataGridTemplateColumn> 

此解决方案对我来说工作得很好。