Silverlight4 DatagridでEntity Frameworkを使用してイメージを表示

Question

私はnorthwindデータベースのEmployee Entityを持っていますが、このエンティティのフィールドの1つは「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> 

私のModelViewコードは以下のとおりです。

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：

WCFコードのJPEG形式にバイナリ "フォト" フィールドを変換するように変更。

コードは以下のとおりです。

[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インターフェイスを実装する画像変換クラスを作成します。

コードは以下のとおりです。あなたは、データグリッドは、このようなByteToImageConverterクラスのrefernceを追加していXAMLファイルで

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

。

のxmlns：SRC = "CLR名前空間：NorthWind.SMS.UI.Converters"

ステップ5

このようなあなたのXAMLファイル内の静的リソースの詳細を追加します。

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

ステップ6

このようなあなたのデータグリッド画像のテンプレートを更新します。

<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> 

この解決策は私にとってうまくいきます。