Xaml引用圖片路徑的方式

最近寫代碼的時候遇到過好幾次引用某個路徑下圖片資源的情況，思索了一下，便將自己所知的在xaml里引用圖片資源的方法寫成了個小Demo，並完成了這篇博文。希望羅列出的這些方式能夠對大家有所幫助。

Xaml中引用圖片資源的方式主要有兩種：1.引用自己工程路徑下的圖片（包括根目錄下的xaml引用根目錄或者子目錄下的圖片，或者子目錄下xaml引用根目錄下或者其他子目錄的圖片）；2.引用其他dll工程下的圖片文件（同樣也包括根目錄或者子目錄下的圖片）。下面就來看看所羅列的這些情況代碼是如何完成的吧。

首先，我建了個工程叫ImageSourcePathTest，並且將四張圖片資源加到工程里去了，其中，有兩張圖片在根目錄下，兩張圖片在子目錄下，具體如下圖：

圖1 創建工程並添加圖片

其次，在ImageSourcePathTest的View文件夾下新建UserControl1.xaml文件，用於測試子目錄下xaml引用根目錄下圖片的情況。

之后，我再新建一個工程ImagePathDll，工程的OutType設為ClassLibrary，此工程下面僅放置圖片，其他文件都可以刪除，輸出路徑改為跟之前的ImageSourcePathTest工程一致，這樣就能引用到該dll的圖片。此工程下放置圖片位置如下圖：

圖2 創建Dll引用工程並添加圖片

圖3 ImagePathDll輸出路徑

如上步驟做完之后就可以寫代碼了，但是在寫代碼之前還有一個最重要的步驟，就是設置圖片的Build為Resource（此步驟很關鍵，沒有此步驟則圖片沒法看到）。

圖4 圖片的Buid設為Resource

除此之外還有第二關鍵的步驟，就是設置ImageSourcePathTest引用ImagePathDll。設置方式：Project——AddReference——Projects，添加ImagePathDll引用。

圖5 設置工程引用ImagePathDll

最后就是寫代碼了，Window1.xaml里引用根目錄下和子目錄下圖片的代碼為：

<Window x:Class="ImageSourcePathTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ImageSourcePathTest" Width="300" Height="300"
        xmlns:local="clr-namespace:ImageSourcePathTest">
    <StackPanel>
     <UniformGrid Rows="2" Columns="3">
    <Image Source="IMG1.PNG"/><!-- 直接引用根目錄下的圖片 -->
    <Image Source="Image/IMG2.PNG" /><!-- 引用子目錄下的圖片 -->
    <Image Source="pack://application:,,,/IMG3.PNG" /><!-- Uri引用根目錄下的圖片 -->
    <Image Source="View/IMG4.PNG" /><!-- 引用子目錄下的圖片 -->
    <Image Source="/ImagePathDll;component/IMG5.PNG"/><!-- 引用dll根目錄下的圖片 -->
    <Image Source="/ImagePathDll;component/Image/IMG6.PNG" /><!-- 引用dll子目錄下的圖片 -->            
    </UniformGrid>
    <local:UserControl1 /><!--子目錄下引用圖片-->
</StackPanel>
</Window>

ImageSourcePathTest下子目錄下UserControl1.xaml引用代碼為：

<UserControl x:Class="ImageSourcePathTest.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Orientation="Horizontal">
        <Image Source="../Image/IMG2.PNG" ></Image>
        <Image Source="../IMG3.PNG" ></Image>
        <Image Source="IMG4.PNG" ></Image>
    </StackPanel>
</UserControl>

代碼其實很簡單，其他的都不用詳細解釋了，只有uri引用方式需要詳細說明一下。WPF引入了統一資源標
識Uri(Unified Resource Identifier)來標識和訪問資源。其中較為常見的情況是用Uri加載圖像。Uri表
達式的一般形式為：協議+授權+路徑
協議：pack://
授權：有兩種。一種用於訪問編譯時已經知道的文件，用application:///。一種用於訪問編譯時不
知道、運行時才知道的文件，用siteoforigin:///。在這里加圖片時，我們選用前者，即
application:///，但是書寫時候，我們一般用逗號代替斜杠，也就是改寫作application:,,,。
路徑：分為絕對路徑和相對路徑。這里我們選用相對路徑，普適性更強。

最終運行結果如下圖：

圖6 運行結果

寫到這里我的這個小Demo就寫完了，很簡單的代碼，不知道對大家是否有幫助呢。PS，這是我第一篇博文
，以后會持續更新WPF一些使用心得與體會，希望能開個好頭哦！

2016-08-07