1. 程式人生 > 其它 >WPF按鈕向量圖示應用多種字型

WPF按鈕向量圖示應用多種字型

技術標籤:C#WPF

WPF標準按鈕是沒有圖示的,但是它提供了一個簡單高效的設計框架幫助開發者快速定製開發各種各樣的功能元件

比如一個標準按鈕可以寫成

<Button>Cilck me!</Button>

給按鈕增加一個圖示

        <Button>
          <StackPanel Orientation="Horizontal">
            <Image Source="/Datas/Images/System.png" Width="30"/>
            <Label>登入</Label>
          </StackPanel>
        </Button>

使用圖片作為圖示比較佔用記憶體,而且不便於管理,一般我習慣於使用向量字型

<Button CommandParameter="New" Command="command:CustomCommandsInWebBrowser.Common">
    <TextBlock>
        <Run Foreground="#FF0ADE0A" Text="&#xe0e6;" FontWeight="UltraBold" TextBlock.FontFamily="/Product2;component/Resources/Fonts/#SAP-icons"/>
        <TextBlock>New</TextBlock>
    </TextBlock>
</Button>

有時候一個字型檔案不夠使用,如果當前的編碼值在字型庫中沒有找到對應的字元,則會出現顯示異常

這是不能容忍的!

一般的解決方法是構建一個自定義控制元件類,設計一種替換字元的方法,如果字元編碼在當前的字型庫中找不到,則將圖示改成一個指定的字元,需要在轉換類中做一些邏輯處理;

現在我主要介紹一種更簡單的解決方式

即可以對一個控制元件的字型設定多個值,當第一種字型不滿足時,顯示第二種字型,以此類推

這個問題在網上找了幾天都沒找到解決方法,我一直都以為FontFamily屬性值表示的是一個字型資源的路徑,

最終得意與我對html的深入掌握,想到了一種解決方法

我嘗試著改用html設定多字型的寫法,最後居然成功了,

如以下的Sytle應用到TextBlock後,就可以讓其控制元件同時擁有FontAwesome和SAP-UI5兩種向量字型,當第一種字元找不到就會使用第二種字型

  <Style x:Key="SF2015" TargetType="TextBlock">
    <!--<Setter Property="FontFamily" V/alue="pack://application:,,,/ToolsLibs;component/Datas/#FontAwesome"></Setter>-->
    <Setter Property="FontFamily" Value="pack://application:,,,/ToolsLibs;component/Datas/#FontAwesome,pack://application:,,,/ToolsLibs;component/Datas/#SAP-icons"></Setter>
    <!--<Setter Property="FontFamily" Value="pack://application:,,,/ToolsLibs;component/Datas/#FontAwesome"></Setter>-->
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Margin" Value="3"/>
  </Style>

可以看出xaml繼承了html很多設計思想,多多嘗試可以提升自己的學習能力