Image／ImageCell の Source の指定方法

こんにちは。エクセルソフトの田淵です。

よく忘れてしまうので、メモで残します。

Image の SourceProperty は ImageSource

なので、例えば ListView の ViewCell に Image を使用する場合、XAML で次のように指定したら、

<ListView HasUnevenRows="True"
          ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <Image Source="{Binding ImageSource}" />
                    <Label Text="{Binding Name}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<Image Source="{Binding Image}" /> の Source プロパティには、ImageSource を指定します。(以下では、ImageSource.FromResource を使用しています)

public partial class XamlPage : ContentPage
{
    public XamlPage()
    {
        InitializeComponent();

        var people = new List<Person>()
        {
            new Person
            {
                Name = "Yoshito Tabuchi",
                Company = "XLsoftKK",
                ImageSource = ImageSource.FromResource("App3.Resources.ytabuchi.jpg"),
            },
            new Person
            {
                Name = "Miguel de Icaza",
                Company = "Microsoft",
                ImageSource = ImageSource.FromResource("App3.Resources.miguel.png"),
            },
        };

        this.BindingContext = people;
    }
}

ImageSource

ImageSource は以下を見てもらうとよいと思いますが、FromFile, FromResource, FromUri が利用できます。

developer.xamarin.com

FromFile：
各プラットフォームに画像ファイルを配置する必要がありますが Android で各 DPI 用の画像を用意できたり、iOS で @2x @3x の画像を用意できるので、アイコンなどにはこちらを使用するのが良さそうです。
画像のビルドアクションは iOS では BundleResource、Android では AndroidResource、UWP では Content を設定します。
デフォルトなので、image.Source = "xxx.png" としても image.Source = ImageSource.FromFile("xxx.png") としても大丈夫です。
FromResource（Embedded Images）：
PCL だけに画像を配置する場合は、こちらを使用します。
画像のビルドアクションは EmbeddedResource（埋め込みリソース） を設定します。
Resource ID を指定しますが、Resource ID は、「標準の名前空間」の後にフォルダ名、ファイル名となります。今回の例では以下のようなフォルダ構成なので、App3.Resources.xxx.png などとなります。

f:id:ytabuchi:20170116161510p:plain:w300

FromUri：
ImageSource.FromUri(new Uri("https://xxx.com/example-app.png")) というように、Uri で指定します。
また試せていないですが、ダウンロードした画像をキャッシュできるようです。ImageSource の代わりに、UriImageSource をインスタンス化して指定します。

webImage.Source = new UriImageSource {
    Uri = new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"),
    CachingEnabled = true,
    CacheValidity = new TimeSpan(5,0,0,0)
};

Xamarin 気になった方は

是非ダウンロードして触ってみてください。Visual Studio 2015 をご利用の方は Update 3 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。学習用リソースや JXUG リンクページに参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

有償セミナー、トレーニング | Xamarin : XLsoft エクセルソフト

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属しているエクセルソフトの宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば弊社ページを覗いてみてください。

以上です。