C# WPF ListBox 动态显示图片

前言

        最近在和其他软件联合做一个本地图片选择传输功能，为此希望图片能够有序的呈现在客户端，简单的实现了一下功能，通过Mvvm模式进行呈现，过程简单通俗，话不多说直接上图。

处理过程

 前台代码

1. 你只需要粘贴到你的前台xml中就可以，位置记得调整下Margin,我这是按照我的位置进行调整的，所以针对ListBox在你的前台你还需要调整下。

后台代码

1. 创建一个类进行数据绑定

       public class LVData
       {
           public string Name { get; set; }
           public BitmapImage Pic { get; set; }
       }

2. 定义一个集合进行数据缓存 （集合定义在MainWindow的类中）

   ObservableCollection LVDatas = new ObservableCollection();

3. 在我们的逻辑中进行数据填充和呈现，清除集合清空ListBox中的Item显示

   //添加图
   LVDatas.Add(new LVData { Name = "图片在ListBox中显示的名称（建议直接显示图片名称）", Pic = new BitmapImage(new Uri("完整的图片路径")) });
   //显示在ListBox中
   lstFileManager.ItemsSource = LVDatas;
   //清除集合清空呈现
   LVDatas.Clear();
   //当前点击的图片名称（lstFileManager.SelectedIndex  这是目前点击的下标）
   Console.WriteLine(LVDatas[lstFileManager.SelectedIndex].Name);

4. 整体代码

   using System;
   using System.Collections.Generic;
   using System.Collections.ObjectModel;
   using System.IO;
   using System.Linq;
   using System.Text;
   using System.Threading.Tasks;
   using System.Windows;
   using System.Windows.Controls;
   using System.Windows.Data;
   using System.Windows.Documents;
   using System.Windows.Input;
   using System.Windows.Media;
   using System.Windows.Media.Imaging;
   using System.Windows.Navigation;
   using System.Windows.Shapes;
   
   namespace ImageTexture
   {
       /// 
   
       /// MainWindow.xaml 的交互逻辑
       /// 
       public partial class MainWindow : Window
       {
           //定义集合
           ObservableCollection LVDatas = new ObservableCollection();
           public MainWindow()
           {
               InitializeComponent();
               ImageTexture2DView("E:\\ProjectFiles\\ImageTexture");
           }
           private void ImageTexture2DView(string path)
           {
               //Path是图片所在的文件夹路径
               var apps = System.IO.Directory.GetFiles(path);
               List images = new List();
               foreach (string app in apps)//---遍历文件夹所有文件
               {
                   var fi = new FileInfo(app);//---使用FileInfo类进行操作
                   if (fi.Extension == ".png")
                   {
                       //将图片添加到LVData中
                       LVDatas.Add(new LVData { Name = fi.Name.Remove(fi.Name.LastIndexOf(".")), Pic = new BitmapImage(new Uri(fi.FullName)) });
                   }
               }
               //进行呈现
               lstFileManager.ItemsSource = LVDatas;
           }
           private void ImageClear_Click(object sender, RoutedEventArgs e)
           {
               //清除集合清空ListBox中的Item显示
               LVDatas.Clear();
           }
       }
       public class LVData
       {
           public string Name { get; set; }
           public BitmapImage Pic { get; set; }
   
       }
   }
   

结局    

后续想从数据库或者其他地方添加就根据自己的想法添加就可以了，另外获取点击的是哪个绑定个监听事件就可以了，希望对大家有帮助。