Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Wpf datagrid always show scrollbar and fill up the space

How can I make a DataGrid to fill up the space and show the vertical scrollbar, even if it has only 10 Rows?

This is the current code:

<UserControl xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"  x:Class="myclass.uccontrol"
             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" 
             Focusable="True"
             d:DesignHeight="10000" d:DesignWidth="1049">

    <UserControl.Resources>          
    </UserControl.Resources>

    <Grid VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />               
        </Grid.ColumnDefinitions>

        <DockPanel >
            <DataGrid Name="dataGrid"
                      AutoGenerateColumns="False"
                      ScrollViewer.CanContentScroll="True" 
                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"  
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">

                <DataGrid.Columns>    
                    <DataGridTextColumn Header = " Name" Binding = "{Binding Name, Mode=OneWay}" SortMemberPath="Name" />
                    <DataGridTextColumn Width="*" Header = " Date" Binding = "{Binding Date, StringFormat=\{0:d\}, Mode=OneWay}" SortMemberPath="DocumentDate" />    
                </DataGrid.Columns>
            </DataGrid>
        </DockPanel>         
    </Grid>
</UserControl>

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

>Solution :

The <Grid VerticalAlignment="Top"> declaration make the parent grid to try to take as little as possible vertical space. Remove the VerticalAlignment="Top" declaration.

To display the vertical scroll bar use VerticalScrollBarVisibility="Visible" and remove the ScrollViewer.* properties.

By the way, in the provided code:

  • the DockPanel is useless.
  • the Grid is useless. But I will keep it, maybe there is something else, and it’s related to the question.
  • HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" are useless (Stretch is the default value).
  • You can collapse some empty tags.

The code should like this:

<UserControl x:Class="myclass.uccontrol"
             xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
             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" 
             Focusable="True"
             d:DesignHeight="10000" d:DesignWidth="1049">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />               
        </Grid.ColumnDefinitions>

        <DataGrid Name="dataGrid"
                  AutoGenerateColumns="False"                  
                  VerticalScrollBarVisibility="Visible">

            <DataGrid.Columns>    
                <DataGridTextColumn Header=" Name" Binding="{Binding Name, Mode=OneWay}" SortMemberPath="Name" />
                <DataGridTextColumn Width="*" Header = " Date" Binding="{Binding Date, StringFormat=\{0:d\}, Mode=OneWay}" SortMemberPath="DocumentDate" />    
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

Notes: The bottom part of the data grid will be gray, you can change this with the Background property. If you want empty lines, try this.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading