LoginSignup
4

More than 3 years have passed since last update.

Xamarin.FormsでButtonにアイコンフォントを配置する方法

Posted at

アイコンフォントとは

画像ではなくテキスト形式でアイコンをViewに埋め込むことができるものです。
コードの中に指定された文字列を埋め込むことで、アイコンを表示することができます。
メリットとしては直接画像を使用する場合に比べて、データ量を抑えることができる、端末に合わせて表示してくれるなどが挙げられるようです。

今回はアイコンフォントをボタンに使う際につまずいた点を備忘録として書いておきます。
Xamarin.Formsでのアイコンフォントの使い方については以下のQiitaに詳しく載っています。
参考:Xamarin.Forms でアイコンフォントを使う

アイコンフォントをButtonの中に配置

まずは初歩的な方法から。
以下のようなコードを書けばたしかにボタンにアイコンフォントを配置することができました。
﮼の部分がアイコンフォントですね。

ButtonSample.xaml
<Button FontFamily="{DinamicRecource MaterialFontFamily}" Text="&#xFBBC; Setting" FontSize="25" BackgroundColor="#f9f9f9"/>

しかしこの方法だと確かにアイコンフォントは表示されるのですがFontFamilyがTextの部分にまで影響を与えてしまって、"Setting"と表示したい部分が"setting"になってしまいます。
ここをいかに解決するかという部分で随分とハマってしまいました。

解決方法

ButtonSample.xaml
<Button Text="Setting">
    <Button.ImageSource>
        <FontImageSource FontFamily="{DinamicRecource MaterialFontFamily}" Glyph="&#xFBBC;"/>
    </Button.ImageSource>
</Button>

ButtonクラスのなかにButton.ImageSourceをネストし、そのなかにFontImageSourceを使うことで解決しました。
これで"Setting"の頭文字を大文字にしたまま、ボタンにアイコンフォントを配置することができました。
FontImageSourceにはプロパティとしてColorなども指定することが可能です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4