how can I enable scrollbars on the WPF Datagrid?

Question

When I run the following Northwind WPF Toolkit Datagrid code from this article, I get a datagrid, but there are no scrollbars and hence the user can only see part of the datagrid. I am using the newest version March 2009.

What do I need to specify so that the WPF Datagrid has scrollbars?

I tried putting the datagrid in a ScrollViewer but that didn't help.

XAML:

<Window x:Class="TestDataGrid566.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    Title="Window1" Height="600" Width="800">
    <StackPanel>
        <toolkit:DataGrid x:Name="TheDataGrid" AutoGenerateColumns="True"/>
    </StackPanel>
</Window>

code-behind:

using System.Linq;
using System.Windows;
using TestDataGrid566.Model;

namespace TestDataGrid566
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            NorthwindDataContext db = new NorthwindDataContext();
            var customers = from c in db.Customers
                            select c;
            TheDataGrid.ItemsSource = customers;
        }
    }
}

Solution 1

Put the DataGrid in a Grid, DockPanel, ContentControl or directly in the Window. A vertically-oriented StackPanel will give its children whatever vertical space they ask for - even if that means it is rendered out of view.

Solution 2

WPF4

<DataGrid AutoGenerateColumns="True" Grid.Column="0" Grid.Row="0"
      ScrollViewer.CanContentScroll="True" 
      ScrollViewer.VerticalScrollBarVisibility="Auto"
      ScrollViewer.HorizontalScrollBarVisibility="Auto">
</DataGrid>

with : <ColumnDefinition Width="350" /> & <RowDefinition Height="300" /> works fine.

Scrollbars don't show with <ColumnDefinition Width="Auto" /> & <RowDefinition Height="300" />.

Also works fine with: <ColumnDefinition Width="*" /> & <RowDefinition Height="300" /> in the case where this is nested within an outer <Grid>.

Solution 3

If any of the parent containers RowDefinition Height set to "Auto" also stoppers for scrollbars

Alternatively you may set Height "*"

Which happened in my case.

Solution 4

Adding MaxHeight and VerticalScrollBarVisibility="Auto" on the DataGrid solved my problem.

Solution 5

Add grid with defined height and width for columns and rows. Then add ScrollViewer and inside it add the dataGrid.

View more solutions

Comments

[Sam]

To add to this, a HeaderedContentControl is implemented internally with a StackPanel which will cause a DataGrid to behave in a manner inconsistent with the ContentControl.

[Ted]

I thought this advice was rubbish for hours, until I finally spotted the StackPanel tag lurking unseen at the top of my XAML. Thanks!

[kiran]

Also having a vertically-oriented Stackpanel will hinder Virtualization and affect application performance.

[xmedeko]

@Konrad Viltersten ScrollViewer is an attached property.

[Bravo Yeung]

Yeah, this is effective. Solved my issue perfectly. Thanks~

[Sachin Kainth]

Best answer in my humble opinion.

[Alan Wayne]

Also, if the DataGrid is placed in a Grid Row, do not use "Auto", as this will allow the datagrid to expand off the screen--without scrollbars. To show scroll bars, a size must be explicitly given to the DataGrid -- as in * or a number.

[Christian Casutt]

i don't know why a simple solution like this has been down voted - i can confirm, this simple (without bla bla and complex stuff) works perfectly for me - thanks!

[Dan Rayson]

@ChristianCasutt Because just by looking at it, it's more likely that the TabItem is affecting the outcome. When I use * for the height on my row that contains a datagrid, it doesn't work.

[H2ONaCl]

If you prefer to keep the StackPanel, you can. Just define the height of the DataGrid. There is no need to enclose in ScrollViewer because then you would get 2 scroll bars which is probably not what you want. <StackPanel><DataGrid Height="300"/></StackPanel>