엔터티 프레임 워크를 사용하여 Silverlight4 Datagrid에 이미지 표시

Question

northwind 데이터베이스의 Employee Entity가 있고이 엔터티 필드 중 하나가 "Photo"이며 "Binary"유형입니다.

이제 내 질문은 직원 사진을 볼 수 있도록 Silverlight 4 DataGrid에 "사진"필드를 어떻게 표시해야합니까?

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 단계 :

는 실버 라이트 프로젝트에서 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(); 
     } 
    } 

당신이 당신의 데이터 그리드는이 같은 ByteToImageConverter 클래스의 refernce를 추가 가지고있는 XAML 파일에서 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> 

이 솔루션은 저를 위해 잘 작동합니다.