使用高度和旋转文本设置GridView标题样式

Question

我创建了一个gridview，显示如下：

我想要做的是根据需要调整标题高度以适应旋转的文本，我该怎么做？类似下面的模型（注意：显然旋转的文本不会被截断）

同样在第二个模型中，我希望将旋转的文本放在一起。当您与第一个图像进行比较时，第一个图像似乎具有每个设置之间的距离与文本块的宽度。让他们更接近的最佳方法是什么？

这是我的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>

Answer 1

使用LayoutTransform而不是RenderTransform。这将解决您的问题。

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