如何使用或不使用ScrollViewer使WrapPanel显示垂直滚动条

Question

我有一个WrapPanel和按钮以编程方式创建并添加为WrapPanel的子项.因此,当WrapPanel充满按钮(子)时,我想显示垂直滚动条,以便能够连续添加更多按钮.

如果我们需要显示滚动条,我们是否必须携带ScrollViewer？没有ScrollViewer没有办法吗？我想得到的是,因为WrapPanel的尺寸很小,我希望只在需要时显示一个滚动条(就像孩子一样).

我的代码很简单如下(Grid中的WrapPanel和GridControl内的Grid)

非常感谢您的卓越.

更新:我努力在互联网上寻找解决方案甚至好几天.我尝试将WrapPanel放在ScrollViewer中.但是,虽然我将VerticalScroll设置为auto,但即使WrapPanel没有任何子项,也会始终显示垂直滚动条.

此外,当我故意让WrapPanel充满子项(按钮)时,ScrollViewer的垂直滚动条不提供向下滚动可用性.并且WrapPanel底线的按钮显示剪切更多,我无法向下滚动以查看底部按钮以外的按钮.我故意将按钮放在WrapPanel的底线之外.

有或没有,我希望只在需要时显示垂直滚动条(充满孩子).这似乎很容易完成.但它很难使其正常工作.

解决方案:由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的子代.

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而且这是解决这个问题的唯一(理智)解决方案.

但是,虽然我将verticalscroll设置为auto,但即使Wrappanel没有任何子项,也会始终显示verticalscrollbar [...]

然后你似乎使用ScrollViewer不正确,或包装错误的元素.它应该如下所示:

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

如果我在其中放置了大量示例标签,那么只要窗口不够大而无法全部显示,我就会得到一个滚动条.但是如果有足够的空间,则不会显示滚动条.

请注意,它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);
    }
}