【wpf】 WPF中實現動態加載圖片瀏覽器(邊滾動邊加載)

WPF中實現動態加載圖片瀏覽器(邊滾動邊加載)

在做圖片瀏覽器程序時,遇到圖片數量巨大的情況(如幾百張、上千張),一次性加載所有圖片會導致界面卡頓甚至程序崩潰。

本文介紹一種 WPF + Prism 實現動態分頁加載圖片的方法,結合 ScrollViewer 滾動條觸底檢測,實現 “邊滾動,邊加載” 的流暢體驗。

1. 界面設計:4×4 顯示 + 滾動條

我們希望界面每次顯示 4×4,共 16 張圖片,每張圖片帶有邊框。

XAML示例

<ScrollViewer VerticalScrollBarVisibility="Auto" ScrollChanged="ScrollViewer_ScrollChanged"><ItemsControl ItemsSource="{Binding Images}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="4"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Border BorderBrush="Gray" BorderThickness="1" Margin="5"><Image Source="{Binding}" Stretch="Uniform"/></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>
</ScrollViewer>
  • ScrollViewer 包裹 ItemsControl,開啟垂直滾動。
  • 使用 UniformGrid 布局,4列均勻分布。
  • 每張圖片用 Border 包一層,美觀且清晰分隔。

2. 后臺邏輯:ViewModel 分頁加載

ViewModel 負責管理圖片列表和分頁邏輯。

public class ImageBrowserViewModel : BindableBase
{private const int PageSize = 16;private readonly List<string> allImagePaths = new();public ObservableCollection<BitmapImage> Images { get; } = new();private int currentPage = 0;public bool IsLoading { get; private set; }public void LoadAllImagePaths(string folderPath){allImagePaths.Clear();var extensions = new[] { ".jpg", ".png", ".bmp" };var files = Directory.GetFiles(folderPath).Where(f => extensions.Contains(Path.GetExtension(f).ToLower())).ToList();allImagePaths.AddRange(files);currentPage = 0;Images.Clear();}public async Task LoadNextPageAsync(){if (IsLoading) return;IsLoading = true;var nextImages = allImagePaths.Skip(currentPage * PageSize).Take(PageSize).ToList();foreach (var path in nextImages){await Task.Run(() =>{var bitmap = new BitmapImage();bitmap.BeginInit();bitmap.CacheOption = BitmapCacheOption.OnLoad;bitmap.UriSource = new Uri(path);bitmap.EndInit();bitmap.Freeze();App.Current.Dispatcher.Invoke(() => Images.Add(bitmap));});}currentPage++;IsLoading = false;}
}
  • LoadAllImagePaths:一次性記錄所有圖片路徑,但不立刻加載圖片內容。
  • LoadNextPageAsync:每次按頁加載圖片,使用 Task.Run + Dispatcher.Invoke,避免界面卡頓。

3. 滾動到底時加載新圖片

ScrollViewerScrollChanged 事件中,檢測是否接近底部,如果是則請求 ViewModel 加載下一頁:

private async void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{var scrollViewer = (ScrollViewer)sender;if (scrollViewer.VerticalOffset + scrollViewer.ViewportHeight >= scrollViewer.ExtentHeight - 50) // 接近底部50像素{if (DataContext is ImageBrowserViewModel vm && !vm.IsLoading){await vm.LoadNextPageAsync();}}
}

ExtentHeight 是總高度,ViewportHeight 是當前可視區域高度,VerticalOffset 是當前滾動位置。

當滾動接近底部 50px 內,就觸發加載。

4. 總結

通過以上方法,我們實現了:

  • 初始只加載少量圖片,快速打開界面。
  • 用戶滾動時,按需分頁加載后續圖片。
  • 界面不卡頓,體驗絲滑流暢。

這種設計特別適合處理大量圖片瀏覽、視頻幀查看、縮略圖管理器等場景。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/78560.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/78560.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/78560.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Kubernetes》》k8s》》Taint 污點、Toleration容忍度

污點 》》 節點上 容忍度 》》 Pod上 在K8S中&#xff0c;如果Pod能容忍某個節點上的污點&#xff0c;那么Pod就可以調度到該節點。如果不能容忍&#xff0c;那就無法調度到該節點。 污點和容忍度的概念 》》污點等級——>node 》》容忍度 —>pod Equal——>一種是等…

SEO長尾關鍵詞優化核心策略

內容概要 在搜索引擎優化領域&#xff0c;長尾關鍵詞因其精準的流量捕獲能力與較低的競爭強度&#xff0c;已成為提升網站自然流量的核心突破口。本文圍繞長尾關鍵詞優化的全鏈路邏輯&#xff0c;系統拆解從需求洞察到落地執行的五大策略模塊&#xff0c;涵蓋用戶搜索意圖解析…

AWS中國區ICP備案全攻略:流程、注意事項與最佳實踐

導語 在中國大陸地區開展互聯網業務時,所有通過域名提供服務的網站和應用必須完成ICP備案(互聯網內容提供商備案)。對于選擇使用AWS中國區(北京/寧夏區域)資源的用戶,備案流程因云服務商的特殊運營模式而有所不同。本文將詳細解析AWS中國區備案的核心規則、操作步驟及避坑…

計算機視覺——通過 OWL-ViT 實現開放詞匯對象檢測

介紹 傳統的對象檢測模型大多是封閉詞匯類型&#xff0c;只能識別有限的固定類別。增加新的類別需要大量的注釋數據。然而&#xff0c;現實世界中的物體類別幾乎無窮無盡&#xff0c;這就需要能夠檢測未知類別的開放式詞匯類型。對比學習&#xff08;Contrastive Learning&…

大語言模型的“模型量化”詳解 - 04:KTransformers MoE推理優化技術

基本介紹 隨著大語言模型&#xff08;LLM&#xff09;的規模不斷擴大&#xff0c;模型的推理效率和計算資源的需求也在迅速增加。DeepSeek-V2作為當前熱門的LLM之一&#xff0c;通過創新的架構設計與優化策略&#xff0c;在資源受限環境下實現了高效推理。 本文將詳細介紹Dee…

排序算法詳解筆記

評價維度 運行效率就地性穩定性 自適應性&#xff1a;自適應排序能夠利用輸入數據已有的順序信息來減少計算量&#xff0c;達到更優的時間效率。自適應排序算法的最佳時間復雜度通常優于平均時間復雜度。 是否基于比較&#xff1a;基于比較的排序依賴比較運算符&#xff08;…

【“星瑞” O6 評測】 — llm CPU部署對比高通驍龍CPU

前言 隨著大模型應用場景的不斷拓展&#xff0c;arm cpu 憑借其獨特優勢在大模型推理領域的重要性日益凸顯。它在性能、功耗、架構適配等多方面發揮關鍵作用&#xff0c;推動大模型在不同場景落地 1. CPU對比 星睿 O6 CPU 采用 Armv9 架構&#xff0c;集成了 Armv9 CPU 核心…

Ocelot的應用案例

搭建3個項目&#xff0c;分別是OcelotDemo、ServerApi1和ServerApi2這3個項目。訪問都是通過OcelotDemo進行輪訓轉發。 代碼案例鏈接&#xff1a;https://download.csdn.net/download/ly1h1/90715035 1.架構圖 2.解決方案結構 3.步驟一&#xff0c;添加Nuget包 4.步驟二&…

DeepSeek+Dify之五工作流引用API案例

DeepSeekDify之四Agent引用知識庫案例 文章目錄 背景整體流程測試數據用到的節點開始HTTP請求LLM參數提取器代碼執行結束 實現步驟1、新建工作流2、開始節點3、Http請求節點4、LLM節點&#xff08;大模型檢索&#xff09;5、參數提取器節點&#xff08;提取大模型檢索后數據&am…

《從分遺產說起:JS 原型與繼承詳解》

“天天開心就好” 先來講講概念&#xff1a; 原型&#xff08;Prototype&#xff09; 什么是原型&#xff1f; 原型是 JavaScript 中實現對象間共享屬性和方法的機制。每個 JavaScript 對象&#xff08;除了 null&#xff09;都有一個內部鏈接指向另一個對象&#xff0c;這…

立馬耀:通過阿里云 Serverless Spark 和 Milvus 構建高效向量檢索系統,驅動個性化推薦業務

作者&#xff1a;廈門立馬耀網絡科技有限公司大數據開發工程師 陳宏毅 背景介紹 行業 蟬選是蟬媽媽出品的達人選品服務平臺。蟬選秉持“陪伴達人賺到錢”的品牌使命&#xff0c;致力于洞悉達人變現需求和痛點&#xff0c;提供達人選高傭、穩變現、速響應的選品服務。 業務特…

Android顯示學習筆記本

根據博客 Android-View 繪制原理(01)-JAVA層分析_android view draw原理分析-CSDN博客 提出了我的疑問 Canvas RenderNode updateDisplayListDirty 這些東西的關系 您的理解在基本方向上是對的&#xff0c;但讓我詳細解釋一下 Android 中 updateDisplayListDirty、指令集合、…

JavaWeb學習打卡-Day4-會話技術、JWT、Filter、Interceptor

會話技術 會話&#xff1a;用戶打開瀏覽器&#xff0c;訪問web服務器的資源&#xff0c;會話建立&#xff0c;直到有一方斷開連接&#xff0c;會話結束。在一次會話中可以包含多次請求和響應。會話跟蹤&#xff1a;一種維護瀏覽器狀態的方法&#xff0c;服務器需要識別多次請求…

讓數據優雅落地:用 serde::Deserialize 玩轉結構體實體

前言 想象一下,服務器突然飛來一堆 JSON 數據,就像一群無頭蒼蠅沖進辦公室,嗡嗡作響,橫沖直撞。此刻,你的任務,就是把這群“迷路數據”安置進正確的格子里,分門別類,秩序井然,不混不亂,不漏一只。 好在 Rust 早就為我們備好瑞士軍刀:serde::Deserialize。它不僅刀…

Virtio 技術解析 | 框架、設備實現與實踐指南

本文為 “Virtio” 相關文章合輯。 略作重排&#xff0c;如有內容異常&#xff0c;請看原文。 Virtio 簡介&#xff08;一&#xff09;—— 框架分析 posted 2021-04-21 10:14 Edver 1. 概述 在傳統設備模擬中&#xff0c;虛擬機內部設備驅動完全不知自身處于虛擬化環境&a…

云計算賦能質檢LIMS的價值 質檢LIMS系統在云計算企業的創新應用

在云計算技術高速發展的背景下&#xff0c;實驗室信息化管理正經歷深刻變革。質檢LIMS&#xff08;實驗室信息管理系統&#xff09;作為實驗室數字化轉型的核心工具&#xff0c;通過與云計算深度融合&#xff0c;為企業提供了高彈性、高安全性的解決方案。本文將探討質檢LIMS在…

【win11 安裝WSL2 詳解一遍過!!】

共有五個步驟&#xff0c;按部就班的做&#xff0c;保準成功&#xff01; 1. 打開開發者模式 設置->系統->開發者模式 2. 打開linux的win子系統 找到控制面板-程序和功能-啟用或關閉Windows功能&#xff0c;選中“適用于Linux的Windows子系統”&#xff0c;“虛擬機…

Godot開發2D冒險游戲——第三節:游戲地圖繪制

一、初步構建游戲地圖 在游戲場景當中添加一個新的子節點&#xff1a;TileMapLayer 這一層稱為瓦片地圖層 根據提示&#xff0c;下一步顯然是添加資源 為TileMapLayer節點添加一個TileSet 將地板添加進來&#xff0c;然后選擇自動分割圖集 自定義時要確保大小合適 讓Godot自…

Django創建的應用目錄詳細解釋以及如何操作數據庫自動創建表

創建好Django項目后 如果要創建 python manage.py startapp 模塊名模塊 使用 我創建一個system模塊后是 注意:urls是我自己建的文件 1.migrations目錄 存放數據庫的遷移文件,當models.py中模型定義發生變化時&#xff0c;通過遷移操作能同步數據庫結構變化 __init__ 使該目錄…

將輸入幀上下文打包到下一個幀的預測模型中用于視頻生成

Paper Title: Packing Input Frame Context in Next-Frame Prediction Models for Video Generation 論文發布于2025年4月17日 Abstract部分 在這篇論文中,FramePack是一種新提出的網絡結構,旨在解決視頻生成中的兩個主要問題:遺忘和漂移。 具體來說,遺忘指的是在生成視…