連載
» 2016年09月28日 05時00分 UPDATE

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

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

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
「.NET TIPS」のインデックス

連載目次

対象: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">
  <!--<Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" />-->
  <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での実行結果
iOS Simulator for Windowsでの実行結果
Mobile Emulator(Windows 10)での実行結果 実行結果
上はVisual Studio Emulator for Androidでの実行結果。中はiOS Simulator for Windowsでの実行結果。下はMobile Emulator(Windows 10)での実行結果。なお、iOS Simulator for Windowsは本稿執筆段階でプレビュー段階となっている。使用方法については「XamarinアプリのMacでのビルドとiOS Simulator for Windows」を参照されたい。

まとめ

 ファイルを指定してImageコントロールに画像を表示するには、XAMLコードではSource属性にパス文字列を書くだけでよい。コードビハインドでも同様だ。プラットフォームごとにパスが異なるときは、OnPlatformを活用する。

「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。