Xamarin.Forms：ファイルを指定して画像を表示するには？：.NET TIPS

Xamarin.Formsでは、ImageコントロールのSourceプロパティにパスを指定することで、その画像ファイルを表示できる。

» 2016年09月28日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

連載目次

対象：Visual Studio 2015以降

　Xamarin.Formsは、XAMLとC#を使ってAndroid／iOS／Windows向けのクロスプラットフォーム開発を行える開発環境だ。

　本稿では、Xamarin.Formsアプリでファイルから画像を取得して表示する方法を解説する。

ファイルを指定して画像を表示するには？

　Imageコントロール（Xamarin.Forms名前空間）のSourceプロパティに、ImageSourceオブジェクト（Xamarin.Forms名前空間）をセットすればよい。ファイルを指定してImageSourceオブジェクトを作るには、いろいろな方法がある。それは、URLを指定して表示する方法に似ている。

　XAMLでは、次のコードのように書ける。

<Image Source="Assets/StoreLogo.png " />


<Image>
<Image.Source>
    <FileImageSource File="Assets/StoreLogo.png" />
</Image.Source>
</Image>


<Image>
<Image.Source>
    <OnPlatform x:TypeArguments="ImageSource"
                iOS="Icon-Small-40.png"
                Android="icon.png"
                WinPhone="Assets/StoreLogo.png" />
</Image.Source>
</Image>

ファイルを指定して画像を表示する例（XAML）
プラットフォームによらず同じ画像ファイルを使う場合は、最初のコードのようにシンプルに書けばよい。
2番目のコードのように冗長な書き方をするときは、<ImageSource>要素ではなく<FileImageSource>要素を使う。
プラットフォームごとに異なる画像ファイルを使う場合には、3番目のコードのように、冗長な書き方をした上で、<OnPlatform>要素を使う。このとき、<OnPlatform>要素のx:TypeArguments属性には、FileImageSourceクラスではなくImageSourceクラスを指定する。
なお、<OnPlatform>要素については、「.NET TIPS：Xamarin.Forms：プラットフォームに応じて画面の一部を変えるには？」を参照してほしい。

　上のXAMLコードの「冗長な書き方」を見てもらうと、ImageコントロールのSourceプロパティに（前述したImageSourceオブジェクトではなく）FileImageSourceオブジェクトを設定している。

　FileImageSourceクラスはImageSourceクラスを継承しており、Fileプロパティが追加されている。上のコードのようにファイルのパスを指定するだけで使えるのだ（ImageSourceクラスにはFileプロパティがないので、上のコードのような記述はできない）。

　さらに、冗長な書き方では、上のコードの3番目の例のようにImageSourceオブジェクトとして<OnPlatform>要素も使える。プラットフォームごとに異なる画像ファイルを使うときは、このような記述になる。このとき、x:TypeArguments属性に指定するものは、FileImageSourceクラスではなくImageSourceクラスになるので、注意しよう。

　コードビハインドでは、次のコードのように書ける。

// XAMLコード側には、「Image1」／「Image2」／「Image3」という名前のImageコントロールが配置してある

// 表示したい画像ファイルのパス
var bitmapFile = "……省略……";

// FileImageSourceオブジェクトを直接生成する方法
Image1.Source = new FileImageSource{ File = bitmapFile };

// ImageSourceクラスのFromFileメソッドを使う方法
Image2.Source = ImageSource.FromFile(bitmapFile);

// 暗黙の型変換が働くので、次のようにパス文字列を直接与えてもよい
Image3.Source = bitmapFile;

ファイルを指定して画像を表示する例（C#）
コードビハインドではImageSourceクラスのFromFileメソッドを使うと簡単だ。

FileImageSourceクラスを使ってもよいが、少し冗長になる。
また、暗黙の型変換が働くので、パス文字列を直接与えてもよい。

　コードビハインドでは、ImageSourceクラスのFromFileメソッドを使うと簡単である。FromFileメソッドは、ImageSourceオブジェクトを返す。

　また、暗黙の型変換が用意されているので、上のコードの最後にあるように、パス文字列をImageコントロールのSourceプロパティに直接代入するコードも書ける。

　FileImageSourceクラスを使ってもよいが、ちょっと冗長になる。なお、FileImageSourceクラスはImageSourceクラスから継承したCancelメソッドを持っているが、呼び出しても何も起きない（ファイル読み込みがキャンセルされるわけではない）。

実際の例

　実際の例として、以上で説明したコードを試してみよう。

　デバイスが持つストレージにある任意のファイルを表示できるわけではないので、注意してほしい（プラットフォームごとに制限は異なる）。ここでは、ソリューションを作るときに自動生成された画像ファイルを使う。

　ソリューションを新しく作るときに［Blank Xaml App (Xamarin.Forms Portable)］を選ぶ。そのPCLプロジェクトにあるMainPage.xamlファイルの内容を次のように変更する。

<?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:local="clr-namespace:dotNetTips1160"
             x:Class="dotNetTips1160.MainPage">

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" />
</ContentPage.Padding>
<ContentPage.Resources>
    <ResourceDictionary>
      <Style TargetType="Image">
        <Setter Property="Aspect" Value="AspectFit" />
        <Setter Property="HeightRequest" Value="50" />
        <Setter Property="VerticalOptions" Value="StartAndExpand" />
      </Style>
      <Style TargetType="Label">
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="VerticalOptions" Value="EndAndExpand" />
      </Style>
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
    <Label Text="Xamlで表示" />
    <Image>
      <Image.Source>
        <OnPlatform x:TypeArguments="ImageSource"
                    iOS="Icon-Small-40.png"
                    Android="icon.png"
                    WinPhone="Assets/StoreLogo.png" />
      </Image.Source>
    </Image>
    <Label Text="コードで表示（FileImageSource）" />
    <Image x:Name="Image1" />
    <Label Text="コードで表示（ImageSource.FromFile）" />
    <Image x:Name="Image2" />
    <Label Text="コードで表示（暗黙の型変換）" />
    <Image x:Name="Image3" />
</StackLayout>
</ContentPage>

ファイルを指定して画像を表示するサンプルコード（XAML）
自動生成されたLabelコントロールをコメントアウトし、<ContentPage.Padding>要素以降を追加した。
Imageコントロールを4つ配置し、1つ目にはXAMLコードでパス文字列からImageSourceオブジェクトを作ってImage.Sourceプロパティに与えた。残り3つには「Image1」／「Image2」／「Image3」という名前だけを与えた（後ほど、コードビハインドからSourceプロパティをセットする）。

　次に、コードビハインドのMainPage.xaml.csファイルに次のようなコードを追加する。

public MainPage()
{
InitializeComponent();

// 表示したい画像ファイルのパス
var bitmapFile = Device.OnPlatform<string>(
                      iOS: "Icon-Small-40.png",
                      Android: "icon.png",
                      WinPhone: "Assets/StoreLogo.png");

// FileImageSourceオブジェクトを直接生成する方法
Image1.Source = new FileImageSource{ File = bitmapFile };

// ImageSourceクラスのFromFileメソッドを使う方法
Image2.Source = ImageSource.FromFile(bitmapFile);

// 暗黙の型変換が働くので、次のようにパス文字列を直接与えてもよい
Image3.Source = bitmapFile;
}

ファイルを指定して画像を表示するサンプルコード（C#）
MainPage.xaml.csファイルのコンストラクタに、「InitializeComponent();」より下の部分を追加した。

　これで実行してみると、次の画像のようになる。

Visual Studio Emulator for Androidでの実行結果

実行結果
上はVisual Studio Emulator for Androidでの実行結果。中はiOS Simulator for Windowsでの実行結果。下はMobile Emulator（Windows 10）での実行結果。なお、iOS Simulator for Windowsは本稿執筆段階でプレビュー段階となっている。使用方法については「XamarinアプリのMacでのビルドとiOS Simulator for Windows」を参照されたい。