WPF의 DataGrid에 이미지 경로 표시

Question

현재 SQL Server DB가 있으며 기사와 해당 이미지를 WPF의 DataGrid에 표시하려고합니다. 아티클을 얻으려면 아무런 문제가 없지만 이미지를 표시하고 표시하는 데 문제가 있습니다. 이것은 꽤 오래된 프로젝트이므로 이미지는 방금 파일 이름이 아니라 얼룩이므로 웹 사이트 경로도 표시해야합니다. 예 : www.mysite.com/images/imagename

저는 EF를 사용하고 있으며, 모델에서 기사 (GetAllArticles)를 검색 한 다음 다른 2 가지 방법 (하나는 imagesbypage 검색, 다른 하나는 이미지 검색)이 있습니다. 2 가지 방법에 대한 뷰를 사용할 수 있지만 LINQ를 사용하고 있으며이 두 가지 방법을 함께 사용하는 방법에 익숙하지 않습니다.

그래서 모델은 다음과 같이이다 : - 실제 WPF에서

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

다음과 같이 내가 DataGrid에 바인딩하고있다 : -

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

    } 
} 

는 문자열의 HTTP 경로에 소스 바인드가 주어진 웹 경로에서 이미지를로드하기에 충분를 참조하십시오.

이 정보가 도움이되기를 바랍니다.