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

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Image/ImageCell の Source の指定方法

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

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

Image の SourceProperty は ImageSource

なので、例えば ListViewViewCellImage を使用する場合、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 では BundleResourceAndroid では 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 も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。