Orientation="Vertical"なStackPanelの中にListViewを入れると縦方向にスクロールできない
躓いてデバッグにさんざん時間とられたので、メモ。
FrameworkElementを並べるのに便利なコンテナの一つに、StackPanelというコンテナがあります。
StackPanelの中にエレメントを足していくと、縦や横に、きれいに整列させることができます。
ページの中に見栄えよく部品を並べる際に、とても役に立つのですが、ひとつ問題が。
StackPanel.OrientationをVerticalに設定したStackPanelに、HeightがAutoになっている縦方向にスクロールするListViewを入れると、ListViewを縦スクロールできない。
例えばこんなXAMLのようにエレメントを配置すると、
<Page> <StackPanel Orientation="Vertical"> <TextBlock Text="Label of List"> <ListView Height="Auto"> <ListViewItem>......</ListViewItem> <ListViewItem>......</ListViewItem> (ListViewItemをたくさん並べておく。画面外に出るまで) </ListView> </StackPanel> </Page>
StackPanelはページいっぱいに広がりますが、ListViewはページ外に飛び出してしまうのです。
飛び出したListViwは、すでに全項目を表示したつもりになっているので、スクロールさせてくれません。
これは、ListViewのVerticalAlignmentをStretchにしても変わりませんでした。
ListViewをScrollViewでくくってみても変化なし。
と言うより、この問題はListViewよりScrollViewの問題なんでしょうね。
もちろん、ListViewのHeightを決め打ちしちゃえばスクロールできるのですが、環境によってディスプレイのサイズは異なるのでそれは避けたい。
どうしたらListViewは画面いっぱいの高さで止まってくれるのだろうか……
まあそもそも、StackPanel使うな、って話なんですけれどね!
StackPanelは、中のエレメントの並び順に高さを計算し、積み上げていくようにして表示するコンテナです。
StackPanelの中では、表示時の高さや幅を可能な限り広くとってくれるんでしょうね。
さて、今回はListViewの上に、そのリストの説明文を置きたかっただけだったので、
<Page> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Label of List"> <ListView Grid.Row="1" Height="Auto"> <ListViewItem>......</ListViewItem> <ListViewItem>......</ListViewItem> (ListViewItemをたくさん並べておく。画面外に出るまで) </ListView> </Grid> </Page>
これでとりあえず用は足せました。