如何在数据网格中设置垂直设置的列标题的高度(宽度)?

时间:2019-07-24 13:09:23

标签: wpf xaml datagrid

我正在为我的DataGrid使用以下代码:

<DataGrid
    Grid.Row="1"
    Name="myDataGrid"
    SelectedItem="{Binding chosenReport, Mode=TwoWay}"
    ItemsSource="{Binding Reports, Mode=TwoWay}"
    IsReadOnly="True"
    FontSize="14"
    AutoGenerateColumns="False">

    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="270" />
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.ColumnHeaderStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Field 1. Bla blabla blabla blabla blabla blablablabla blablablabla blabla" Binding="{Binding Path=Field1}" />
        <DataGridTextColumn Header="Field 2. Bla blabla blabla blabla blabla blablablabla blablablabla blabla Bla blabla blabla blabla blabla blablablabla blablablabla blabla" Binding="{Binding Path=Field2}" />
        <DataGridTextColumn Header="Field 3. Bla blabla blabla blabla blabla blablablabla blablablabla blabla tralalaalalalaal" Binding="{Binding Path=Field3}" />
    <DataGrid.Columns/>
<DataGrid/>

是的,它可以工作,并且可以垂直显示所有DataGrid字段。但是,由于列标题中的文本很长,所以我看不到数据网格中的数据,因为它被标题中的文本覆盖。

如何告诉DataGrid进行自动换行,以将文本放在每个列标题中的几个“垂直行”中? 还是列标题的高度(宽度)?

1 个答案:

答案 0 :(得分:1)

使用内容模板将文本放入带有文本换行的TextBlock中,然后限制宽度并将整个对象旋转270度:

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid MaxWidth="160">
                        <Grid.LayoutTransform>
                            <RotateTransform Angle="270" />
                        </Grid.LayoutTransform>
                        <TextBlock 
                            TextWrapping="WrapWithOverflow"
                            Text="{Binding}" 
                            />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.ColumnHeaderStyle>

enter image description here


更新

如果您的用户关注范围有限,或者您只是不太喜欢他们,请将其添加到网格中:

<Grid.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    From="0"
                    To="270"
                    Duration="0:0:2"
                    DecelerationRatio=".9"
                    Storyboard.TargetProperty="LayoutTransform.Angle"
                    />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>