[wpf] how can I enable scrollbars on the WPF Datagrid?

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

This question is related to wpf datagrid scroll

The answer is


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


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.


In my case I had to set MaxHeight and replace IsEnabled="False" by IsReadOnly="True"


This worked for me. The key is to use * as Row height.

<Grid x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <TabControl  Grid.Row="1" x:Name="tabItem">
                <TabItem x:Name="ta" 
                        Header="List of all Clients">
                        <DataGrid Name="clientsgrid" AutoGenerateColumns="True" Margin="2" 
                         ></DataGrid>
                </TabItem>
        </TabControl>
    
    </Grid>

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


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