Xamarin.Froms で画像を表示する

Xamarin.Formsで画像を表示する方法をまとめました。

サンプルはこちら

github.com

Xamarin.Formsで画像を表示するには、 "Image" ビューを使用します。

Xamarin.Formsでの画像の配置

Xamarin.Fromsでは画像を3つの場所に配置することができます。 配置場所によって画像の読み込み方法が変わります。

  • 共有プロジェクト
  • 各プラットフォーム
  • インターネット

画像をプロジェクトへ読み込む

・共有プロジェクトへの読み込む

メリット

共有プロジェクトの画像を使用することで、iOS,Androidごとの画像を用意することなく、 1つの画像を使い回すことができます。

手順

今回は、「Resources/Images」というフォルダを作成。 そこに "button_leftArrow.png" という画像を読み込みました。 f:id:mattsuDev:20150621165804j:plain

このとき、画像の設定を"Embeded Resource"とする必要があります。

画像の設定は「プロパティ」から確認できます。 「リソースID」が割り振られていることも確認しておいてください。 f:id:mattsuDev:20150621170324j:plain

"Image"ビューに画像を設定する

先ほど読み込んだ画像を"Image"に設定します。 画像の読み込みには、先ほど確認した「リソースID」を指定します。

Xamarin.Forms で画像を表示する

画面中央に画像が表示されれば完了です。

f:id:mattsuDev:20150628185138p:plain