How to display ellipse and/or scroll bar in DataGridTextColumn Header when column shrinks?

Question

I am trying to figure out how to force my column header to display an ellipse and/or scroll bar when the column shrinks. I know that the data inside of the textblock (column) can shrink to an ellipse but I can't figure out how to make the header do the same. I am defining my data grid in the following way (this is an example of the text columns):

<DataGrid  Height="150" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Dataset Description" Width="370">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="{x:Type DataGridCell}">
                        <Setter Property="ToolTip" Value="Name of database"/>                           
                    </Style>
                </DataGridTextColumn.CellStyle>
          </DataGridTextColumn>

In this example, I'd like to see something like "Dataset ..." or "Dataset" with an accompanying scroll bar when the user shrinks the "Dataset Description" column.

I tried adding something like this inside of the DataGridTextColumn but it doesn't produce any result/response:

<DataGridTextColumn.HeaderStyle>
      <Style TargetType="{x:Type DataGridColumnHeader}">
          <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Visible"/>
      </Style>
 </DataGridTextColumn.HeaderStyle>

I suppose I could implement a listener to see when the columns are resized and to re-set the header values but I'd obviously like to avoid that. Any ideas are welcome!

score 0 · Answer 1 · answered Feb 15 '19 at 23:29

You could do something like the following, implementing a DataGrid.ColumnHeaderStyle.

<DataGrid Height="150" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextTrimming="CharacterEllipsis" Text="{Binding}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Dataset Description" Width="370">
            <DataGridTextColumn.CellStyle>
                <Style TargetType="{x:Type DataGridCell}">
                    <Setter Property="ToolTip" Value="Name of database"/>
                </Style>
            </DataGridTextColumn.CellStyle>
        </DataGridTextColumn>
    </DataGrid.Columns>
</DataGrid>

How to display ellipse and/or scroll bar in DataGridTextColumn Header when column shrinks?

1 Answers1