wpf 当有或没有 ScrollViewer 的孩子满时，如何让 WrapPanel 显示垂直滚动条

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

提问by Kay Lee

I have a WrapPanel and buttons are programmatically created and added as children of the WrapPanel. So, I want to show vertical scrollbar when the WrapPanel is full of buttons (children) to be able to add more buttons continuously.

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

If we need a scrollbar shown, do we have to bring ScrollViewer? Isn't there a way without ScrollViewer? What I want to get is, because the WrapPanel is of small size, I want a scrollbar to be shown only when needed (like full of children).

如果我们需要显示滚动条，是否必须带上 ScrollViewer？没有 ScrollViewer 就没有办法了吗？我想得到的是，因为 WrapPanel 的尺寸很小，我希望滚动条仅在需要时显示（例如充满孩子）。

My code is simple as below (WrapPanel inside Grid and the Grid is inside TabControl)

我的代码很简单，如下（WrapPanel 在 Grid 内，Grid 在 TabControl 内）

Many thanks always for your excellence.

非常感谢您的卓越表现。

Update:I struggled in finding solution on internet for even several days. And I tried put WrapPanel inside ScrollViewer. However, though I set the VerticalScroll to auto, the vertical scrollbar is always shown even when the WrapPanel doesn't have any children.

更新：我什至几天都在努力寻找互联网上的解决方案。我尝试将 WrapPanel 放在 ScrollViewer 中。但是，尽管我将 VerticalScroll 设置为自动，但即使 WrapPanel 没有任何子项，也会始终显示垂直滚动条。

Furthermore, when I intentionally make the WrapPanel full of children (buttons), the vertical scrollbar of ScrollViewer doesn't provide scrolldown availability. And the buttons at the bottom line of WrapPanel shown cut and more, I can't scroll down to see beyond the button at the bottom line. I made buttons to be placed beyond the bottom line of WrapPanel intentionally.

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

With or without, I want the vertical scrollbar to be shown when only needed (full of children). It seems very easy to be done. But it's difficult to make it work properly.

有或没有，我希望垂直滚动条只在需要时显示（满是孩子）。这似乎很容易做到。但是很难让它正常工作。

Solution:was provided by Mr. Henk Holterman

解决方案：由 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>

And below is my simple code which make button programmatically and add as a child of WrapPanel.

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

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

回答by poke

The idea in WPF is that every component has only its own job and if you want certain behavior, you combine multiple components to create the view you are looking for.

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

This means that in order to get a scroll bar for a panel, you will have to wrap it in a ScrollViewercomponent. That's the purpose of the ScrollViewerand that's the only (sane) solution to solve this.

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

---

---

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

但是，尽管我将垂直滚动设置为自动，但即使包装面板没有任何子级 [...]

Then you seem to be using the ScrollViewerincorrectly, or wrapping the wrong element. It should look like this:

那么您似乎使用ScrollViewer不正确，或包装了错误的元素。它应该是这样的：

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

If I place lots of example labels inside that, then I do get a scroll bar as soon as the window is not large enough to show them all. But if there is enough room, the scroll bar is not displayed.

如果我在其中放置了很多示例标签，那么一旦窗口不够大以显示它们，我就会得到一个滚动条。但是如果有足够的空间，则不会显示滚动条。

Note that the ScrollVieweritself needs to have the proper dimensions in the parent element, so make sure that it's not larger than the visible area. It is also necessary for the WrapPanel(or whatever other element you wrap with the ScrollViewer) to have auto widths and heights. Otherwise, with fixed dimensions, the dimensions of the panel will not change as you modify the panel's content and as such the scrolling status will not change.

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

---

---

See this complete example with a dynamic number of elements:

请参阅此包含动态元素数量的完整示例：

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

Code-behind:

代码隐藏：

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);
    }
}