Question

我有northwind数据库的Employee Entity，这个实体的一个字段是“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接口的Image Converter类。

代码如下所示;

 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步

像这样更新您的数据网格图像模板;

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

这个解决方案对我来说很合适。

使用Entity Framework在Silverlight4 Datagrid中显示图像

1 个答案: