Xamarin.Forms の Xaml で Image を使う

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 です.

以上です.