読者です 読者をやめる 読者になる 読者になる

万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

Xamarin.FormsでImageをXamlで

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

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

まず画像パス

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

画像自体の設定

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

これ重要 f:id:shinriyo:20160724104910p:plain このプルダウンの設定して、パスをコピーしておく。

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).画像名拡張子あり