CODEWITHSUNDEEP
wpfdatagridscrollbar
Shakti Prakash Singh
Shakti Prakash Singh

Reputation: 2533

Horizontal Scrollbar not appearing in DataGrid

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.

Upvotes: 2

Views: 14828

Answers (4)

Rahbek
Rahbek

Reputation: 1381

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.

Upvotes: 5

JD-V
JD-V

Reputation: 3686

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>

Upvotes: 2

paparazzo
paparazzo

Reputation: 45106

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>

Upvotes: 2

Vinit Sankhe
Vinit Sankhe

Reputation: 19895

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

Upvotes: 1

Related Questions