WPF自定義控件與樣式(1)-矢量字體圖標(iconfont)

一．圖標字體

　　圖標字體在網頁開發上運用很是普遍，具體能夠網絡搜索瞭解，網頁上的運用有不少例子，如Bootstrap。但在C/S程序中使用還很少，字體圖標其實就是把矢量圖形打包到字體文件裏，就像使用通常外置字體同樣的使用，所以Winform、WPF中都是能夠用的。

　　在咱們多個WPF項目中普遍使用了圖標字體，包括自定義控件、自定義樣式、模板等。總結下：

• 網上開源字體圖標不少，很容易獲取，項目開發中須要的絕大部分圖標均可以找到，很是方便，推薦 阿里巴巴開源字體；
• 字體文件很是小，比使用png等圖片文件要小不少；
• 比使用普通圖片資源性能要好不少；
• 和普通字體同樣，是矢量的，可任意放大縮小（設置字體大小）不失真。
• 惟一的缺點就是顏色的設置有侷限，只能用單色，或者使用畫刷實現漸變色等效果。不過這一點貌似問題也不大。

二．WPF中如何使用字體圖標

2.1 字體文件加入到項目資源

　　下載字體文件（參考第三節），添加到項目中，並設置生成操做爲"Resource"，以下圖：

　　

2.2 定義樣式

　　定義樣式，使用TextBlock做爲圖標顯示的容器，所以定義一個TextBlock的樣式便可，以下所示。其中「SK2015」 爲字體名稱，如3.2中的圖示，能夠經過「編輯項目」修改字體名稱。

 1 <!--FIcon--> 
 2 
 3  <Style x:Key="FIcon" TargetType="TextBlock"> 
 4 
 5  <Setter Property="FontFamily" Value="/K.Framework.Controls;component/Resources/#SF2015"></Setter> 
 6 
 7  <Setter Property="Foreground" Value="{StaticResource TextForeground}"/> 
 8 
 9  <Setter Property="TextAlignment" Value="Center"/> 
10 
11  <Setter Property="HorizontalAlignment" Value="Center"/> 
12 
13  <Setter Property="VerticalAlignment" Value="Center"/> 
14 
15  <Setter Property="FontSize" Value="20"/> 
16 
17  </Style> 

2.3 XAML使用示例

　　使用就很簡單了，第一種在XAML中使用，以下圖，Text的值能夠參考3.2中的demo.html，它是字符的Unicode編碼。

        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe600;" Style="{StaticResource FIcon}" FontSize="30" Margin="3" ></TextBlock>
            <TextBlock Text="&#xe61c;" Style="{StaticResource FIcon}" FontSize="40" Margin="3" ></TextBlock>
            <TextBlock Text="&#xe63d;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="#FB0AE8"></TextBlock>
            <TextBlock Text="&#xe602;" Style="{StaticResource FIcon}" FontSize="60" Margin="3" Foreground="Chartreuse"></TextBlock>
            <TextBlock Text="&#xe60c;" Style="{StaticResource FIcon}" FontSize="70" Margin="3" Foreground="#FEDB11"></TextBlock>
        </StackPanel>

　　效果：

　　

　　直接使用字符編碼可能很差記，web開發中會爲每一個字體圖標定義一個好記的名稱，如<i class="icon book"></i>。他是利用css定義的樣式實現的，在WPF中固然也是能夠實現的，爲每一個字體圖標單獨定義Style便可。只是我以爲沒有必要，這樣也挺簡單的，有網頁demo.html能夠對照。

2.4 C#代碼使用示例

　　C#代碼惟一不同的，就是對Unicode字符編碼的使用不同，如：

            //代碼設置字體圖標
            this.ticon1.Text = "\ue616";
            this.ticon2.Text = "\ue615";

　　效果：

　　

三 .如何下載字體文件

3.1 下載網上的開源字體庫

　　如Font-Awesome(http://fortawesome.github.io/Font-Awesome/)，相似的開源字體庫有不少，提供的圖標比較豐富，但不容易擴展和修改。

　　

3.2 Iconfont-阿里巴巴矢量圖標庫

　　地址：http://www.iconfont.cn/

　　提供了大量的字體圖標（包括網友共享的），能夠選擇須要的字體，而後打包到一個字體文件，且能夠隨意修改字符的編碼、字體名稱等，真的是一個良心的開源項目。

　　收集並下載圖標字體庫，以下圖。

　　

　　下載後，以下圖，其中*.ttf就是咱們須要的字體文件，其餘是網頁使用須要的，demo.html能夠做爲圖例參考，demo.html內容同上圖相似。

　　

附錄：參考引用

作小圖標還用sprite圖？你out了！史上最簡單易懂iconfont使用教程

學習WPF——使用Font-Awesome圖標字體

系列文章目錄   

WPF自定義控件與樣式(1)-矢量字體圖標(iconfont)

WPF自定義控件與樣式(2)-自定義按鈕FButton

WPF自定義控件與樣式(3)-TextBox & RichTextBox & PasswordBox樣式、水印、Label標籤、功能擴展

WPF自定義控件與樣式(4)-CheckBox/RadioButton自定義樣式

WPF自定義控件與樣式(5)-Calendar/DatePicker日期控件自定義樣式及擴展

WPF自定義控件與樣式(6)-ScrollViewer與ListBox自定義樣式

WPF自定義控件與樣式(7)-列表控件DataGrid與ListView自定義樣式

WPF自定義控件與樣式(8)-ComboBox與自定義多選控件MultComboBox

WPF自定義控件與樣式(9)-樹控件TreeView與菜單Menu-ContextMenu

WPF自定義控件與樣式(10)-進度控件ProcessBar自定義樣 

WPF自定義控件與樣式(11)-等待/忙/正在加載狀態-控件實現

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖片列表

WPF自定義控件與樣式(13)-自定義窗體Window & 自適應內容大小消息框MessageBox

WPF自定義控件與樣式(14)-輕量MVVM模式實踐 

WPF自定義控件與樣式(15)-終結篇

 

版權全部，文章來源：http://www.cnblogs.com/anding

我的能力有限，本文內容僅供學習、探討，歡迎指正、交流。