display image path in DataGrid in WPF

At the moment I have an SQL Server DB, and I wish to display the Articles and their respective image in a DataGrid in WPF. To get the Articles is no problem, however I have a problem to get and display the image. As this is quite an old project, the images are just filenames and not blobs, so I need to display also the path to the website. For example www.mysite.com/images/imagename.

I am using EF, and in the model, I have a method to retrieve the Articles (GetAllArticles) and then another 2 methods, one to retrieve imagesbypage, and another to retrieve the image. I could use a view for the 2 methods but I am using LINQ and am not very familiar on how to put these 2 methods together.

So the model is like this :-

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

In the actual WPF, I am binding the Datagrid as follows :-

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

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

And the Datagrid looks like this :-

            <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" />
                         开发者_StackOverflow中文版   <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>

Can you please tell me how you would do this?

Thanks for your help and time

I see you have this template.

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

Is you source binding item "im_name" the actual URL to your image as a string? And do you have internet access?

If those two are true your image will display.

Take it back to the most basic form. Create a new WPF Application in Visual Studio make a test app and you will see the image binds and displays.

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

    }
}

See the Source bind to the http path of the string is enough to load the image from the web path given.

I hope this helps you.