如何使 WrapPanel 在 children 已满时显示垂直滚动条，有或没有 ScrollViewer

Question

我有一个 WrapPanel，按钮以编程方式创建并添加为 WrapPanel 的 children。所以，我想在 WrapPanel 充满按钮（children）时显示垂直滚动条，以便能够连续添加更多按钮。

如果需要显示滚动条，是否需要自带ScrollViewer？没有ScrollViewer就没有办法吗？我想得到的是，因为WrapPanel的尺寸很小，所以我希望滚动条只在需要的时候显示（比如满children）。

我的代码很简单（WrapPanel inside Grid and Grid inside TabControl）

非常感谢您一直以来的出色表现。

更新： 我在网上苦苦寻找解决方案好几天了。我试着把 WrapPanel 放在 ScrollViewer 里面。但是，虽然我将 VerticalScroll 设置为自动，但即使 WrapPanel 没有任何 children.

，垂直滚动条也会始终显示

此外，当我故意使 WrapPanel 充满 children（按钮）时，ScrollViewer 的垂直滚动条不提供向下滚动可用性。 WrapPanel 底行的按钮显示为剪切等，我无法向下滚动以查看底行按钮之外的内容。我特意将按钮放置在 WrapPanel 的底线之外。

不管有没有，我都希望垂直滚动条只在需要的时候显示（满children）。这似乎很容易完成。但是很难让它正常工作。

解决方案：由Henk Holterman先生提供

                    <DropShadowEffect/>
                </Button.Effect>
            </Button>
            <WrapPanel x:Name="WrapPanelGreen" HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="232" UseLayoutRounding="True" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
        </Grid>
    </TabItem>
</TabControl>

下面是我的简单代码，它以编程方式制作按钮并添加为 WrapPanel 的 child。

for (int k = 0; k < Overviews.Length; k++)
{
    Button btnoverviewcontent = new Button();

    ToolTip tt = new ToolTip();
    tt.Content = "Press this button if you want to modify or delete.";
    btnoverviewcontent.ToolTip = tt;

    btnoverviewcontent.Cursor = Cursors.Hand;

    SolidColorBrush mySolidColorBrush = new SolidColorBrush();
    mySolidColorBrush.Color = Color.FromArgb(255, 101, 173, 241);
    btnoverviewcontent.Background = mySolidColorBrush;

    btnoverviewcontent.Effect = new DropShadowEffect
    {
        Color = new Color { A = 255, R = 0, G = 0, B = 0 },
        Direction = 315,
        ShadowDepth = 5,
        Opacity = 1
    };

    btnoverviewcontent.Padding = new Thickness(3, 3, 3, 3);
    btnoverviewcontent.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;
    TextBlock textBlock = new TextBlock()
    {
        Text = Overviews[k],
        TextAlignment = TextAlignment.Left,
        TextWrapping = TextWrapping.Wrap,

    };

    btnoverviewcontent.Content = textBlock;
    btnoverviewcontent.BorderThickness = new Thickness(0, 0, 0, 0);
    btnoverviewcontent.FontStretch = FontStretches.UltraExpanded;
    btnoverviewcontent.Margin = new Thickness(5, 5, 5, 5);

    WrapPanelGreen.Children.Add(btnoverviewcontent);
    btnoverviewcontent.Click += new RoutedEventHandler(OnOverviewClick);

Answer 1

WPF 中的思想是每个组件只有自己的工作，如果您想要特定的行为，您可以组合多个组件来创建您正在寻找的视图。

这意味着为了获得面板的滚动条，您必须将其包装在 ScrollViewer 组件中。这就是 ScrollViewer 的目的，也是解决这个问题的唯一（理智）解决方案。

However, though I set the verticalscroll to auto, the verticalscrollbar is always shown even when the Wrappanel doesn't have any child […]

那么您似乎错误地使用了 ScrollViewer，或者包裹了错误的元素。它应该是这样的：

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <WrapPanel>
        <!-- Any number of components here -->
    </WrapPanel>
</ScrollViewer>

如果我在其中放置大量示例标签，那么只要 window 不够大，无法显示所有示例标签，我就会得到一个滚动条。但是如果有足够的空间，则不会显示滚动条。

请注意，ScrollViewer 本身需要在父元素中具有适当的尺寸，因此请确保它不大于可见区域。 WrapPanel（或用 ScrollViewer 包裹的任何其他元素）也有必要具有自动宽度和高度。否则，对于固定尺寸，面板的尺寸不会随着您修改面板的内容而改变，因此滚动状态也不会改变。

查看这个包含动态元素数量的完整示例：

<Window x:Class="WpfExampleApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="300" Width="200">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <WrapPanel Name="panel">
            <Button Click="Button_Click">Add child</Button>
        </WrapPanel>
    </ScrollViewer>
</Window>

代码隐藏：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Label element = new Label() { Content = "This is some example content" };
        panel.Children.Add(element);
    }
}

Answer 2

...以防万一有人在 4.5 年后看到这个 post 并且觉得该解决方案根本没有帮助：我有一个类似的问题，这是由 StackPanel 引起的，我的 ScrollViewer 和动态按钮放在其中...... 似乎 StackPanel 无限扩展高度，因此 ScrollViewer 和 WrapPanel 总是将它们的高度扩展到 window 范围之外。所以你根本无法滚动。将 StackPanel 包装到 ScrollViewer 中对我的情况有所帮助（尽管最终我不得不最终更改控件...）

问候

如何使 WrapPanel 在 children 已满时显示垂直滚动条，有或没有 ScrollViewer

How to make WrapPanel to show vertical scrollbar when children are full with or without ScrollViewer

c#

wpf

scroll

wrappanel