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

【问题标题】：WPF MVVM DataGrid contents don't fit to row height changeWPF MVVM DataGrid 内容不适合行高变化
【发布时间】：2019-03-26 17:13:24
【问题描述】：

我需要使我的行高可变，以便我可以允许某些行添加额外的信息。设置RowHeight 值似乎没有任何区别。在DataGridTextColumn 级别没有设置高度值，因为所有内容都已绑定 (MVVM)。

            <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}" 的值并没有改变任何东西，而是看到截断的文本，如下所示：

如果我设置一个任意的固定高度RowHeight="100"（虽然不理想），行 content 也不会扩展，并显示一个丑陋的轮廓：

我添加了垂直滚动，但我不需要水平滚动，所以我希望有可变高度，以便更长的文本可以换行和适合，我该如何实现？

更新（解决方案） - 感谢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>

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

【问题讨论】：

使用定义了 3 列的网格，而不是堆栈面板。

标签： c# wpf datagrid

【解决方案1】：

是的，如果您为 DataGridTextColumn 添加带有文本块包装的自定义样式，这是可能的

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

您只需将 TextWrapping 添加为 Wrap 或 WrapWithOverflow 您可以查看here 的区别。同样要使其正常工作，您需要删除您的 RowHeight 或您可以从

更改它

RowHeight="100"

到

MinRowHeight="100"

它确保您的行高至少为 100，如果文本不适合 - 该特定行的大小可以变长，但对于原始行高，它不能更改大小，并且所有行的高度都固定为 100。顺便说一句，100 似乎太高了，也许 20-ish 会很整洁。

试试这段代码，我还在 Justify 中添加了 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>

【讨论】：