时间戳

首页 > 解决方案 > 如何设置数据网格中垂直设置的列标题的高度（宽度）？

wpf - 如何设置数据网格中垂直设置的列标题的高度（宽度）？

问题描述

我正在为我的 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 进行某种自动换行以将每个列标题中的文本放在几个“垂直行”中？或者也许有列标题的高度（宽度）？

标签： wpfxamldatagrid

解决方案

使用内容模板将文本放在带有文本环绕的 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>

在此处输入图像描述

更新

如果您的用户的注意力有限，或者您只是不太喜欢他们，请将其添加到网格中：

<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>

推荐阅读