mostrar la ruta de la imagen en DataGrid en WPF

En este momento tengo una base de datos de SQL Server y deseo mostrar los artículos y su imagen respectiva en un DataGrid en WPF. Obtener los artículos no es un problema, sin embargo, tengo un problema para obtener y mostrar la imagen. Como este es un proyecto bastante antiguo, las imágenes son solo nombres de archivo y no blobs, por lo que también necesito mostrar la ruta al sitio web. Por ejemplo, www.mysite.com/images/imagename.

Estoy usando EF, y en el modelo, tengo un método para recuperar los artículos (GetAllArticles) y luego otros 2 métodos, uno para recuperar imágenes por página y otro para recuperar la imagen. Podría usar una vista para los 2 métodos, pero estoy usando LINQ y no estoy muy familiarizado con cómo combinar estos 2 métodos.

Entonces el modelo es así: -

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

En el WPF real, estoy vinculando el Datagrid de la siguiente manera: -

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

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

Y el Datagrid se ve así: -

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

¿Puedes decirme cómo harías esto?

Gracias por su ayuda y tiempo

preguntado el 27 de agosto de 11 a las 14:08

1 Respuestas

Veo que tienes esta plantilla.

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

¿Es el elemento de enlace de origen "im_name" la URL real de su imagen como una cadena? ¿Y tienes acceso a internet?

Si esos dos son ciertos, se mostrará su imagen.

Regrese a la forma más básica. Cree una nueva aplicación WPF en Visual Studio, haga una aplicación de prueba y verá que la imagen se enlaza y se muestra.

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

    }
}

Ver el enlace de origen a la ruta http de la cadena es suficiente para cargar la imagen desde la ruta web proporcionada.

Espero que esto te ayude.

Respondido 29 ago 11, 09:08

Hola Rhyous, gracias por tu respuesta. De hecho, decidí escribir una pequeña aplicación de conversión para obtener el byte de todas mis imágenes, de modo que pueda mostrarlas desde la base de datos. Creo que esta es la mejor manera de hacerlo, incluso cuando crearé mi nueva aplicación web. - JMon

Genial ... Escribiste el convertidor tú mismo o lo conseguiste en alguna parte ... Estoy seguro de que a la comunidad le encantaría verlo si se permite compartir la fuente. - Rhyous

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.