WPF - 包装堆栈面板答案

【问题标题】：WPF - wrapping stackpanelWPF - 包装堆栈面板
【发布时间】：2014-04-07 15:46:17
【问题描述】：

我有一个宽度 = 1400 的面板，它包含宽度 = 700 的较小面板。如果屏幕为全宽，则较小的面板应以每行 2 个显示，否则应换行并出现垂直滚动条。

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

<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>

【问题讨论】：

标签： wpf stackpanel word-wrap

【解决方案1】：

您的主堆栈面板中有一个固定宽度，阻止滚动查看器工作。删除 Width="1400" 应该可以工作。

编辑：移除堆栈面板或使用 DockPanel 进行更改。堆栈面板的内容不会根据它调整大小。

【讨论】：

【解决方案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。

【讨论】：