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

Question

我有北风数据库的员工实体，该实体的字段之一是“照片”，其类型为“二进制”。

现在我的问题是我应该如何在 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 接口的图像转换器类。

代码如下所示；

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

这个解决方案对我来说效果很好。