Horizontal Scrollbar not appearing in DataGrid

wpf datagrid scrollbar

13,810

Solution 1

You have a height of Auto

<Grid Grid.Row="2" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <DataGrid  x:Name="dataGrid"
                    SelectionMode="Single"
                    AutoGenerateColumns="True"                      
                    Margin="0,5" Grid.Row="1" IsReadOnly="True"
                    ItemsSource="{Binding GridItem, Mode=TwoWay}"  SelectedItem="{Binding SelectedItem}"
                    AlternatingRowBackground="#FFF5F4F8" Background="White" Grid.ColumnSpan="2"
                    ScrollViewer.CanContentScroll="True" 
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                    ScrollViewer.VerticalScrollBarVisibility="Auto">
                </DataGrid>
            </Grid>

Change to

<DataGrid Grid.Row="2"  x:Name="dataGrid"
                    SelectionMode="Single"
                    AutoGenerateColumns="True"                      
                    Margin="0,5" Grid.Row="1" IsReadOnly="True"
                    ItemsSource="{Binding GridItem, Mode=TwoWay}"  SelectedItem="{Binding SelectedItem}"
                    AlternatingRowBackground="#FFF5F4F8" Background="White" Grid.ColumnSpan="2"
                    ScrollViewer.CanContentScroll="True" 
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                    ScrollViewer.VerticalScrollBarVisibility="Auto">
                </DataGrid>

Solution 2

I had a similar issue with the horizontal scrollbar not showing. I had a column with a width of "*". Once I removed this the scrollbar appeared. I guess if you set the width to a fixed with it would also appear.

Solution 3

Here few things you should keep in mind assign width property od datagrid view. define your columns give width of the last column as auto and also assign some minWidth.

            <DataGrid  VerticalAlignment="Top" Margin="0,0,0,0" Height="221" HorizontalAlignment="Left" Width="234"
                DataContext="{DynamicResource ItemCollectionViewSource}" 
                        ItemsSource="{Binding}" AutoGenerateColumns="False" IsReadOnly="True" 
                        ScrollViewer.CanContentScroll="True" 
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                        ScrollViewer.HorizontalScrollBarVisibility="Auto" >
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding ID}" Header="ID"/>
                    <DataGridTextColumn Binding="{Binding URL}" Header="URL" Width="Auto" MinWidth="186"/>
                </DataGrid.Columns>
            </DataGrid>

Solution 4

I cant guess what you are doing wrong as the most scaled dopwn version of your code is showing horizontal scroll bar to me...

<UserControl.Resources>
    <x:ArrayExtension x:Key="MyArray" Type="{x:Type TextBlock}">
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test1" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>
        <TextBlock Name="Test2" Text="12345678"
                   DataContext="12345678" Tag="12345689"/>            
    </x:ArrayExtension>
</UserControl.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock HorizontalAlignment="Left"
               TextWrapping="Wrap"
               Text="My Text Clock"
               VerticalAlignment="Center" 
               Margin="10,10,0,10" FontSize="18.667"
               FontFamily="Segoe UI" />
    <Border Grid.Row="1" CornerRadius="2" BorderThickness="1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="65"/>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border BorderThickness="1" 
                 CornerRadius="2" Margin="5">
                <Grid Margin="0">
                       <ListBox
                           ItemsSource="{Binding
                                ViewMenuItems}"                            
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left"/>             
    </Grid>
    </Border>
    <Grid Grid.Row="1" Margin="5">
             <StackPanel HorizontalAlignment="Left"
                         Orientation="Horizontal"
                         VerticalAlignment="Top" Margin="10,0,0,0">
                    <ContentControl Focusable="False"
                                    Content="ContentControl"  
                                    Height="16" Margin="0,5,0,0"/>
                     <TextBlock TextWrapping="Wrap"
                                Text="DisplayHerePlz!"
                                Margin="5,3,0,0"
                                VerticalAlignment="Center"/>
              </StackPanel>
     </Grid>
         <Grid Grid.Row="2" Margin="5">
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>
    <tk:DataGrid x:Name="dataGrid"
            SelectionMode="Single"
       AutoGenerateColumns="True"   
               Margin="0,5" Grid.Row="1"
            IsReadOnly="True"   
            ItemsSource="{StaticResource MyArray}"
            ScrollViewer.CanContentScroll="True" 
            ScrollViewer.HorizontalScrollBarVisibility="Auto" 
            ScrollViewer.VerticalScrollBarVisibility="Auto"
       AlternatingRowBackground="#FFF5F4F8" 
            Background="White"
            Grid.ColumnSpan="2">                        
      </tk:DataGrid>
    </Grid>
   </Grid>
  </Border>
</Grid>

Its probably the other bits that I have omitted which could be causing the horizontal width to stretch beyond scroll view...

View more solutions

13,810

Author by

Shakti Prakash Singh

Updated on June 04, 2022

Comments

Shakti Prakash Singh almost 2 years

My DataGrid appears with Data outside the visual scope. I have looked into several similar questions on StackOverflow but none of them seemed to solve my problem. I am not able to figure out as to what am I doing wrong. This is what my xaml looks like:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>        
    <TextBlock HorizontalAlignment="Left" Foreground="{DynamicResource TitleFontColor}" 
     TextWrapping="Wrap" Text="{Binding WindowTitle}" VerticalAlignment="Center" 
     Margin="10,10,0,10" FontSize="18.667" FontFamily="Segoe UI" />
    <Border  Background="{DynamicResource pnlworkarea}" 
      Grid.Row="1" CornerRadius="2" BorderThickness="1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="65"/>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border BorderThickness="1" 
         Background="{DynamicResource Brush_HeaderNew}" 
         BorderBrush="{DynamicResource pnlworkareastroke}" 
         CornerRadius="2" Margin="5">
        <Grid Margin="0">
               <ListBox ItemsSource="{Binding ViewMenuItems}" SelectedItem="{Binding Viewselected}" 
                VerticalAlignment="Center" Style="{DynamicResource Content_Header_ListBoxStyle}" 
        ItemTemplate="{DynamicResource Header_DataTemplate}" 
        ItemContainerStyle="{DynamicResource ContentHeader_ListBoxItemStyle}"               
        ItemsPanel="{DynamicResource Header_ItemsPanelTemplate}" HorizontalAlignment="Left"/>                                   
    </Grid>
    </Border>
    <Grid Grid.Row="1" Margin="5">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Top" Margin="10,0,0,0">
                     <ContentControl Focusable="False" Content="ContentControl"  
        Background="{DynamicResource Brush_VectorIcon}" 
       Template="{DynamicResource vector_Summary}" 
       Height="16" Margin="0,5,0,0"/>
        <TextBlock TextWrapping="Wrap" Text="{Binding SearchDisplayMessage}" Margin="5,3,0,0" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="2" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <DataGrid  x:Name="dataGrid"
                    commands:ControlEvents.GridViewSelectionChangedEventCommand="{Binding SelectionItemsChangeCommand}"
                    SelectionMode="Single"
                    AutoGenerateColumns="True"                      
                    Margin="0,5" Grid.Row="1" IsReadOnly="True"
                    ItemsSource="{Binding GridItem, Mode=TwoWay}"  SelectedItem="{Binding SelectedItem}"
                    AlternatingRowBackground="#FFF5F4F8" Background="White" Grid.ColumnSpan="2"
                    ScrollViewer.CanContentScroll="True" 
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                    ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <i:Interaction.Behaviors>
                        <Behaviors:SelectorDoubleClickCommandBehavior Command="{Binding GridDoubleclickcommand}"/>
                    </i:Interaction.Behaviors>

                </DataGrid>
            </Grid>

        </Grid>

    </Border>

</Grid>

Just to add that the DataGrid here is not the actual DataGrid I am using. My Custom DataGrid is derived from DataGrid. But I have tried this with the normal DataGrid as well but doesn't seem to work either.

Shakti Prakash Singh almost 12 years

Thanks for putting in the effort. Just wanted to know if there was anything obvious that I was missing. I am not able to figure out trying different solutions as to what seems to be the issue.
Shakti Prakash Singh almost 12 years

I did as suggested but the Scrollbar seems to be not appearing even if I set it to Visible. I have even tried to put the DataGrid inside a ScrollViewer but in that case the DataGrid stretches beyond imagination. I don't mind using the DataGrid inside a ScrollViewer if there is a way to limit the width of the columns of the DataGrid allowing each column to stretch to the max value of the data that it contains.
paparazzo almost 12 years

"The" Scrollbar - which? I don't follow. Can you reproduce the problem in small code sample?
Shakti Prakash Singh almost 12 years

I have set the ScrollViewer.HorizontalScrollBarVisibility="Visible". But that doesn't help. I am really short on time. So, as a workaround, I have put the datagrid in a ScrollViewer and on loaded event of the DataGrid, I am resizing the columns based on the content size in each. Now, the issue seems to be that I need to set the MinWidth for each column else they shrink too much if there is little data.
paparazzo almost 12 years

Again reproduce the problem with data and post it.
John Smith almost 7 years

This worked for me (I actually changed it from * to "Auto", though). I believe the scrollbar automatically shows if a field runs off the grid, however if the column is sized to the exact size of the grid, it doesn't technically run off the grid / trigger the scrollbar to show.
escape-llc over 4 years

MinWidth is the key otherwise the grid will try very hard to shrink down columns to avoid scrolling horizontally