前言

? ? ? ? 最近在和其他軟件聯(lián)合做一個本地圖片選擇傳輸功能，為此希望圖片能夠有序的呈現(xiàn)在客戶端，簡單的實現(xiàn)了一下功能，通過Mvvm模式進(jìn)行呈現(xiàn)，過程簡單通俗，話不多說直接上圖。

處理過程

?前臺代碼

1. 你只需要粘貼到你的前臺xml中就可以，位置記得調(diào)整下Margin,我這是按照我的位置進(jìn)行調(diào)整的，所以針對ListBox在你的前臺你還需要調(diào)整下。

   <ListBox Name="lstFileManager" Background ="Transparent" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Margin="69,192,50,40">
       <ListBox.ItemsPanel>
           <ItemsPanelTemplate>
               <WrapPanel/>
           </ItemsPanelTemplate>
       </ListBox.ItemsPanel>
       <ListBox.ItemTemplate>
           <DataTemplate>
               <!--這里修改內(nèi)容整體大小以及在你框內(nèi)的占比，我這一行顯示5個-->
               <Grid Margin="17" Width="100" Height="155">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" ></RowDefinition>
                       <RowDefinition Height="Auto" ></RowDefinition>
                       <RowDefinition Height="Auto" ></RowDefinition>
                   </Grid.RowDefinitions>
                   <Image Source="{Binding Pic}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"/>
                   <Border BorderThickness="1" BorderBrush="red" Margin="1,107,1,0"/>
                   <TextBlock Text="{Binding Name}" Grid.Row="1" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Height="Auto" TextWrapping="Wrap"/>
               </Grid>
           </DataTemplate>
       </ListBox.ItemTemplate>
   </ListBox>

后臺代碼

1. 創(chuàng)建一個類進(jìn)行數(shù)據(jù)綁定

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

2. 定義一個集合進(jìn)行數(shù)據(jù)緩存 （集合定義在MainWindow的類中）

   ObservableCollection<LVData> LVDatas = new ObservableCollection<LVData>();

3. 在我們的邏輯中進(jìn)行數(shù)據(jù)填充和呈現(xiàn)，清除集合清空ListBox中的Item顯示

   //添加圖
   LVDatas.Add(new LVData { Name = "圖片在ListBox中顯示的名稱（建議直接顯示圖片名稱）", Pic = new BitmapImage(new Uri("完整的圖片路徑")) });
   //顯示在ListBox中
   lstFileManager.ItemsSource = LVDatas;
   //清除集合清空呈現(xiàn)
   LVDatas.Clear();
   //當(dāng)前點擊的圖片名稱（lstFileManager.SelectedIndex  這是目前點擊的下標(biāo)）
   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
   {
       /// <summary>
       /// MainWindow.xaml 的交互邏輯
       /// </summary>
       public partial class MainWindow : Window
       {
           //定義集合
           ObservableCollection<LVData> LVDatas = new ObservableCollection<LVData>();
           public MainWindow()
           {
               InitializeComponent();
               ImageTexture2DView("E:\\ProjectFiles\\ImageTexture");
           }
           private void ImageTexture2DView(string path)
           {
               //Path是圖片所在的文件夾路徑
               var apps = System.IO.Directory.GetFiles(path);
               List<string> images = new List<string>();
               foreach (string app in apps)//---遍歷文件夾所有文件
               {
                   var fi = new FileInfo(app);//---使用FileInfo類進(jìn)行操作
                   if (fi.Extension == ".png")
                   {
                       //將圖片添加到LVData中
                       LVDatas.Add(new LVData { Name = fi.Name.Remove(fi.Name.LastIndexOf(".")), Pic = new BitmapImage(new Uri(fi.FullName)) });
                   }
               }
               //進(jìn)行呈現(xiàn)
               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; }
   
       }
   }
   

結(jié)局? ??

后續(xù)想從數(shù)據(jù)庫或者其他地方添加就根據(jù)自己的想法添加就可以了，另外獲取點擊的是哪個綁定個監(jiān)聽事件就可以了，希望對大家有幫助。文章來源地址http://www.zghlxwxcb.cn/news/detail-655397.html

到了這里，關(guān)于C# WPF ListBox 動態(tài)顯示圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！