1. Home
  2. Xamarin
  3. Xamarin.forms
  4. Control Tips
  5. 部品コントロール Tips
  6. Button

09.Buttonに画像を表示するには？

Update 2018/12/23
< Prev Tips    Next Tips>

ここでは、以下について説明します。



Button に画像を表示するには Imageプロパティを使用します。ImageプロパティはFileImageSource型です。

画像はプラットフォームごとに準備する必要があります。

iOSの場合はResourcesの下にイメージファイルを置きます。

Androidの場合は、Resourcesの下のdrawable-hdpi, drawable-xhdpi, drawable-xxhdpi, drawable-hdpi の下にそれぞれ配置します。

以下にコードビハインドでButtonに画像を表示する例を示します。

MainPage.xaml.cs 
  namespace buttonSample09
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            button1.Image = new FileImageSource { File = "basketball.png" };
        }
    }
}

次にXamlでButtonを画像を表示する例を示します。

MainPage.xaml 
  <Button Image="basketball.png" />


実行例を以下に示します。




Button に画像とテキストを一緒に表示するには ImageプロパティとTextプロパティを一緒に使用します。

画像は、テキストの上、右、下、左のいずれかに表示することが可能です。

配置位置は、ContentLayoutプロパティにButtonContentLayout.ImagePosition 列挙体の値を指定します。

ButtonContentLayout.ImagePosition 列挙体
値 説明
Bottom 下
Left 左
Right 右
Top 上

以下にコードビハインドでButtonに画像とテキストを表示する例を示します。

ButtonContentLayoutの第１引数に画像の配置位置を、第２引数にテキストと画像のスペースを指定します。

MainPage.xaml.cs 
  namespace buttonSample09
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            button1.Image = new FileImageSource { File = "basketball.png" };
            button1.Text = "Basketball";
            button1.ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Left, 20);
        }
    }
}

次にXamlで画像とテキストを一緒に表示する例を示します。

MainPage.xaml 
  <Button Text="button text"
  Image="basketball.png"
  ContentLayout="Left, 20" />


実行例を以下に示します。