WPF DataGrid column wrapping

Question

I have a datagrid with 4 columns. The first three have Width="Auto", whereas the last has Width="*" to fill the remaining space. I do not want a horizontal scrollbar so I have disabled.

Example

When the program is resized to a certain amount of width, the above situation happens (only the text of the last column gets wrapped). This doesn't look that bad yet, but when you reduce the window width even more (in which there isn't any space anymore to render the right column), the column with 'wwwwwwwwwwwwwww...' still doesn't wrap it's text and everything becomes white as the right column keeps wrapping to infinity (no space). Now, I expected this problem to go away by introducing a minimum width to the right most column, but instead it results in that column being rendered (partially or fully) outside of the visible area.

It works somewhat as expected when I do the third column also as Width="*" but this results in crippling the width of the last column significantly (which I don't want). I tried to set it to Width="0.1*" (or anything along these lines) with a minimum width instead, but I get an infinity exception from the datagrid.

This is driving me nuts and I'm not seeing a way out of here to achieve what I want. In short, all I want is the text of the columns to wrap to the available width of the datagrid. The last column should have the width preference.

XAML:

<DataGrid Grid.Row="0" Grid.Column="1" IsEnabled="{Binding HasValidSelectedItem}" ItemsSource="{Binding Items, IsAsync=True}" AutoGenerateColumns="False" 
                                        SnapsToDevicePixels="True" EnableColumnVirtualization="False" HorizontalAlignment="Stretch" CanUserAddRows="False" CanUserDeleteRows="False" 
                                        CanUserResizeRows="False" HorizontalScrollBarVisibility="Disabled" >
    <DataGrid.Resources>
        <Style TargetType="CheckBox" BasedOn="{StaticResource CenteredCheckBoxStyle}" x:Key="CenteredReadOnlyCheckBoxStyle">
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="Focusable" Value="False"/>
        </Style>
    </DataGrid.Resources>                
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Header="Test First" 
             Binding="{Binding First, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" ElementStyle="{StaticResource CenteredReadOnlyCheckBoxStyle}"
             EditingElementStyle="{StaticResource CenteredReadOnlyCheckBoxStyle}" >                        
        </DataGridCheckBoxColumn>
        <DataGridCheckBoxColumn Header="Test Second" 
             Binding="{Binding Second, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" ElementStyle="{StaticResource CenteredReadOnlyCheckBoxStyle}"
             EditingElementStyle="{StaticResource CenteredReadOnlyCheckBoxStyle}" />
        <DataGridTextColumn Header="Test Third" Binding="{Binding Third}"
             EditingElementStyle="{StaticResource DataGridEditingTextBoxStyle}" CellStyle="{StaticResource DataGridToolTipDataGridCellStyle}">
            <DataGridTextColumn.ElementStyle>
                <Style BasedOn="{StaticResource DataGridTextBlockStyle}" TargetType="{x:Type TextBlock}">
                    <Setter Property="TextWrapping" Value="Wrap"/>
                    <Setter Property="Padding" Value="0,6"/>
                </Style>
            </DataGridTextColumn.ElementStyle>
        </DataGridTextColumn>
        <DataGridTextColumn Header="Test Fourth" Width="*" IsReadOnly="True" Binding="{Binding Path=Fourth}" 
             EditingElementStyle="{StaticResource DataGridEditingTextBoxStyle}" CellStyle="{StaticResource DataGridToolTipDataGridCellStyle}">
            <DataGridTextColumn.ElementStyle>
                <Style BasedOn="{StaticResource DataGridTextBlockStyle}" TargetType="{x:Type TextBlock}">
                    <Setter Property="TextWrapping" Value="Wrap"/>
                    <Setter Property="Padding" Value="0,6"/>
                </Style>
            </DataGridTextColumn.ElementStyle>
        </DataGridTextColumn>

    </DataGrid.Columns>
</DataGrid>

Wyatt Earp Wyatt Earp · Accepted Answer · 2015-05-21T18:01:04

If you don't want a horizontal scrollbar, and it sounds like you want the third and fourth columns to autosize (and wrap if necessary), then don't use Width="Auto". It seems to me that you would want a fixed column width for the first two (something like Width="100", then for the third and fourth columns use something like Width="40*" and Width="60*"respectively. (Or set them to whatever ratio you want) In addition, you could set a MinWidth and/or a MaxWidth to control the expansion of the columns.

To enable the wrapping, you'll just need to add an ElementStyle to the DataGridTextColumn.

<DataGrid>
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Header="Check1" Binding="{Binding Check1}" Width="100" />
        <DataGridCheckBoxColumn Header="Check2" Binding="{Binding Check2}" Width="100" />
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="40*" MaxWidth="200">
            <DataGridTextColumn.ElementStyle>
                <Style>
                    <Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
                </Style>
            </DataGridTextColumn.ElementStyle>
        </DataGridTextColumn>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="60*" MinWidth="200">
            <DataGridTextColumn.ElementStyle>
                <Style>
                    <Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>                     
                </Style>
            </DataGridTextColumn.ElementStyle>
        </DataGridTextColumn>
    </DataGrid.Columns>
</DataGrid>

WPF DataGrid column wrapping

1 Answers