c# - WPF 换行面板和滚动

Question

我有一个简单的 WrapPanel，其中包含许多宽控件。当我调整 Window 的 Width 大小时，一切都按预期工作。如果有足够的空间，控件将跨越一行，或者在没有足够空间时换行到下一行。

但是，我需要做的是，如果所有控件基本上垂直堆叠(因为没有更多的水平空间)和 Window 的 Width减少得更多，出现一个水平滚动条，这样我就可以滚动并查看整个控件(如果需要)。下面是我的 xaml。我尝试将 WrapPanel 包裹在 ScrollViewer 中，但无法实现我的目标。

<Window x:Class="WpfQuotes.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="Auto" Width="600" Foreground="White">
    <WrapPanel>
      <Button Width="250">1</Button>
      <Button Width="250">2</Button>
      <Button Width="250">3</Button>
    </WrapPanel>
</Window>

因此，如果将上述Window 的Width 减小到最小，您将看不到按钮的文本。我希望出现一个水平滚动条，这样我可以滚动查看文本，但不会干扰通常的换行功能。

谢谢。

更新:我遵循了下面保罗的建议，水平滚动条现在按预期出现了。但是，我还希望垂直滚动可用，所以我设置了 VerticalScrollBarVisibility="Auto"。问题是，如果我调整窗口大小以便出现垂直滚动条，水平滚动条也会始终出现，即使不需要(有足够的水平空间来查看整个控件)。似乎出现的垂直滚动条弄乱了滚动查看器的宽度。有没有办法纠正这个问题，以便水平滚动条不会出现，除非确实需要它？

下面是我的 xaml 和我在 CustomWrapPanel 中添加的唯一代码:

<Window x:Class="Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cwp="clr-namespace:CustomWrapPanelExample"
        Title="Window1" Height="Auto" Width="300" Foreground="White" Name="mainPanel">
  <ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto">
    <cwp:CustomWrapPanel Width="{Binding ElementName=MyScrollViewer, Path=ActualWidth}">
      <Button Width="250">1</Button>
      <Button Width="250">2</Button>
      <Button Width="250">3</Button>
      <Button Width="250">4</Button>
      <Button Width="250">5</Button>
      <Button Width="250">6</Button>
      <Button Width="250">7</Button>
      <Button Width="250">8</Button>
      <Button Width="250">9</Button>
    </cwp:CustomWrapPanel>
  </ScrollViewer>
</Window>

CustomWrapPanel 中唯一被覆盖的东西:

protected override Size MeasureOverride(Size availableSize)
{
  double maxChildWidth = 0;
  if (Children.Count > 0)
  {
    foreach (UIElement el in Children)
    {
      if (el.DesiredSize.Width > maxChildWidth)
      {
        maxChildWidth = el.DesiredSize.Width;
      }
    }
  }      
  MinWidth = maxChildWidth;
  return base.MeasureOverride(availableSize);
}

Answer 1

事情是这样的，如果您打算使用包裹面板，它会做两件事，它会在一个方向上占用尽可能多的可用空间，并在另一个方向上根据需要扩展。例如，如果你把它放在一个窗口内，就像你拥有它一样，它会占据尽可能多的水平空间，然后根据需要向下扩展，这就是垂直滚动条起作用的原因，父容器说“这是我有多宽，但你可以让自己在垂直方向上尽可能大”，如果你将其更改为水平滚动条，滚动查看器实质上是在说“这是你可以有多高，但你可以有多宽你想要”在这种情况下，包裹面板不会包裹，因为没有水平约束。

一个可能的解决方案是像这样将环绕面板的环绕方向从水平更改为垂直(这可能不是理想的或预期的行为):

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <WrapPanel Orientation="Vertical">
            <Button Width="250">1</Button>
            <Button Width="250">2</Button>
            <Button Width="250">3</Button>
        </WrapPanel>
    </ScrollViewer>

为了获得您期望的行为，您必须做一些更接近于此的事情:

    <ScrollViewer x:Name="MyScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <WrapPanel MinWidth="250" Width="{Binding ElementName=MyScrollViewer, Path=ViewportWidth}">
            <Button Width="250">1</Button>
            <Button Width="250">2</Button>
            <Button Width="250">3</Button>
        </WrapPanel>
    </ScrollViewer>

但是，第二种解决方案仅在您已经知道子元素的宽度时才有效，理想情况下您希望将最大宽度设置为最大子元素的实际宽度，但为了做到这一点，您需要创建一个派生自包装面板的自定义控件并自己编写代码来检查它。