WPF Grid not showing scroll bars

Question

In .NET 3.5 I have a Grid in a Window. I am populating this Grid with Buttons. When the buttons fill the grid and go out of view the Grid does not show the scroll bar. I have set the Grids vertical scroll to be visible but its still not showing.

<Window x:Name="Window" x:Class="MergeToCheck.CheckList"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Loaded="Window_Loaded" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True" WindowStyle="None" 
        Height="671" Width="846.299" BorderThickness="5">

    <Grid>
        <Grid x:Name="MyGrid" HorizontalAlignment="Left" Height="535" VerticalAlignment="Top" Width="736" Margin="10,63,0,0" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible">
            <Grid.Resources>
                <Style TargetType="{x:Type Panel}">
                    <Setter Property="Margin" Value="0,0,0,6" />
                </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
        </Grid>        
    </Grid>
</Window>

The code which adds the buttons:

        CheckList CheckListCtrl = new CheckList();

        System.Windows.Controls.Button btn;
        int row = 0;
        int col = 0;

        CheckListCtrl.MyGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });

        foreach(var c in list)
        {
            btn = new System.Windows.Controls.Button();
            btn.FontSize = 15;
            btn.FontWeight = FontWeights.UltraBold;
            btn.Content = c.Name;
            btn.Style = System.Windows.Application.Current.FindResource(System.Windows.Controls.ToolBar.ButtonStyleKey) as Style;
            btn.BorderBrush = new SolidColorBrush(Colors.Black);
            btn.BorderThickness = new Thickness(2);
            btn.MinWidth = 145;
            btn.MaxWidth = 145;
            btn.MinHeight = 95;
            btn.MaxHeight = 95;

            btn.SetValue(Grid.RowProperty, row);
            btn.SetValue(Grid.ColumnProperty, col);

            CheckListCtrl.MyGrid.Children.Add(btn);

            if ((col + 1) % CheckListCtrl.MyGrid.ColumnDefinitions.Count == 0)
            {                    
                col = 0;
                row++;
                CheckListCtrl.MyGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
            }
            else
                col++;
        }

Solution 1

Grid does not support scrolling functionality. If you want to scroll something you need ScrollViewer control

<ScrollViewer HorizontalScrollBarVisibility="Visible">
   <Grid x:Name="MyGrid" HorizontalAlignment="Left" Height="535" VerticalAlignment="Top" Width="736" Margin="10,63,0,0">
      <Grid.Resources>
         <Style TargetType="{x:Type Panel}">
            <Setter Property="Margin" Value="0,0,0,6" />
         </Style>
      </Grid.Resources>
      <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
      </Grid.ColumnDefinitions>
   </Grid>        
</ScrollViewer>

Solution 2

In general, a ScrollViewer needs to be told that it is smaller than its content. So just adding a ScrollViewer to make a control scrollable is not always sufficient. The ScrollViewer knows that it is smaller if its enclosing control has a fixed or maximum size, or if itself has a fixed height or maximum height, as in

<ScrollViewer Height=500 HorizontalScrollBarVisibility="Visible">
...
</ScrollViewer>

, or if its Height (or MaxHeight) is bound to something appropriate.

The same thing goes for the horizontal scrollbar, you can set it to visible all you like, if the width of the ScrollViewer is not constrained, the ScrollViewer will just expand to the size of its content. If the scrollbar visibility then is "Auto", it will not show a scrollbar, and if it is "Visible", it will show a disabled one. (Note that the HorizontalScrollbarVisibility is "Disabled" by default.) To get a useful horizontal scrollbar, constrain the width of the ScrollViewer and set its HorizontalScrollbarVisibility to at least "Auto".

Comments

[J S]

This is still not guaranteed to show a scroll viewer. If WPF thinks that the element inside the ScrollViewer is already fully visible, then the ScrollViewer stays invisible even when its Visibility gets explicitly set to True.

[dkozl]

There's no single piece of code that will guarantee to show scroll bars. There's no single piece of code that will guarantee anything full stop 🤷‍♂️

[J S]

In your case, giving the ScrollViewer a Padding may have made the space for its content small enough that it decided it now needed to scroll. But in the general case, if the ScrollViewer's height itself is not limited, it will expand to the size of its content (plus potential Padding) and not display a scrollbar, see my answer below.