WPF顯示預置圖片並隱式打包至應用安裝包中

2021-01-25

關鍵字：Image加載外部圖片

---

 

本文介紹如何在WPF桌面程序開發過程中將外部圖片顯示在Image控件以及將圖片“隱藏”打包進程序安裝包中。

 

使用外部圖片可分靜態與動態兩種方式。下面逐一介紹。

 

首先介紹一下靜態加載外部圖片的方式。

 

創建一個.NET CORE的WPF工程。

 

其次選中工程，右鍵添加文件夾，如下圖所示：

 

文件夾的名字隨便起，建議以res或resource等直觀的名字命名。然後在新建的文件夾上右鍵，添加本地文件，如下圖所示：

 

在彈出的對話窗口中將你的外部圖片文件添加進去。此時便可以看到如下圖所示的工程結構：

 

 

接着便是創建佈局文件，本文作爲一個示例程序，一切以簡單爲原則，源碼與效果如下圖所示：

 

Image控件的Source中填寫的即是要加載的圖片在本工程中的相對位置。這個相對位置的起點是工程源碼根目錄，可以簡單理解爲是 .csproj 文件所在的位置。

 

code-behide 文件不需要寫任何代碼。不如意外的話運行以後便可以看到我們的圖片顯示在上面的了，以下是程序運行圖：

 

爲何會一片空白而沒有預計的圖片顯示出來呢？

 

原因是當程序編譯並運行以後其相對位置就則 .csproj 文件所在的位置變成了相應的編譯輸出目錄，我們在 xaml 中設置的相對路徑在程序運行時已經找不到了。

 

你可能立馬會說相對路徑不行那我們絕對路徑肯定沒問題了吧。 是的，用絕對路徑確實可以解決，但是一旦你用了絕對路徑，你的程序就只能在你自己的電腦上運行了，一旦發給其他人或打包發佈，在其它機器上極有可能仍然是無法看到圖片的。

 

那怎麼解決呢？其實很簡單，回到我們的解決方案瀏覽器中，選中我們的圖片然後右鍵選擇Property，在彈出的對話窗體中將圖片的Build Action類型設置爲Resource，如下圖所示：

 

此時保存配置後先Clean一下解決方案，如下圖所示：

 

然後再次運行，就能正常顯示了：

 

使用這種方式會直接把圖片打包進應用程序內部，將圖片打包進程序內部非常有用，可以避免用戶修改圖片導致程序運行異常。

 

我們可以查看一下程序的編譯目錄，其結構如下圖所示：

 

可以關注到在將圖片以Resource的形式編譯以後程序的dll文件瞬間增大了，由此也可以得出圖片是被打包進dll庫中的結論。

 

 

接下來是動態加載外部圖片的方法。

 

還是前面這個工程，所不同的是將xaml中Image控件的Source刪去，只留下一個空白控件：

 

動態加載圖片需要在cs代碼中操作，因此需要給Image控件添加Name標識。

 

Image控件的Source屬性接受的類型是ImageSouce，其原型如下所示：

public System.Windows.Media.ImageSource Source { get; set; }

而ImageSouce本身又是一個抽象類：

public abstract class ImageSource : System.Windows.Media.Animation.Animatable, IFormattable

其派生類主要有三個：

System.Windows.Interop.D3DImage
System.Windows.Media.DrawingImage
System.Windows.Media.Imaging.BitmapSource

在這裏，適合我們的是 BitmapSouce 類。但是BitmapSource也是一個抽象類：

public abstract class BitmapSource : System.Windows.Media.ImageSource

且BitmapSouce有衆多派生類：

System.Windows.Interop.InteropBitmap
System.Windows.Media.Imaging.BitmapFrame
System.Windows.Media.Imaging.BitmapImage
System.Windows.Media.Imaging.CachedBitmap
System.Windows.Media.Imaging.ColorConvertedBitmap
System.Windows.Media.Imaging.CroppedBitmap
System.Windows.Media.Imaging.FormatConvertedBitmap
System.Windows.Media.Imaging.RenderTargetBitmap
System.Windows.Media.Imaging.TransformedBitmap
System.Windows.Media.Imaging.WriteableBitmap

這裏適合我們的是 BitmapImage。

 

BitmapImage創建圖片對象的方式很簡單，以下直接貼出相關代碼了：

        public MainWindow()
        {
            InitializeComponent();

            BitmapImage bimg = new BitmapImage();
            bimg.BeginInit();
            bimg.UriSource = new Uri(@"res/myimg.png", UriKind.Relative);
            bimg.EndInit();

            Img.Source = bimg;
        }

new Uri類時第一個參數填的是圖片相對於工程的地址，即以 .csproj 文件作爲起點的相對地址，第二個參數就是描述第一個參數是相對位置還是絕對位置的。一般我們都填相對位置就夠了。

 

在應用了以上代碼後再次運行程序，又可以看到熟悉的畫面了：

 

 

通過修改外部圖片的Build Action爲Resource的方式預置圖片的方式即使在程序通過Setup Project打包成安裝包發到其它機器安裝後仍然可以正常顯示圖片且不會直接看到圖片文件的存在，如下圖所示：

 

 

 

 

嗯，真不錯！

 

---