จัดแต่งทรงผมส่วนหัว GridView ด้วยความสูงและข้อความที่หมุน

ฉันได้สร้าง gridview ที่แสดงดังต่อไปนี้:

enter image description hereสิ่งที่ฉันต้องการทำคือยืดความสูงของส่วนหัวตามต้องการเพื่อให้พอดีกับข้อความที่หมุน ฉันจะทำสิ่งนี้ได้อย่างไร? บางอย่างเช่นการจำลองด้านล่าง (หมายเหตุ: เห็นได้ชัดว่าข้อความที่หมุนจะไม่ถูกตัดทอน)

ป้อนคำอธิบายรูปภาพที่นี่

เช่นเดียวกับในการจำลองครั้งที่สอง ฉันต้องการให้ข้อความที่หมุนอยู่ใกล้กันมากขึ้นอีกเล็กน้อย เมื่อเปรียบเทียบกับภาพแรกซึ่งดูเหมือนว่าจะมีระยะห่างระหว่างแต่ละชุดตามความกว้างของบล็อกข้อความ อะไรคือวิธีที่ดีที่สุดในการทำให้พวกเขาใกล้ชิดยิ่งขึ้น?

นี่คือ 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>

person Hank    schedule 31.05.2013    source แหล่งที่มา


คำตอบ (1)


ใช้ LayoutTransform แทน RenderTransform นั่นจะช่วยแก้ปัญหาของคุณได้

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