WPF Datagrid Row Height To Match Datagrid Height Without Scroll

Question

I have a user control that have a Datagrid with customized DataTemplate as below :-

<UserControl x:Class="POCSurveySystem.UI.Windows.QuestionListing"
         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" >
<UserControl.Resources>
    <Style x:Key="RadioButtonItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Margin" Value="0,0,5,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border BorderThickness="0" Background="Transparent">
                        <!-- Note: IsChecked is bound to IsSelected-->
                        <RadioButton 
                    Focusable="False" 
                    IsHitTestVisible="False" 
                    IsChecked="{TemplateBinding IsSelected}">
                            <ContentPresenter />
                        </RadioButton>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ItemsPanelTemplate x:Key="HorizontalItemsPanel">
        <VirtualizingStackPanel 
    Orientation="Horizontal" />
    </ItemsPanelTemplate>
</UserControl.Resources>
<Grid Background="AliceBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="23" />
    </Grid.RowDefinitions>

    <StackPanel Orientation="Horizontal" Grid.Row="1">
        <Label Name="GroupQuestionHeader" FontSize="14" FontWeight="Bold" FontFamily="Times New Roman" HorizontalAlignment="Left" />
        <Label Name="PageCount" FontSize="10" FontFamily="Times New Roman" HorizontalAlignment="Right"></Label>
    </StackPanel>


    <DockPanel Grid.Row="2" VerticalAlignment="Stretch">
        <DataGrid VerticalScrollBarVisibility="Disabled" VerticalAlignment="Stretch" AutoGenerateColumns="False" HorizontalAlignment="Left" Name="dataGridQuestion" CanUserReorderColumns="False" CanUserSortColumns="False" CanUserResizeColumns="False" CanUserAddRows="False" GridLinesVisibility="All" HorizontalGridLinesBrush="#FFDEDEDE" Height="400" MaxHeight="400">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <!--<Setter Property="Padding" Value="5" />-->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type DataGridCell}">
                                <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Foreground" Value="Black" />
                            <Setter Property="BorderBrush" Value="{x:Null}" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.CellStyle>

            <DataGrid.Columns>

                <DataGridTemplateColumn Header="Question" Width="2*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock TextWrapping="Wrap" Text="{Binding QuestionContent, Mode=OneWay}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="We fully Comply | We partly Comply | We do not Comply" Width="1*">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <!--<ListBox 
                            BorderThickness="0" 
                            SelectedValue="{Binding MyDataListSelectedValue}" 
                            ItemContainerStyle="{StaticResource RadioButtonItemStyle}" 
                            ItemsPanel="{StaticResource HorizontalItemsPanel}" Name="OptionsRadioButtonGroup" HorizontalContentAlignment="Left"
                                Cursor="Hand" HorizontalAlignment="Left">
                                <ListBoxItem Width="90" Name="AGR"/>
                                <ListBoxItem Width="90" Name="PGR"/>
                                <ListBoxItem Name="DNR"/>
                            </ListBox>-->
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </DockPanel>
    <StackPanel Orientation="Horizontal" Grid.Row="3">
        <Button Content="Next Page" Height="23" HorizontalAlignment="Left" Name="btnNext" VerticalAlignment="Top" Width="75" Click="btnNext_Click"  Margin="5,0,0,0" />
        <Button Content="Submit" Height="23" HorizontalAlignment="Left" Margin="86,0,0,0" Name="btnSubmit" VerticalAlignment="Top" Width="75" Visibility="Hidden" Click="btnSubmit_Click" />
    </StackPanel>

</Grid>

However, the datagridview does not shrink / stretch as per the rows of data grow. I have tried to hardcode dataGridQuestion.MinRowHeight = 100 however that is not what I looking for as the Textblock in the datagrid column may varied.

Question : How to avoid the grey area which was shown in the pic as below after the last row of the datagrid row? I tested using dataGridQuestion.MinRowHeight = dataGridQuestion.Height / DataEntityList.Count but it still there..

How to make Datagrid to shrink and expand as rows of data bound decrease / increase?

Answer 1

You need to change your row definitions

        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="30"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="23" />
        </Grid.RowDefinitions>

This will fit datagrid to content and it won't show extra space.

Then if you want to make your rows larger just set MinRowHeight="200" in DataGrid.

Alternatively,

consider using ItemsControl instead of DataGrid as you have more control over it.