CODEWITHSUNDEEP
silverlightdatagrid
Mitc
Mitc

Reputation: 81

DataGrid column header text wrapping in silverlight

I am using a DataGrid in my silverlight project and I want one column to wrap it's header text. I know using a style for the header might be the answer but I want to know if there is a wrap property for a datagrid column header?

Here is my code:

<data:DataGrid x:Name="gridViewResources" 
                                AutoGenerateColumns="False"                                         
                                HorizontalAlignment="Stretch" 
                                VerticalAlignment="Stretch" 
                                ItemsSource="{Binding OpportunityResourceDetailList, Mode=TwoWay}" IsReadOnly="True">
                            <data:DataGrid.Columns>
                                <data:DataGridTemplateColumn Header="#" Width="Auto">
                                    <data:DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding PositionLevel.FullPositionAndLevelName}" />
                                        </DataTemplate>
                                    </data:DataGridTemplateColumn.CellTemplate>
                                </data:DataGridTemplateColumn>

Thanks!

Upvotes: 0

Views: 5256

Answers (3)

nakisa
nakisa

Reputation: 11

here is my code

<DataGrid.ColumnHeaderStyle>
            <Style TargetType="ContentControl">
                <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
                <Setter Property="ContentTemplate" >
                    <Setter.Value >
                        <DataTemplate>
                            <TextBlock Text="{Binding}" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" LineHeight="20"></TextBlock></DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
`enter code here`</DataGrid.ColumnHeaderStyle>

Upvotes: 0

Martin Hollingsworth
Martin Hollingsworth

Reputation: 7339

There is no specific property on a DataGridColumn to support this but once you have created the right style it is just as easy - simply set the HeaderStyle property for the specific column.

Create a Style resource with a TargetType of DataGridColumnHeader and set the ContentTemplate property to be a DataTemplate containing a TextBlock with the TextWrapping property set to Wrap. I've enclosed the TextBlock within a Grid panel to keep this closer to the default DataTemplate used by the ContentPresenter. Apply this style to a specific column using the HeaderStyle property or to the whole DataGrid using the ColumnHeaderStyle property.

Note that you will need to constrain the width of the Column to something less than the header text for the wrapping to take affect unless you specifically restrict the width of the TextBlock in the DataTemplate.

<Style x:Key="CustomDataGridColumnHeaderStyle" TargetType="sdk:DataGridColumnHeader" BasedOn="{StaticResource DefaultDataGridColumnHeaderStyle}">
  <Setter Property="ContentTemplate">
    <Setter.Value>
      <DataTemplate>
        <Grid>
          <TextBlock Text="{Binding}" TextWrapping="Wrap" />
        </Grid>
      </DataTemplate>
    </Setter.Value>
  </Setter>
</Style>

...

<sdk:DataGrid >
  <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn Header="Header Name" Binding="{Binding Xxx}" Width="80" HeaderStyle="{StaticResource CustomDataGridColumnHeaderStyle}"/>
  </sdk:DataGrid.Columns>
</sdk:DataGrid>

Upvotes: 0

Luke Woodward
Luke Woodward

Reputation: 65054

I haven't found a way to get Silverlight to automatically wrap the header (in much the same way as the TextWrapping property of a TextBlock does). I suspect that it's not possible due to a limitation of the DataGridColumn.Header property:

Use discretion when using objects as header content; not all Silverlight objects are suitable for use within the limited presentation surface that appears for headers.

However, you can 'manually' wrap header text. If you put a newline in the header text, the header text will be broken over two lines at that point. (In XAML, you use the character entity &#10;.) For example, the following header text appears split over three lines:

<sdk:DataGridTextColumn Header="ABCD&#10;EFGH&#10;IJKL" />

Upvotes: 8

Related Questions