在WPF中的DataGrid中显示图像路径

Question

目前我有一个 SQL Server 数据库，我希望在 WPF 的 DataGrid 中显示文章及其各自的图像。获取文章没有问题，但是我在获取和显示图像时遇到问题。由于这是一个相当古老的项目，图像只是文件名而不是 blob，因此我还需要显示网站的路径。例如 www.mysite.com/images/imagename。

我正在使用 EF，在模型中，我有一种方法来检索文章 (GetAllArticles)，然后另外两种方法，一种用于按页检索图像，另一种用于检索图像。我可以使用这两种方法的视图，但我使用的是 LINQ，并且不太熟悉如何将这两种方法组合在一起。

所以模型是这样的：-

    public List<HS_Articles>GetAllArticles()
    {
        var res = from art in HSEntities.HS_Articles select art;
        return res.ToList();
    }

    public List<HS_Images_Pages> GetImagesByPage(int pageId, int subPageId)
    {
        var res = HSEntities.HS_Images_Pages.Where(img => img.im_page_id == pageId && img.sub_page_id == subPageId);
        return res.ToList();
    }

    public HS_Images GetImage(int imgId)
    {
        var res = HSEntities.HS_Images.Where(img => img.im_id == imgId);
        return res as HS_Images;
    }

在实际的 WPF 中，我按如下方式绑定数据网格：-

    private void LoadArticles()
    {
        var articlesDal = new ArticlesDAL();

        var items = new List<HS_Articles>();
        items = articlesDal.GetAllArticles();
        dgArticles.ItemsSource = items;
        dgArticles.Items.Refresh();
    }

数据网格看起来像这样：-

            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=ArticleID}" Header="ID" SortMemberPath="ArticleID" Width="30" />
                <DataGridTextColumn Binding="{Binding Path=Title}" Header="Title" SortMemberPath="Abstract" Width="250">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextWrapping" Value="NoWrap" />
                            <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Date" SortMemberPath="AddedDate" Binding="{Binding AddedDate}" Width="150" />
                <DataGridTextColumn Binding="{Binding Path=Abstract}" Header="Abstract" SortMemberPath="Abstract" Width="450">
                    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="TextWrapping" Value="NoWrap" />
                            <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding Path=AddedBy}" Header="Added By" SortMemberPath="AddedBy" Width="150" />
                <DataGridTemplateColumn Header="Image">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Path=im_name, Mode=OneWay}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

你能告诉我你会如何做到这一点吗？

感谢您的帮助和时间

Answer 1

我看到你有这个模板。

<DataGridTemplateColumn Header="Image">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=im_name, Mode=OneWay}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

您是否将绑定项“im_name”作为图像的实际 URL 作为字符串来源？
您可以上网吗？

如果这两个为真，您的图像就会显示。

把它带回到最基本的形式。在 Visual Studio 中创建一个新的 WPF 应用程序，制作一个测试应用程序，您将看到图像绑定并显示。

MainWindow.xaml

<Window x:Class="TestImage.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        >
    <StackPanel>
        <Image Name="MyImage" Source="{Binding ImagePath}" />
        <DataGrid Name="MyDataGrid" AutoGenerateColumns="False" EnableRowVirtualization="True"
                  ItemsSource="{Binding}" RowDetailsVisibilityMode="VisibleWhenSelected">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="IdColumn" Binding="{Binding Path=Id}" Header="Id" />
                <DataGridTextColumn x:Name="ImagePathColumn" Binding="{Binding Path=ImagePath}" 
                                    Header="Image Path" />
                <DataGridTemplateColumn x:Name="ImageColumn" Header="Image">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Path=ImagePath}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Window>

MainWindows.xaml.cs

using System;
using System.Windows;
using System.Windows.Media;
using System.Collections.ObjectModel;

namespace TestImage
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MyData data1 = new MyData() { Id = 1, ImagePath = "http://www.rhyous.com/wp-content/themes/rhyous/swordtop.png" };
            MyImage.DataContext = data1;

            ObservableCollection<MyData> DataList = new ObservableCollection<MyData>();
            DataList.Add(data1);
            MyData data2 = data2 = new MyData() { Id = 2, ImagePath = "http://gigabit.com/images/whmcslogo.gif" };

            MyDataGrid.ItemsSource = DataList;
        }
    }

    public class MyData
    {
        public String ImagePath { get; set; }
        public int Id { get; set; }

    }
}

请参阅将 Source 绑定到字符串的 http 路径足以从给定的 Web 路径加载图像。

我希望这对你有帮助。