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

Question

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

If we need a scrollbar, do we need to bring a ScrollViewer? Is there no way without a ScrollViewer? What I want to get because the WrapPanel is small, I want the scroll bar to be displayed only when it was necessary (for example, full of children).

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

Many thanks always for your excellence.

Update: I have been struggling to find a solution on the Internet for several days now. And I tried installing WrapPanel inside ScrollViewer. However, although I set the vertical bus to auto, the vertical scroll bar is always displayed, even if the WrapPanel has no children.

Also, when I intentionally make the WrapPanel full of children (buttons), the ScrollViewer vertical scrollbar does not provide scroll accessibility. And the buttons on the bottom line of the WrapPanel are shown to cut and more, I can not scroll down to see the button on the bottom line. I made buttons to place outside the bottom line of the WrapPanel intentionally.

With or without, I want the vertical scrollbar to be displayed only when it is needed (full of children). It seems very easy to do. But it's hard to get it to work properly.

Solution: provided by Mr. 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 that makes a program programmatically and adds a WrapPanel as a 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

The idea in WPF is that each component has only its own task, and if you want a specific behavior, you combine several components to create the view you are looking for.

This means that in order to get the scroll bar for the panel, you have to wrap it in the ScrollViewer component. This is the goal of ScrollViewer , and it is the only (reasonable) solution to solve this problem.

---

However, although I set the vertical scroll to auto, the vertical scroll bar is always displayed, even if the Wrappanel does not have a child [...]

Then you seem to misuse the ScrollViewer or wrap the wrong item. It should look like this:

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

If I put many example shortcuts in it, then I get a scrollbar as soon as the window is not large enough to show all of them. But if there is enough space, the scroll bar is not displayed.

Note that the ScrollViewer element ScrollViewer must have the appropriate dimensions in the parent element, so make sure that it is not larger than the visible area. It is also necessary that the WrapPanel (or some other element that you exchange using the ScrollViewer ) has an automatic width and height. Otherwise, with fixed sizes, the panel dimensions will not change when the contents of the panels change, and therefore the scroll status will not change.

---

See full example with 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 for:

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