[Solved] How do I create a vertical column header that supports wrapping and resizing

[Jerry Kurata]

Hi,

I need to have vertical headers in some of my columns.  I have found some examples that use a transform to rotate the text, but they all seem to have  the following issues:

1. Staying centered. As the user changes the width of columns the header needs to stay in the center.
2. Text disappearing when it is too long and needs to be wrapped.

Here is a grid showing the issues.  While one can solve some of the issue with margins on the textbox this not dynamic and thus cannot be used for production.

<Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGridView HorizontalAlignment="Left" Margin="43,40,0,0" Name="radGridView1" VerticalAlignment="Top" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewColumn>
                    <telerik:GridViewColumn.Header>
                        <Border Height="90" Margin="1,0,-151,0" >
                            <TextBlock  Text="long column header that will wrap" HorizontalAlignment="Left"
                                        FontSize="11" FontWeight="Normal" Height="auto" Width="90"
                                        TextAlignment="Center"  VerticalAlignment="Bottom"
                                        UseLayoutRounding="True" TextWrapping="Wrap" TextTrimming="None" Margin="9,0,0,0">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="270" />
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Border>
                    </telerik:GridViewColumn.Header>
                </telerik:GridViewColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

[Ivan Ivanov]

Hello Jerry Kurata,

I have prepared a sample project for you. One of the main differences in my approach is fixing the TextBlock's measures and defining some kind of view port for the content. In this way you could prevent the TextBlock from moving vertically when you resize the header cell. If you need a larger "view port" you should tune the margins a bit.

Best wishes,
Ivan Ivanov
the Telerik team