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

ぴよぴよエンジニアの日記

ぴよぴよエンジニアの日記です 技術系のことや日常のことをつぶやきます

Xamarin.Forms の Xaml で Image を使う

Xamarin C#

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

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

f:id:Santea:20160518213939p:plain

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


f:id:Santea:20160519015914p:plain

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


まず,画像が表示されない例.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="EvDrivingEstimator.Views.SplashPage">
  
  <Image Source="EvDrivingEstimator.Resources.Images.image_splash.jpg" />
  
</ContentPage>

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



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 に変換するエクステンションクラスです.
サンプルのコードを完全コピペです.



<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:local="clr-namespace:EvDrivingEstimator;assembly=EvDrivingEstimator"
             x:Class="EvDrivingEstimator.Views.SplashPage">
  
  <Image Source="{local:ImageResource EvDrivingEstimator.Resources.Images.image_splash.jpg}" />
  
</ContentPage>

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


以上です.