使用實體框架在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> 

此解決方案對我來說工作得很好。