WPF MVVM DataGrid内容不适合行高变化

时间:2019-03-26 17:13:25

标签: c# wpf datagrid

我需要使行高可变,以便允许某些行添加其他信息。设置RowHeight的值似乎没有什么区别。由于所有内容都已绑定(MVVM),因此无法设置DataGridTextColumn高度的高度值。

            <Border Grid.Row="1" 
      Grid.Column="1"              
      HorizontalAlignment="Right" Margin="9" Width="auto" Visibility="{Binding LogVisibility}" VerticalAlignment="Stretch">
        <DataGrid AutoGenerateColumns="False" VerticalContentAlignment="Center" ItemsSource="{Binding EventLog}" RowHeight="100" Background="White" CellStyle="{StaticResource cellStyle}" ColumnHeaderStyle="{StaticResource headerStyle}" CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Type" SortMemberPath="CategoryDescription">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" MaxHeight="15" MaxWidth="15" VerticalAlignment="Center"/>
                                <TextBlock Text=" "/>
                                <TextBlock Text="{Binding CategoryDescription}" TextWrapping="Wrap"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <!--<DataGridTextColumn Header="Type" Binding="{Binding CategoryDescription}"></DataGridTextColumn>-->
                <DataGridTextColumn Header="Date" Binding="{Binding Date}"/>
                <DataGridTextColumn Header="Details" Binding="{Binding TypeDescription}" MaxWidth="400"/>
            </DataGrid.Columns>
        </DataGrid>
    </Border>

设置RowHeight="{x:Static sys:Double.NaN}"的值不会改变任何内容,而是看到截断的文本,如下所示: enter image description here

如果我将任意固定高度设置为RowHeight="100"(尽管不理想),则 content 行也不会展开,并且显示难看的轮廓: enter image description here

我添加了垂直滚动,但是我不需要水平滚动,因此我希望具有可变的高度,以便较长的文本可以环绕并适合我,该如何实现?

更新(解决方案)-感谢Nomad developer

我的XAML顶部有一个冒犯者样式,适用于所有单元,并限制了它们的扩展:

<Style TargetType="DataGridCell" x:Key="cellStyle"  >
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" Margin="5,5,5,5" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0" />
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
    </Style>

我现在已经删除了此样式,最终的Datagrid是(使用<DataGridTextColumn.ElementStyle>):

<DataGrid AutoGenerateColumns="False" 
                  VerticalContentAlignment="Center" 
                  ItemsSource="{Binding EventLog}" 
                  MinRowHeight="30" 
                  Background="White" 

                  ColumnHeaderStyle="{StaticResource headerStyle}" 
                  CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Type" SortMemberPath="CategoryDescription">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" MaxHeight="15" MaxWidth="15" VerticalAlignment="Center" Margin="5,0,5,0"/>
                                <TextBlock Text="{Binding CategoryDescription}" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0,0,5,0"/>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="Date" Binding="{Binding Date}">
                    <DataGridTextColumn.ElementStyle>
                        <Style>
                            <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
                            <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
                            <Setter Property="TextBlock.Margin" Value="5"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="Details" Binding="{Binding TypeDescription}" MaxWidth="400">
                    <DataGridTextColumn.ElementStyle>
                        <Style>
                            <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
                            <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            <Setter Property="TextBlock.VerticalAlignment" Value="Center"/>
                            <Setter Property="TextBlock.Margin" Value="5"/>
                        </Style>
                    </DataGridTextColumn.ElementStyle>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>

这帮助我实现了这一目标:

enter image description here

1 个答案:

答案 0 :(得分:0)

是的,如果为DataGridTextColumn添加带有文本块换行的自定义样式

<DataGridTextColumn.ElementStyle>
   <Style>
       <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
   </Style>
</DataGridTextColumn.ElementStyle>

您所需要的只是将TextWrapping添加为 Wrap WrapWithOverflow 。您可以查看差异here。 另外,要使其正常工作,您需要删除您的行高度,或者您可以从

进行更改
RowHeight="100"

MinRowHeight="100"

它确保您的行高至少为100,并且如果文本不适合-可以为该特定行增加尺寸,但是使用原始rowheight不能更改大小,并且所有行的高度都固定为100。顺便说一句,似乎100太高了,可能是20欧元整洁。

尝试一下此代码,我还添加了TextAlignment来对齐,以防万一您觉得有用。

        <Border Grid.Row="1"
                Grid.Column="1"
                Width="auto"
                Margin="9"
                HorizontalAlignment="Right"
                VerticalAlignment="Stretch"
                Visibility="{Binding LogVisibility}">
            <DataGrid VerticalContentAlignment="Center"
                      AutoGenerateColumns="False"
                      Background="White"
                      CanUserAddRows="False"
                      CellStyle="{StaticResource cellStyle}"
                      ColumnHeaderStyle="{StaticResource headerStyle}"
                      ItemsSource="{Binding EventLog}"
                      MinRowHeight="20">
                <DataGrid.Columns>
                    <DataGridTemplateColumn Header="Type"
                                            SortMemberPath="CategoryDescription">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image MaxWidth="15"
                                           MaxHeight="15"
                                           VerticalAlignment="Center"
                                           Source="{Binding Image}" />
                                    <TextBlock Text=" " />
                                    <TextBlock Text="{Binding CategoryDescription}"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <!--<DataGridTextColumn Header="Type" Binding="{Binding CategoryDescription}"></DataGridTextColumn>-->
                    <DataGridTextColumn Binding="{Binding Date}"
                                        Header="Date" />
                    <DataGridTextColumn MaxWidth="400"
                                        Binding="{Binding TypeDescription}"
                                        Header="Details">
                        <DataGridTextColumn.ElementStyle>
                            <Style>
                                <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                                <Setter Property="TextBlock.TextAlignment" Value="Justify" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Border>