快捷導(dǎo)航

C#?WPF?ListBox?動(dòng)態(tài)顯示圖片功能

更新時(shí)間：2023年08月19日 09:00:28 作者：Creator丶小鑫

這篇文章主要介紹了C#?WPF?ListBox?動(dòng)態(tài)顯示圖片,處理過程分為前臺(tái)代碼和后臺(tái)代碼，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

前言

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

處理過程

前臺(tái)代碼

你只需要粘貼到你的前臺(tái)xml中就可以，位置記得調(diào)整下Margin,我這是按照我的位置進(jìn)行調(diào)整的，所以針對ListBox在你的前臺(tái)你還需要調(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個(gè)-->
            <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>

后臺(tái)代碼

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

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

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

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

在我們的邏輯中進(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)前點(diǎn)擊的圖片名稱（lstFileManager.SelectedIndex  這是目前點(diǎn)擊的下標(biāo)）
Console.WriteLine(LVDatas[lstFileManager.SelectedIndex].Name);

整體代碼

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