Question

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

我正在使用EF，在模型中，我有一个方法来检索文章（GetAllArticles），然后是另外两个方法，一个用于检索imagesbypage，另一个用于检索图像。我可以使用2种方法的视图，但我使用的是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中，我按如下方式绑定Datagrid： -

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

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

Datagrid看起来像这样： -

            <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路径加载图像。

我希望这会对你有所帮助。

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

1 个答案: