アイコンフォントとは
画像ではなくテキスト形式でアイコンをViewに埋め込むことができるものです。
コードの中に指定された文字列を埋め込むことで、アイコンを表示することができます。
メリットとしては直接画像を使用する場合に比べて、データ量を抑えることができる、端末に合わせて表示してくれるなどが挙げられるようです。
今回はアイコンフォントをボタンに使う際につまずいた点を備忘録として書いておきます。
Xamarin.Formsでのアイコンフォントの使い方については以下のQiitaに詳しく載っています。
参考:Xamarin.Forms でアイコンフォントを使う
アイコンフォントをButtonの中に配置
まずは初歩的な方法から。
以下のようなコードを書けばたしかにボタンにアイコンフォントを配置することができました。
﮼の部分がアイコンフォントですね。
<Button FontFamily="{DinamicRecource MaterialFontFamily}" Text="﮼ Setting" FontSize="25" BackgroundColor="#f9f9f9"/>
しかしこの方法だと確かにアイコンフォントは表示されるのですがFontFamilyがTextの部分にまで影響を与えてしまって、"Setting"と表示したい部分が"setting"になってしまいます。
ここをいかに解決するかという部分で随分とハマってしまいました。
解決方法
<Button Text="Setting">
<Button.ImageSource>
<FontImageSource FontFamily="{DinamicRecource MaterialFontFamily}" Glyph="﮼"/>
</Button.ImageSource>
</Button>
ButtonクラスのなかにButton.ImageSourceをネストし、そのなかにFontImageSourceを使うことで解決しました。
これで"Setting"の頭文字を大文字にしたまま、ボタンにアイコンフォントを配置することができました。
FontImageSourceにはプロパティとしてColorなども指定することが可能です。