web-dev-qa-db-ja.com

WPF：WrapPanelを含むListBox、垂直スクロールの問題

WrapPanel内に画像を表示したいListBoxを持つUserControl（以下のXAML）があります。画像は1つの行に収まるだけ多く表示され、次の行に折り返されます。ListBoxがある場合を除いて機能しますウィンドウの利用可能なスペースよりも大きくなり、垂直スクロールバーが表示されません。つまり、コンテンツがクリップされます。 ListBoxに固定の高さを設定すると、スクロールバーが表示され、期待どおりに機能します。このリストボックスを使用可能なスペースに拡大して、垂直スクロールバーを表示するにはどうすればよいですか？このコントロールは、メインウィンドウのグリッド内のStackPanel内にあります。 StackPanelをScrollViewer内にラップすると、後のスクロールバーが表示されますが、ListBoxの上のUserControlにいくつかのコントロール（たとえば、画像サイズ「ズーム」など）を追加したい場合、これは実際に良い解決策ではありません。彼らが画像と共にスクロールすることを望まないでしょう。

ありがとう!! :)

<UserControl x:Class="GalleryAdmin.UI.GalleryView"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Background="LightGray" Margin="5" >
                    <StackPanel Margin="5">
                        <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                        <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
wpflistboxscrollbarwrappanel
23
kodbuse

さて、私は最終的に解決策に出くわしました。次のようなプレースホルダーパネルにユーザーコントロールを追加しました。

            <ScrollViewer Margin="20" >
                <StackPanel Name="contentPanel"></StackPanel>
            </ScrollViewer>

しかし、代わりにそれをグリッドに切り替えたとき、物事は私が望むように機能し始めました：

<Grid Name="contentPanel" Margin="20" />

これは、グリッドが行っているように、デフォルトでStackPanelがすべての垂直スペースを占めていないことに関係していると思います。

15
kodbuse

ItemPanelTemplateをオーバーライドする方がいいと思います。

<Grid>
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem>listbox item 1</ListBoxItem>
    <ListBoxItem>listbox item 2</ListBoxItem>
    <ListBoxItem>listbox item 3</ListBoxItem>
    <ListBoxItem>listbox item 4</ListBoxItem>
    <ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>
19
Eric Ouellet

私がしなければならなかったすべては次を設定し、問題は消えました：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
6
Eternal21

私はこの問題についていくつかの質問を検討していました。これは古いスレッドですが、これは私に答えを与えましたが、明確にするためです...

レイアウトGRIDは、このようなほとんどの問題に対する答えです。適切なListBox/WrapPanelオペレーションを取得して使用可能なスペースを埋めるために、次のコードでトリックを実行します。

                    <Grid Grid.Row="1" MaxHeight="105">
                        <ListBox ItemTemplate="{DynamicResource StoreGroupTemplate01}" ItemsSource="{Binding StoreGroupHeader}"
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                            <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>
                    </Grid>

これを別のグリッドに配置して、リストを画面の下部に配置し（つまり、Grid.Row = "1"）、垂直スクロールバーが表示される前にMaxHeightを調整（または削除）して表示領域を制御できます。現れる。

2
CHJ124

リストボックスをScrollViewerの内側に配置してから、scrollviewerのVerticalScrollBarVisibilityプロパティを "Auto"に設定します。

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Background="LightGray" Margin="5" >
                <StackPanel Margin="5">
                    <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                    <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>


HTH

1
Anand Shah