We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the orientation of column header text to Vertical?

Platform: UWP |
Control: SfDataGrid |
.NET Framework: 4.5

Orientation of the SfDataGrid column header text can be changed by editing the control template of the GridHeaderCellControl and applying RotateTransform and setting the customized style to the SfDataGrid.HeaderStyle property.

Customized GridHeaderCellControl Style

<Window.Resources>
    <!--Column Header Style as rotate 90 degree. -->
    <Style x:Key="GridHeaderCellControlStyle1" TargetType="{x:Type syncfusion:GridHeaderCellControl}">
        <Setter Property="Background" Value="LightSkyBlue"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="0.5,0.5,0.5,0.5"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Padding" Value="5,3"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type syncfusion:GridHeaderCellControl}">
                    <Grid>
                        <Grid.LayoutTransform>
                            <RotateTransform Angle="90"/>
                        </Grid.LayoutTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="HiddenColumnsResizingStates">
                                <VisualState x:Name="PreviousColumnHidden">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_HeaderCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="3,0,1,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="HiddenState">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_HeaderCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="3,0,3,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="NormalState"/>
                                <VisualState x:Name="LastColumnHidden">
                                    <Storyboard>
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_HeaderCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="0,0,3,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Normal"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="BorderStates">
                                <VisualState x:Name="NormalCell"/>
                                <VisualState x:Name="FooterColumnCell">
                                    <Storyboard BeginTime="0">
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_FooterCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="1,0,1,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="BeforeFooterColumnCell">
                                    <Storyboard BeginTime="0">
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_FooterCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                        <ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_HeaderCellBorder">
                                            <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1"/>
                                        </ThicknessAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_FooterCellBorder" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
                        <Border x:Name="PART_HeaderCellBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <Grid Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Center"/>
                                <Grid x:Name="PART_SortButtonPresenter" Grid.Column="1" SnapsToDevicePixels="True">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*">
                                            <ColumnDefinition.MinWidth>
                                                <Binding Mode="OneWay" Path="SortDirection" RelativeSource="{RelativeSource TemplatedParent}">
                                                    <Binding.Converter>
                                                        <syncfusion:SortDirectionToWidthConverter/>
                                                    </Binding.Converter>
                                                </Binding>
                                            </ColumnDefinition.MinWidth>
                                        </ColumnDefinition>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Path Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z" Fill="Gray" HorizontalAlignment="Center" Height="8.138" Stretch="Fill" SnapsToDevicePixels="True" VerticalAlignment="Center" Width="8.938">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <RotateTransform Angle="90"/>
                                                <ScaleTransform ScaleY="1" ScaleX="1"/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                        <Path.Visibility>
                                            <Binding ConverterParameter="Ascending" Path="SortDirection" RelativeSource="{RelativeSource TemplatedParent}">
                                                <Binding.Converter>
                                                    <syncfusion:SortDirectionToVisibilityConverter/>
                                                </Binding.Converter>
                                            </Binding>
                                        </Path.Visibility>
                                    </Path>
                                    <Path Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z" Fill="Gray" HorizontalAlignment="Center" Height="8.138" Stretch="Fill" SnapsToDevicePixels="True" VerticalAlignment="Center" Width="8.938">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <RotateTransform Angle="90"/>
                                                <ScaleTransform ScaleY="1" ScaleX="1"/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                        <Path.Visibility>
                                            <Binding ConverterParameter="Decending" Path="SortDirection" RelativeSource="{RelativeSource TemplatedParent}">
                                                <Binding.Converter>
                                                    <syncfusion:SortDirectionToVisibilityConverter/>
                                                </Binding.Converter>
                                            </Binding>
                                        </Path.Visibility>
                                    </Path>
                                    <TextBlock Grid.Column="1" Foreground="{TemplateBinding Foreground}" FontSize="10" Margin="0,-4,0,0" SnapsToDevicePixels="True" Text="{TemplateBinding SortNumber}" Visibility="{TemplateBinding SortNumberVisibility}" VerticalAlignment="Center"/>
                                </Grid>
                                <syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton" Grid.Column="2" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" Visibility="{TemplateBinding FilterIconVisiblity}" VerticalAlignment="Stretch"/>
                                <Border x:Name="PART_FilterPopUpPresenter"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

 

The height of the Header row can be changed by setting the HeaderRowHeight property.

<syncfusion:SfDataGrid  x:Name="datagrid"
                        AutoGenerateColumns="False"
                        ItemsSource="{Binding EmployeeDetails}"
                        HeaderRowHeight="100"
                        HeaderStyle="{DynamicResource GridHeaderCellControlStyle1}"
                        ColumnSizer="Auto"> 
</syncfusion:SfDataGrid>

 

In the following screenshot, grid column header text is displayed vertically.

Grid Coluumn header text

Sample Links

 

WPF

WRT

UWP

 

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile