CODEWITHSUNDEEP
c#wpfdatagrid
Robin
Robin

Reputation: 1587

Rotate text in datagrid column header

So I'm trying to rotate text in a datagrid, to don't take that much space horizontal, but make it vertical. How should I do this? I have the following code:

<DataGrid x:Name="list_results" IsReadOnly="True" Grid.Row="1" ColumnHeaderStyle="{StaticResource HeaderStyle}" ColumnWidth="Auto" RowBackground="Transparent" Foreground="#fafafa" AlternatingRowBackground="#555a62" Background="Transparent" BorderThickness="0" AutoGenerateColumns="False" RowHeaderWidth="0" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto">
    <DataGrid.Columns>
        <DataGridTextColumn x:Name="pos" Header="Pos" />
        <DataGridTextColumn x:Name="Nr" Header="Nr" Binding="{Binding team_number}" />
        <DataGridTextColumn x:Name="pilot" Header="Naam piloot" Binding="{Binding team_data.pilot.firstname}" />
        <DataGridTextColumn x:Name="pilot_club" Header="Club" Binding="{Binding team_data.pilot.club}" />
        <DataGridTextColumn x:Name="pilot_license" Header="Licentie" Binding="{Binding team_data.pilot.license}" />
        <DataGridTextColumn x:Name="navigator" Header="Naam copiloot" Binding="{Binding team_data.navigator.firstname}" />
        <DataGridTextColumn x:Name="navigator_club" Header="Club" Binding="{Binding team_data.navigator.club}" />
        <DataGridTextColumn x:Name="navigator_license" Header="Licentie" Binding="{Binding team_data.navigator.license}" />
        <DataGridTextColumn x:Name="part_1_tot_gtk" Header="Totaal GTK's" Binding="{Binding team_data.navigator.license}" />
    </DataGrid.Columns>
</DataGrid>

and I would want to rotate part_1_tot_gtk form horizontal to vertical. Which would give the following;

datagrid

Upvotes: 0

Views: 2057

Answers (1)

Il Vic
Il Vic

Reputation: 5666

You can create a specific style in your Window's Resources:

<Style x:Key="ColumnHeaderRotateStyle" TargetType="DataGridColumnHeader">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock TextWrapping="Wrap" Text="{Binding}">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="270" />
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>

Then use it with columns that you want to rotate:

<DataGrid AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="Column 1" Width="*" HeaderStyle="{StaticResource ColumnHeaderRotateStyle}" />
        <DataGridTextColumn Header="Column 2" Width="*" />
        <DataGridTextColumn Header="Column 3" Width="*" />
    </DataGrid.Columns>
</DataGrid>

I hope it can help you

Upvotes: 2

Related Questions