1. 程式人生 > >WPF中應用字型圖示

WPF中應用字型圖示

原文: WPF中應用字型圖示

一、什麼是字型圖示

         我們在進行GDI(圖形介面)程式設計的過程中圖示是不可少的。近些年隨著網路的繁榮和移動應用的繁榮,向量圖的應用越來越火。

         向量圖是一種用數學方法描述的、由一系列點和線組成的圖,因此相比點陣圖檔案比較小,並且還和解析度無關。字型圖示就是將這種圖只作為檔案(常見的.ttf,即TrueType Font),並通過一些表示程式碼引用。

二、字型圖示檔案的獲得

        1、下載一些公共的圖示如:

Awesome阿里巴巴

               這些網站中有的可以直接下載.ttf(或其他字型圖示格式)檔案,有的需要自己打包成,這就需要先下載個圖示集(.svg檔案集),藉助線上工具或者fontCreator軟體工具生成。

        2、由美工(UI)製作

三、在WPF中的應用

    1、把字型資料夾拷貝到專案中,目錄為(/fonts/字型檔案或其他)    
    2、對檔案右鍵,設定“複製到輸出目錄”為“如果較新則複製” 
    3、編寫UI專案資源樣式 /skin/style.xaml(或者其他常見資源引入方式)

    4、作為資源引用        

    <Window.Resources>
        <Style x:Key="FontAwesome">
            <Setter Property="TextElement.FontFamily" Value="pack://application,,,/IconFontTest;component/Resources/#FontAwesome" />
            <Setter Property="TextBlock.Width
" Value="60"></Setter> <Setter Property="TextBlock.Height" Value="60"></Setter> <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter> <Setter Property="TextBlock.FontSize" Value="40"></Setter> <Setter Property="TextBlock.Foreground" Value="Green"></Setter> </Style> </Window.Resources>

   5、TextBlock作為載體引用

         

        <WrapPanel Margin="12">
            <TextBlock x:Name="tb1"  Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf01b;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf01c;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf01d;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf01e;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf01f;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf001;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf002;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf013;" Style="{DynamicResource FontAwesome}" />
            <TextBlock Text="&#xf014;" Style="{DynamicResource FontAwesome}" />
        </WrapPanel>

6、2、ICO字型對照表,如果是XAML則是&#xf……如果是CS則是\uf……