Отображение изображения в Silverlight4 Datagrid с использованием Entity Framework

Question

У меня есть Employee Entity базы данных Northwind, и одно из полей этой сущности - «Photo» типа «Binary».

Теперь у меня вопрос, как мне отображать поля «Photo» всетку данных 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:

Создайте класс Image Converter, реализующийИнтерфейс IValueConverter в вашем проекте Silverlight.

Код показан ниже;

 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

В XAMLфайл, в котором у вас есть сетка данных, добавьте ссылку на класс ByteToImageConverter, например так:

xmlns: src = "пространство имен clr: NorthWind.SMS.UI.Converters"

Шаг 5

Добавьте сведения о статическом ресурсе в ваш XAML-файл следующим образом:

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

Шаг 6

Обновите шаблон изображения сетки данных следующим образомthis;

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

Это решение отлично работает для меня.