Question

我有一个宽度= 1400的面板，它包含较小的面板，宽度= 700.如果屏幕是全宽，则较小的面板应以每行2的形式显示，否则它应该换行并显示垂直滚动条。 / p>

使用下面的代码，内容被包装但没有滚动条：

<StackPanel Grid.Column="1" Grid.Row="1" Width="1400">
    <ScrollViewer x:Name="body" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
        <WrapPanel Orientation="Horizontal" MaxHeight="700" Width="{Binding ElementName=body, Path=ViewportWidth}">
            <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

            </Border>

            <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

            </Border>

            <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

            </Border>

            <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

            </Border>
        </WrapPanel>
    </ScrollViewer>
</StackPanel>

我做错了什么？

修改

建议的解决方案不起作用。我目前的代码：

<StackPanel Grid.Column="1" Grid.Row="1" Background="#FFEAEEFC">
        <ScrollViewer x:Name="body" HorizontalScrollBarVisibility="Disabled">
            <WrapPanel Margin="10" MaxWidth="1400">
                <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

                </Border>

                <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

                </Border>

                <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

                </Border>

                <Border BorderBrush="Black" BorderThickness="1" Width="700" Height="400">

                </Border>
            </WrapPanel>
        </ScrollViewer>
    </StackPanel>

Answer 1

主堆栈面板中有一个固定的宽度，阻止滚动查看器工作。删除宽度=“1400”应该有效。

编辑：删除stackpanel或使用DockPanel更改它。 stackpanel的内容不会根据它调整大小。

Answer 2

您可以像下面这样简化xaml来实现它。

  <ScrollViewer HorizontalScrollBarVisibility="Disabled" >
        <WrapPanel MaxWidth="200">
            <Border Width="100" Height="70" Background="Blue"/>
            <Border Width="100" Height="70" Background="Green"/>
            <Border Width="100" Height="70" Background="Red"/>
            <Border Width="100" Height="70" Background="Yellow"/>
            <Border Width="100" Height="70" Background="Blue"/>
            <Border Width="100" Height="70" Background="Black"/>
        </WrapPanel>
    </ScrollViewer>

同样在典型的数据绑定场景中，您可能需要使用ListBox / ItemsControl作为容器，并将WrapPanel设置为ItemsPanelTemplate并将您的集合数据绑定到ListBox。

WPF - 包装stackpanel

2 个答案: