画像の表示をする際に使えるコントロールがImageです。
表示するだけならButtonコントロールに埋め込むこともできますが、
Imageコントロールならではのプロパティも存在します。
今回はこのImageコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。
Imageの使い方
かりまた使い方は簡単で、以下のようにXamlに記述するのみです。
実際にどう動くのか？
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
かりまたこのように、URLから画像を取り込むことも出来ます。
ImageのPublicプロパティ一覧
ImageのプロパティをXamlで適用してみる
りんちゃんプロパティを使ってみるにゃ～。
Aspectプロパティ
かりまたAspectプロパティがどう動くかイマイチ分かってないので試してみます。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
| Aspectの種類 | 説明 |
|---|---|
| AspectFill | Imageコントロールの横幅いっぱいに広がり、その横幅に応じた高さに設定される。 その為、Imageコントロールの高さよりも画像の高さが高くなる場合があり、画像が切れてしまう。 |
| AspectFit | Imageコントロールの中に画像が表示されるように画像の大きさが設定される。 Imageコントロールに応じた高さ・幅になるので画像が切れることはない。 |
| Fill | Imageコントロールと同じ大きさに画像の大きさが設定される。 Imageコントロールに応じた高さ・幅になるので画像が切れることはない。 しかし、Imageコントロールと設定する画像の縦・横の比が異なる場合は注意が必要となる。 |
IsLoadingプロパティ
りんちゃん画像の読み込み時はActivityIndicatorコントロールを表示して、画像が表示させたら非表示にするようにしてみたにゃ～。
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
りんちゃん唯一、意図した動きをしてくれたのはAndroidだけだにゃ～。
りんちゃんWindows8.1ではIsLoadingプロパティがFalseにならず、iPhoneはアプリが起動するまでが重すぎて開いた瞬間に画像が表示されてしまってて何かとうまくいかないにゃ～。
IsOpaqueプロパティ
りんちゃんIsOpaqueプロパティをTrueに設定することで不透明度を設定できると思った！にゃ～？
| Windows8.1 | Android | iPhone |
|---|---|---|
 |  |  |
なんだとさんなん…だと…
かりまたちょっと、どう動くのが正解なのかがよくわかりません。IsOpaqueプロパティについて情報を求めます。
Sourceプロパティ
りんちゃんSourceプロパティについては冒頭に示している通りだにゃ～。
りんちゃんちなみに、以下のサンテアさんの記事によると、標準の機能でXamlからResourcesフォルダ内の画像にアクセスできないらしいにゃ～。なんでやねん！！！
かりまたなので、Resourcesフォルダなどの、URI以外から画像を読む場合にはコードビハインドなどで書くか、エクステンションを作成するしかないようです。なんて不便なんだ！
コードビハインドでImageを設定してみる
りんちゃんコードビハインドに以下のコードを書いてみるのにゃ～。
Imageファイルの読み込み方法について
かりまた上記のコード上で、普通にFromResourceメソッドを使用していますが、このメソッドを使用する際には、画像のプロパティから 埋め込まれたリソース に設定する必要があります。以下のサイトに詳しく載っているのでご覧ください。
