How do I set the height (width) of vertically set column headers in a datagrid?

Question

I am using this code for my DataGrid:

<DataGrid
    Grid.Row="1"
    Name="myDataGrid"
    SelectedItem="{Binding chosenReport, Mode=TwoWay}"
    ItemsSource="{Binding Reports, Mode=TwoWay}"
    IsReadOnly="True"
    FontSize="14"
    AutoGenerateColumns="False">

    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="270" />
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.ColumnHeaderStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Field 1. Bla blabla blabla blabla blabla blablablabla blablablabla blabla" Binding="{Binding Path=Field1}" />
        <DataGridTextColumn Header="Field 2. Bla blabla blabla blabla blabla blablablabla blablablabla blabla Bla blabla blabla blabla blabla blablablabla blablablabla blabla" Binding="{Binding Path=Field2}" />
        <DataGridTextColumn Header="Field 3. Bla blabla blabla blabla blabla blablablabla blablablabla blabla tralalaalalalaal" Binding="{Binding Path=Field3}" />
    <DataGrid.Columns/>
<DataGrid/>

Yes, it works and it shows all DataGrid fields vertically. However, since the text in the column headers are quite long, I don't see the data in the datagrid, because it is covered with text from the headers.

How can I tell the DataGrid to make some sort of word wrap to put the text in each column header in several "vertical rows"? Or maybe there is height(width) of the column header?

Answer 1

Use a content template to put the text in a TextBlock with text wrapping, and then limit the width and rotate the whole thing 270 degrees:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid MaxWidth="160">
                        <Grid.LayoutTransform>
                            <RotateTransform Angle="270" />
                        </Grid.LayoutTransform>
                        <TextBlock 
                            TextWrapping="WrapWithOverflow"
                            Text="{Binding}" 
                            />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

---

UPDATE

Add this to the grid if your users have a limited attention span, or if you just don't like them very much:

<Grid.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    From="0"
                    To="270"
                    Duration="0:0:2"
                    DecelerationRatio=".9"
                    Storyboard.TargetProperty="LayoutTransform.Angle"
                    />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>