画像の表示をする際に使えるコントロールがImageです。

表示するだけならButtonコントロールに埋め込むこともできますが、

Imageコントロールならではのプロパティも存在します。

今回はこのImageコントロールの全てのPublicプロパティと実際の動作についてまとめてみました。

Imageの使い方

かりまたかりまた

使い方は簡単で、以下のようにXamlに記述するのみです。

実際にどう動くのか?

Windows8.1AndroidiPhone
かりまたかりまた

このように、URLから画像を取り込むことも出来ます。

ImageのPublicプロパティ一覧

Aspectプロパティ
【read-only】 IsLoadingプロパティ
IsOpaqueプロパティ
Sourceプロパティ

ImageのプロパティをXamlで適用してみる

りんちゃんりんちゃん

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

Aspectプロパティ

かりまたかりまた

Aspectプロパティがどう動くかイマイチ分かってないので試してみます。


Windows8.1AndroidiPhone
Aspectの種類説明
AspectFillImageコントロールの横幅いっぱいに広がり、その横幅に応じた高さに設定される。

その為、Imageコントロールの高さよりも画像の高さが高くなる場合があり、画像が切れてしまう。

AspectFitImageコントロールの中に画像が表示されるように画像の大きさが設定される。

Imageコントロールに応じた高さ・幅になるので画像が切れることはない。

FillImageコントロールと同じ大きさに画像の大きさが設定される。

Imageコントロールに応じた高さ・幅になるので画像が切れることはない。

しかし、Imageコントロールと設定する画像の縦・横の比が異なる場合は注意が必要となる。

IsLoadingプロパティ

りんちゃんりんちゃん

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


Windows8.1AndroidiPhone
りんちゃんりんちゃん

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

りんちゃんりんちゃん

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

IsOpaqueプロパティ

りんちゃんりんちゃん

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


Windows8.1AndroidiPhone
なんだとさんなんだとさん

なん…だと…

かりまたかりまた

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

Sourceプロパティ

りんちゃんりんちゃん

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


りんちゃんりんちゃん

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

かりまたかりまた

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

コードビハインドでImageを設定してみる

りんちゃんりんちゃん

コードビハインドに以下のコードを書いてみるのにゃ~。

Imageファイルの読み込み方法について

かりまたかりまた

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