LoginSignup
7

More than 3 years have passed since last update.

【Xamarin.Forms】共通部分(PCL)に配置した画像を表示する

Last updated at Posted at 2018-01-29

本記事は2018.01.29に投稿したものです。
検索「search」の綴りが脱字で「seach」になってるのは突っ込んだら負け

環境

VisualStudio2017(15.5.7)

前提

3点あります。
※3点目が特に重要です。

1・ Xamarin.Forms.NET Standardでソリューションを作成している
2・ 共通部分に適当なフォルダを作り、フォルダ内に画像が配置されている
WS004024.png

3・各画像のプロパティ詳細設定にあるビルド アクション埋め込みリソースに変更する
WS004025.png

画像を表示してみる

まず、MainPage.xamlImageコントロールを設定します。

<Image x:Name="MapPageIcon"/>
<Image x:Name="MyPageIcon"/>
<Image x:Name="SeachPageIcon"/>

Imageコントロールx:Nameプロパティを使って名前を付けています。

続いて、コードビハインドであるMainPage.xaml.csに各画像のパスを記述します。

public MainPage()
{
    InitializeComponent();

    MapPageIcon.Source = ImageSource.FromResource("test180125c.Image.MapPageIcon.png");
    MyPageIcon.Source = ImageSource.FromResource("test180125c.Image.MyPageIcon.png");
    SeachPageIcon.Source = ImageSource.FromResource("test180125c.Image.SeachPageIcon.png");
}

先程x:Nameプロパティで設定した名前に対応するパスを記述しています。
パスは、
名前空間.共通部分に作成したフォルダ.画像ファイル.拡張子
といった具合です。

これで画像が表示されたはずです。
表示されていない場合は前提を見直すか、パスをもう一度確認してください。

今回のような共通部分に画像を配置するケースでは、
ImageSourceクラスFromResource()メソッドを使わないと正しく表示されないようです。

ImageSourceクラスの詳細は以下の公式リファレンス参考に。

公式 Xamarin.Forms.ImageSource Class
https://developer.xamarin.com/api/type/Xamarin.Forms.ImageSource/

表示できたがサイズがおかしい

今回の記事のソースだけでは、同じサイズの画像を使っても、
機種によって表示される画像のサイズが異なります。

その為、ソース側でサイズを指定するなどの対策が必要です。

<Image x:Name="MapTabIcon"
        WidthRequest="40"
        HeightRequest="40"/>

ImageコントロールHeightRequestプロパティWidthRequestプロパティを追加しています。

これらのプロパティは文字通り、
HeightRequestプロパティ→縦の幅(px)
WidthRequestプロパティ→横の幅(px)
ですので、上記のコードは読み込んだ画像の縦・横の幅を40pxで指定しているということになります。

この辺り気になる方は[ポイント ピクセル]とかでggると幸せになれます。

別の対策案として、各プラットフォームごとに画像を用意するという方法がありますが、そこまでするなら各プロジェクトのResourcesフォルダに画像ファイルを入れて読み込んだ方が良さそうです。

まとめ

共通部分に画像を配置するケースでは、ImageSourceクラスFromResource()メソッドを使う

ということです。

ImageSource.FromResource()メソッドを利用しないといけない、という点に気付くまで時間がかかりました。
同じポイントで詰んでいる方も多いのではないでしょうか。

参考記事
http://ytabuchi.hatenablog.com/entry/2017/01/16/170000

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
7