CODEWITHSUNDEEP
wpfxamlgridview
Hank
Hank

Reputation: 2626

Styling GridView header with height and rotated text

I have created a gridview that displays as shown below:

enter image description here What I would like to do is have the header height stretch as needed to fit the rotated text, how can I do this? Something like the below mockup (Note: obviously the rotated text won't be truncated)

enter image description here

Also as in the second mockup, I would like to have the rotated text a bit closer together. When you compare with the first image which seems to have the distance between each set by the width of the textblock. What is the best approach to get them closer?

Here is my XAML:

<UserControl.Resources>
    <DataTemplate x:Key="headerTemplate">
        <TextBlock HorizontalAlignment="Left" Text="{Binding}"/>
    </DataTemplate>
    <Style x:Key="GridHeaderStyle" TargetType="DataGridColumnHeader">
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    </Style>

    <Style x:Key="ColumnHeaderStyle" TargetType="GridViewColumnHeader">
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
    </Style>
    <Style x:Key="rotatedText" TargetType="TextBlock">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="-45" />
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<GridView>
    <GridViewColumn Header="Name" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Name}"/>
    <GridViewColumn Header="Job Title" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Job_Title}" />
    <GridViewColumn Header="Department" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Department}" />
    <GridViewColumn Header="Company" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Company}" />

    <GridViewColumn DisplayMemberBinding="{Binding Path=Company}">
        <GridViewColumn.Header>
            <StackPanel Orientation="Vertical">
                <TextBlock HorizontalAlignment="Center">Modules</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource rotatedText}" >Customer Services</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Asset Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Works Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Project Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Rates Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Finance</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Human Resources</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Document Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >User Management</TextBlock>
                    <TextBlock Style="{StaticResource rotatedText}" >Configuration</TextBlock>
                </StackPanel>
            </StackPanel>
        </GridViewColumn.Header>
    </GridViewColumn>
</GridView>

Upvotes: 1

Views: 1593

Answers (1)

Jawahar
Jawahar

Reputation: 4885

Use LayoutTransform instead of RenderTransform. That will solve your problem.

    <Style x:Key="rotatedText" TargetType="TextBlock">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <RotateTransform Angle="-45" />
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 1

Related Questions