2013年12月14日土曜日

ListViewにItemを幅一杯にみつしり表示させるには

WiFiSD8 の作業中に気付いた話。
Win8.1でアプリの幅が可変になりました。
それで、狭幅用の1次元なListViewを持とう、とXAMLを弄っていて、あれ?と。



左中のアプリがそれです。幅一杯にアイテムを広げて表示したかったのですが、モノによっては短く表示されてしまう。???

なんでかなーとパソコンに向かって呟いていたら(twitter)、超イカすTwitterClient App "Mevy"を作っておられる雪猫氏に「ListView/ListViewItemのHorizontalContentAlignmentをStretchにすればいいのでは?」という情報を頂き、さっそく試してみたのだけれども…結果は同じでした。
無念。

んんんnーー何故ーと上の画面を見ていて気づくのは、日付の下の数字が「1」のアイテムだけ幅の変化が出来てないと。

このDataTemplate、中にはFlipViewが入っていまして、


 こんなのです。
「1」というのは、アイテムが内包する写真の数が1、つまりFlipViewに載っているアイテムの数が1、という意味です。

 今回の様に可変長域にみつしり詰めたいとき、「これだけ幅が欲しい」と親のコンテナに要求を出せるElementが必要です。
例えば上のTemplateで、もし一番幅が大きいのが幅300のStackPanelだったとしたら、このTemplateがはまるListViewの幅がなんぼ大きくても別に広がったりはしないと。

上の場合、そういう要求を出す原動力になっているのはFlipViewの中のImage"FlipViewItemOriginalImage"だけです。ここでStretchが「UniformToFill」になっているが故に、親に「くれるだけ幅をくれ!幅を!」という要求が通り、みつしり表示されると。

で、今回の場合・・・どうも、FlipViewの中のアイテムが1個だけの場合、意図したようなRequestが飛んでいかないがために、一番上の画像のような事になっているのかな、と。
何故?というのは今回わからなかったです。すみません。

回避策として・・・カッコ悪いのですが、FlipViewの代わりに親に幅を寄越せとRequestできるアイテムを一個置くことにしました。上のDataTemplateでコメントアウトされているRectangleです。Color#00000000のため見えないですが、Stretch=UniformToFillな為親に「幅をくれるだけ寄越せ!!」と要求します。

このWorkaroundで、意図した動作をさせることが出来ました。


0 件のコメント:

コメントを投稿