WPF使用IconFont中的Symbol圖標

起因

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

預覽IconFont

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

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

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

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

Font class標簽頁下和Unicode標簽頁下的內容一致，不過他里面是提供給網頁使用的，引入對應的css，然后使用下方標注的類型名稱就可以使用（這不在我們的討論范圍）。

可以看到上述的圖標呢都是純色的，默認給的是黑色，這里也強調下，字體圖標就跟字體一樣，沒有過多的修飾，這里的矢量圖標就是一種路徑，他們沒有過多的顏色描述，只能是純色的。

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

這里的圖標就很豐富了，還自帶各種顏色，我們查看一下網頁源代碼發現，他們是svg的圖標，可以理解為是由多個圖標組成的一種圖標，不同圖標有不同的顏色，最后變成這樣多彩的圖標，其實在WPF不會使用這種類型的圖標，一般都是直接使用后綴是svg的文件，要么就是直接以PNG圖片的形式進行下載，不過呢，為了理解這些圖標的構成， 還是嘗試在WPF中重現第一個圖標吧。

在下載的文件中，可以發現這些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>

運行我們的項目，就可以看到圖片：

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