WPF MVVM DataGrid contents don't fit to row height change

Question

I need to make my row height variable so that I can allow for some rows to add additional information. Setting the RowHeight value doesn't seem to make any difference. There is no value to set for height at the level of DataGridTextColumn as all the contents are bound (MVVM).

            <Border Grid.Row="1" 
      Grid.Column="1"              
      HorizontalAlignment="Right" Margin="9" Width="auto" Visibility="{Binding LogVisibility}" VerticalAlignment="Stretch">
        <DataGrid AutoGenerateColumns="False" VerticalContentAlignment="Center" ItemsSource="{Binding EventLog}" RowHeight="100" Background="White" CellStyle="{StaticResource cellStyle}" ColumnHeaderStyle="{StaticResource headerStyle}" CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Type" SortMemberPath="CategoryDescription">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" MaxHeight="15" MaxWidth="15" VerticalAlignment="Center"/>
                                <TextBlock Text=" "/>
                                <TextBlock Text="{Binding CategoryDescription}" TextWrapping="Wrap"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <!--<DataGridTextColumn Header="Type" Binding="{Binding CategoryDescription}"></DataGridTextColumn>-->
                <DataGridTextColumn Header="Date" Binding="{Binding Date}"/>
                <DataGridTextColumn Header="Details" Binding="{Binding TypeDescription}" MaxWidth="400"/>
            </DataGrid.Columns>
        </DataGrid>
    </Border>

Having set the value of RowHeight="{x:Static sys:Double.NaN}" doesn't change anything and instead I see truncated text as seen here:

If I set an arbitrary fixed height of RowHeight="100" (although not ideal), the rows content doesnt expand either, and show an ugly outline:

I added vertical scrolling, but I don't need horizontal scrolling, so I was hoping to have variable height so that longer text would wrap and fit, how can I achieve this?

Update (solution) - Thanks to Nomad developer

There was an offender style at the top of my XAML that applied to all the cells and was restricting them from expanding:

<Style TargetType="DataGridCell" x:Key="cellStyle"  >
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" Margin="5,5,5,5" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0" />
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>

I have removed this style now, and the final Datagrid is (using <DataGridTextColumn.ElementStyle>):

<DataGrid AutoGenerateColumns="False" 
                  VerticalContentAlignment="Center" 
                  ItemsSource="{Binding EventLog}" 
                  MinRowHeight="30" 
                  Background="White" 

                  ColumnHeaderStyle="{StaticResource headerStyle}" 
                  CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Type" SortMemberPath="CategoryDescription">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" MaxHeight="15" MaxWidth="15" VerticalAlignment="Center" Margin="5,0,5,0"/>
                                <TextBlock Text="{Binding CategoryDescription}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0,0,5,0"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="Date" Binding="{Binding Date}">
                    <DataGridTextColumn.ElementStyle>
                        <Style>
                            <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
                            <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
                            <Setter Property="TextBlock.Margin" Value="5"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Details" Binding="{Binding TypeDescription}" MaxWidth="400">
                    <DataGridTextColumn.ElementStyle>
                        <Style>
                            <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
                            <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
                            <Setter Property="TextBlock.Margin" Value="5"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>

Which helped me achieve this:

Rather than a stackpanel, use a grid with 3 columns defined. — Kevin Cook, Mar 26 '19 at 19:45

Nomad Developer · Accepted Answer · 2019-03-27T01:59:47.610

Yes that's possible if you add custom style with textblock wrapping for your DataGridTextColumn

<DataGridTextColumn.ElementStyle>
   <Style>
       <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
   </Style>
</DataGridTextColumn.ElementStyle>

All you need is add TextWrapping as Wrap or WrapWithOverflow You can check out the difference here. Also to make it work, you need to remove your RowHeight or you can change it from

RowHeight="100"

to

MinRowHeight="100"

It ensures that your rows height will at least be 100, and if text doesnt fit - can go longer in size for that specific row, but with original rowheight it cant change size and has fixed 100 height for all rows. Btw, 100 seems to be too high, may be 20-ish would be neat.

Give a try to this code, I also added TextAlignment to Justify just in case you might find it useful.

        <Border Grid.Row="1"
                Grid.Column="1"
                Width="auto"
                Margin="9"
                HorizontalAlignment="Right"
                VerticalAlignment="Stretch"
                Visibility="{Binding LogVisibility}">
            <DataGrid VerticalContentAlignment="Center"
                      AutoGenerateColumns="False"
                      Background="White"
                      CanUserAddRows="False"
                      CellStyle="{StaticResource cellStyle}"
                      ColumnHeaderStyle="{StaticResource headerStyle}"
                      ItemsSource="{Binding EventLog}"
                      MinRowHeight="20">
                <DataGrid.Columns>
                    <DataGridTemplateColumn Header="Type"
                                            SortMemberPath="CategoryDescription">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image MaxWidth="15"
                                           MaxHeight="15"
                                           VerticalAlignment="Center"
                                           Source="{Binding Image}" />
                                    <TextBlock Text=" " />
                                    <TextBlock Text="{Binding CategoryDescription}"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <!--<DataGridTextColumn Header="Type" Binding="{Binding CategoryDescription}"></DataGridTextColumn>-->
                    <DataGridTextColumn Binding="{Binding Date}"
                                        Header="Date" />
                    <DataGridTextColumn MaxWidth="400"
                                        Binding="{Binding TypeDescription}"
                                        Header="Details">
                        <DataGridTextColumn.ElementStyle>
                            <Style>
                                <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                                <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Border>

WPF MVVM DataGrid contents don't fit to row height change

Update (solution) - Thanks to Nomad developer

1 Answers1