WPF使用IconFont中的Symbol圖示

起因

這篇文章呢，本來是不應該出現的，起因是一位老鐵看了之前的使用字型圖示的文章WPF使用ttf字型圖示 ，反饋說到自己使用IconFont的字型圖示，無法在WPF中使用，於是跟著後面瞅了一眼，發現原來是這個樣子的！

預覽IconFont

首先呢，先去下載一下這個圖示，這位老鐵呢，看重的是這套彩色的圖示SuperMap GIS產品彩色系功能圖示庫，收藏一下，然後打包下載。下載下來是一個壓縮包，檔案大概是這個樣子：

IconFont很貼心的給我們提供了一個圖示的預覽，就是這個demo_index.html,雙擊開啟這個html檔案，可以看到：

裡面呢是長這個樣子的。其中

Unicode標籤頁下就是我們的字型圖示的樣子，我們引入檔案目錄中的iconfont.ttf，然後像之前文章中描述的，使用圖示下方提供的編碼就可以使用我們的字型圖示了。

Font class標籤頁下和Unicode標籤頁下的內容一直，不過他裡面是提供給網頁使用的，引入對應的css，然後使用下方標註的型別名稱就可以使用（這不在我們的討論範圍）。

可以看到上述的圖示呢都是純色的，預設給的是黑色，這裡也強調下，字型圖示就跟字型一樣，沒有過多的修飾，這裡的向量圖示就是一種路徑，他們沒有過多的顏色描述，只能是純色的。

重點來看下我們的Symbol標籤頁：

這裡的圖示就很豐富了，還自帶各種顏色，我們檢視一下網頁原始碼發現，他們是svg

在下載的檔案中，可以發現這些svg的圖示都儲存在iconfont.js的檔案中：

開啟這個檔案，可以看到很多的symbol標籤，它們都有一個id與我們的介面中的id對應，然後此標籤下還有很多的path節點，這每一個path對應的即使一個繪製路徑：

稍微整理下，大概長下面這個樣子：

<symbol id="icon-yasuobingdantihua" viewBox="0 0 1024 1024">
	
	<path d="M96 96m32 0l768 0q32 0 32 32l0 768q0 32-32 32l-768 0q-32 0-32-32l0-768q0-32 32-32Z" fill="#FFFFFF" >
	</path>
	
	<path d="M608 608h288a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-288a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32z m0 32v256h288v-256h-288z m32-64h-32V320h-192v288h128v32H352v96h192v32H256v-32h64v-128h64V288h64V256h128v32h64v288z m-224-192h192v32h-192V384z m0 96h192v32h-192v-32z" fill="#808FA1" >
	</path>
	
	<path d="M736 736h96v96h-96v-96z m32 32v32h32v-32h-32z m-256 128v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v416h-32V128H128v768h384z" fill="#5D6D7E" >
	</path>
	
	<path d="M736 704v-96h96v96h-96z m128 32h64v96h-64v-96z m-32 128v64h-96v-64h96z m-128-32h-128v-96h128v96z" fill="#30AD98" >
	</path>

</symbol>
 

可以看到圖示有一個viewBox屬性，值為0 0 1024 1024，然後下面有四個path路徑，我們需要用到path路徑的d屬性和fill屬性。

在WPF中還原svg圖示

新建我們的專案，新增一個Viewbox節點和一個Canvas節點，然後設定一下Canvas的大小為1024 x 1024，將我們的視窗也設定一樣的。然後拷貝上方的path節點下的d屬性和fill屬性，依次拷貝到WPF中Path節點中的Data屬性和Fill屬性，如下

    <Viewbox>
        <Canvas
            Width="1024"
            Height="1024">

            <Path
                Data="M96 96m32 0l768 0q32 0 32 32l0 768q0 32-32 32l-768 0q-32 0-32-32l0-768q0-32 32-32Z"
                Fill="#FFFFFF" />
            <Path
                Data="M608 608h288a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-288a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32z m0 32v256h288v-256h-288z m32-64h-32V320h-192v288h128v32H352v96h192v32H256v-32h64v-128h64V288h64V256h128v32h64v288z m-224-192h192v32h-192V384z m0 96h192v32h-192v-32z"
                Fill="#808fa1" />
            <Path
                Data="M736 736h96v96h-96v-96z m32 32v32h32v-32h-32z m-256 128v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v416h-32V128H128v768h384z"
                Fill="#5d6d7e" />
            <Path
                Data="M736 704v-96h96v96h-96z m128 32h64v96h-64v-96z m-32 128v64h-96v-64h96z m-128-32h-128v-96h128v96z"
                Fill="#30ad98" />

        </Canvas>
    </Viewbox>

執行我們的專案，就可以看到圖片：

結束。
做個小科普， 水一篇，哈哈哈！

本文來自部落格園，作者：醜萌氣質狗，轉載請註明原文連結：https://www.cnblogs.com/choumengqizhigou/p/15690185.html

轉載請註明出處QQ群：560611514