Xamarin.Forms の Xaml で Image を使う

2016年5月18日

Xamarin.Forms の Xaml で Image を使いたいときに少しはまったので備忘録に．

内容的におそらく10番煎じくらいでしょうがご容赦ください．

リソースの配置は上記のような感じです．
Resources/Images/image_splash.jpg

リソースのプロパティには”埋め込みリソース”を指定します．

まず，画像が表示されない例．

このコードだとクラッシュこそしませんが，画像は表示されません．

Because there is no built-in type converter from string to ResourceImageSource, these types of images cannot be natively loaded by Xaml.

Xamarin公式ページによると string を ResourceImageSource に変換する converter が存在しないため Xaml からロードすることができないらしい．

To get around this restriction, a simple custom Xaml markup extension can be written to load images using a Resource ID specified in Xaml.

カスタムエクテンションを作っちまおうぜ！！

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
  {
    if (Source == null)
      return null;

    // Do your translation lookup here, using whatever method you require
    var imageSource = ImageSource.FromResource(Source);

    return imageSource;
  }
}

string を　ImageSource に変換するエクステンションクラスです．
サンプルのコードを完全コピペです．

エクステンションを用いる Xaml です．

以上です．