画像の表示をする際に使えるコントロールがImageです。
表示するだけならButtonコントロールに埋め込むこともできますが、
Imageコントロールならではのプロパティも存在します。
今回はこのImageコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。
Imageの使い方

使い方は簡単で、以下のようにXamlに記述するのみです。
実際にどう動くのか?

このように、URLから画像を取り込むことも出来ます。
ImageのPublicプロパティ一覧
ImageのプロパティをXamlで適用してみる

プロパティを使ってみるにゃ~。
Aspectプロパティ

Aspectプロパティがどう動くかイマイチ分かってないので試してみます。
Aspectの種類 | 説明 |
---|---|
AspectFill | Imageコントロールの横幅いっぱいに広がり、その横幅に応じた高さに設定される。 その為、Imageコントロールの高さよりも画像の高さが高くなる場合があり、画像が切れてしまう。 |
AspectFit | Imageコントロールの中に画像が表示されるように画像の大きさが設定される。 Imageコントロールに応じた高さ・幅になるので画像が切れることはない。 |
Fill | Imageコントロールと同じ大きさに画像の大きさが設定される。 Imageコントロールに応じた高さ・幅になるので画像が切れることはない。 しかし、Imageコントロールと設定する画像の縦・横の比が異なる場合は注意が必要となる。 |
IsLoadingプロパティ

画像の読み込み時はActivityIndicatorコントロールを表示して、画像が表示させたら非表示にするようにしてみたにゃ~。

唯一、意図した動きをしてくれたのはAndroidだけだにゃ~。

Windows8.1ではIsLoadingプロパティがFalseにならず、iPhoneはアプリが起動するまでが重すぎて開いた瞬間に画像が表示されてしまってて何かとうまくいかないにゃ~。
IsOpaqueプロパティ

IsOpaqueプロパティをTrueに設定することで不透明度を設定できると思った!にゃ~?

なん…だと…

ちょっと、どう動くのが正解なのかがよくわかりません。IsOpaqueプロパティについて情報を求めます。
Sourceプロパティ

Sourceプロパティについては冒頭に示している通りだにゃ~。

ちなみに、以下のサンテアさんの記事によると、標準の機能でXamlからResourcesフォルダ内の画像にアクセスできないらしいにゃ~。なんでやねん!!!

なので、Resourcesフォルダなどの、URI以外から画像を読む場合にはコードビハインドなどで書くか、エクステンションを作成するしかないようです。なんて不便なんだ!
コードビハインドでImageを設定してみる

コードビハインドに以下のコードを書いてみるのにゃ~。
Imageファイルの読み込み方法について

上記のコード上で、普通にFromResourceメソッドを使用していますが、このメソッドを使用する際には、画像のプロパティから 埋め込まれたリソース に設定する必要があります。以下のサイトに詳しく載っているのでご覧ください。