Xamarin.FormsでImageをXamlで

• WindowsPhoneのMicrosoft XAMLばかりの記事やパスがうまくいかないなどハマった・・・。 Xamarinですよー。 ImageとかImageSourceとかどれにするの？かもハマり。 殆どのサイトはてきとーな説明。

mattsudev.hatenablog.com ここが参考になった。

まず画像パス

DroidプロジェクトのResources/drawableフォルダとか iOSプロジェクトのResources/フォルダとか・・ 関係ない！！！ これにハマった。 そこではない。 共有プロジェクトのPCL (Portable Class Library) プロジェクトの中に入れる。 そこに今回Resources/Folderというフォルダをほった。

画像自体の設定

右クリックして、Propertiesを選択しよう。 ※画像はResources/Punch.VetticalPunch.jpgだが自分のプロジェクトに合わせてね。

これ重要 このプルダウンの設定して、パスをコピーしておく。

xaml上ではこのようにする。Sourceをバインディングする。Sourceはビューモデルの変数に相当します。

<Image Source="{Binding Source}"/> 

ビューモデルの中身

namespace myproj
{
    using Xamarin.Forms; // これがないとImageSourceが使えない

    public class MyViewModel
    {
        public ImageSource Source { get; set; }
    }
}

バインディングするソース

Sourceに対して行ってるよ。

new ArtDescPage
                {
                    BindingContext = new MyViewModel()
                    {
                        Source = ImageSource.FromResource(@"myproj.Resources.Folder.my_image.jpg"),
                    }
                

FromResourceの中身のパスが重要。 自分のプロジェクト名.今回のフォルダ名（Resources/Folder）.画像名拡張子あり