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

Indopacific

If your grid has enough space to show all the items, the scroll bars won't appear. The scroll bars only appear if there are more items than space. Are you sure there are more items than space in your grid? – Parsons

Yes im 100% certain that it has run out of space, but if I set the ScrollViewer.HorizontalScrollBarVisibility="Visible" it should show the scroll bars always regardless of whether it has enough space or not. – Indopacific

Grid does not include scroll bars of any sort. If you want to scroll you need ScrollViewer like <ScrollViewer><Grid>...</Grid></ScrollViewer> – Craniology

@Craniology That did the trick. Do you want to put it as an answer to get some points. – Indopacific

Duplicate question of : https://mcmap.net/q/450924/-need-to-scroll-one-wpf-grid – Florescence

@amitjha It might be a duplicate but this question and answer is of better quality. – Indopacific

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

Craniology

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. – Colombia

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 🤷‍♂️ – Craniology

Answer 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".

Colombia

Answer 3

I would like to add. If you still do not see scrollbar add PADDING attribute to ScrollViewer. This fixed my problem in an app.

Necrophilia

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. – Colombia