今回はボタンコントロールに画像を表示する方法をご紹介いたします。
Xamarin.Forms4 以降から設定方法が変更になっていますので注意してください。
前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.2.0.719 (NuGet Xamarin.Forms 2.3.2.127)
・macOS Sierra 10.12.1 / Xcode8.1 / Xamarin.iOS 10.2.0.4
表示結果
iOS10
Android7.0

1.配置
画像ファイルを以下のディレクトリに配置します。
Droidプロジェクト\Resources\drawable\Image.png
iOSプロジェクト\Resources\Image.png
※わかりやすいように画像ファイルの名前をImage.pngとしています。
2.ビルドアクション
画像ファイルを右クリックしてプロパティを開き、ビルドアクションを変更します。
Droidプロジェクトの場合、AndroidResource にします。
iOSプロジェクトの場合、BundleResource にします。
3.バインド
Xamarin.Forms3 までの場合、Image プロパティにファイルをバインドします。
Xamlの場合
<Button x:Name="btnTest" Clicked="OnClick" Image="Image.png"/>
C#の場合
this.btnTest.Image = "Image.png";
this.btnTest.BackgroundColor = Color.Transparent;
Xamarin.Forms4 以降の場合、ImageSource プロパティに FileImageSource として取得したファイルをバインドします。
C#の場合
this.btnTest.ImageSource = ImageSource.FromFile("Image.png");
this.btnTest.BackgroundColor = Color.Transparent;
バインドする文字列はディレクトリ部分は必要なく、ファイル名のみで大丈夫なのです。
Androidではボタン背景色を透明にしておくとボタンの縁取りを消せます。
最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
- 関連記事
-