Kikuchy's Second Memory

つくる楽しさをもっと伝えたい。プログラムを書いていて、わからなかったこと・気付いた事を書き留めています。

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>

これでとりあえず用は足せました。