中(125％)显示的WPF DataGrid中缺少边框线 [英] Missing border lines in WPF DataGrid on Medium (125%) display

问题描述

当显示设置为中-125％"时，Win7上的wpf DataGrid出现了一个奇怪的渲染问题.第二和第三列之间预期的黑色垂直边框线不可见.

I have a strange rendering issue with my wpf DataGrid on Win7 when the the display is set to Medium - 125%.The expected black vertical border line between the 2nd and 3rd column is not visible.

<DataGrid ItemsSource="{Binding Rows}" AutoGenerateColumns="False">
            <DataGrid.Resources>
                <Style TargetType="DataGridCell" >
                    <Setter Property="Background" Value="Orange"></Setter>
                    <Setter Property="BorderThickness" Value="0"></Setter>
                </Style>
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTextColumn></DataGridTextColumn>
                <DataGridTextColumn  Width="150" ></DataGridTextColumn>
                <DataGridTextColumn></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>

这是我可以重现该问题的最简单的代码.您可以使用任何viewmodel来查看此问题.例如，将宽度"从150更改为150.1可解决此问题.你们能给我解释一下会发生什么吗?我如何避免这种情况发生?

This is the simplest code i can reproduce the problem with. You can use any viewmodel to see this problem. Changing the Width from 150 to 150.1 for example fixes the problem. Can you guys explain to me what happens? How can I avoid this to happen?

推荐答案

DataGrid 如何计算每列的位置和大小存在问题.一个简单的例子:当您将 DataGridColumn 的 Width 设置为95.0时，column的实际呈现方式为95.2；但是， DataGrid 将使用95.0计算X列的位置，而不是95.2.

The problem is in discrepancy in how DataGrid calculates position and size of each column. Simple example: when you set Width of DataGridColumn to 95.0 the actual rendered with of column is 95.2; however, DataGrid will use 95.0 to calculate column X position, but not 95.2.

这种差异表现为某些列缺少边框，因为由于缺少小数部分，下一列将一个像素吞噬"了上一列的空间.

This discrepancy manifests itself in missing borders on some columns, as the next column "eats" by one pixel into space of the previous column due to missing fractional part.

解决方案是为 DataGridColumn 设置正确的 Width ，因此它将与呈现的宽度完全相同.在这种情况下， DataGrid 会意识到小数部分，所有边界都会就位.

The solution is to set correct Width for DataGridColumn, so it will be exactly the same as the rendered width. In this case DataGrid becomes aware of fractional part and all borders will be in place.

您可以使用以下代码在呈现列之前以"DPI感知"方式计算列的宽度.我不要求代码的信誉，因为我是从这里获得的 https://habrahabr.ru/post/216833/.

You can use the code below to calculate the width of column in "DPI aware" fashion before it is rendered. I don't claim credits for the code, as I got it from here https://habrahabr.ru/post/216833/.

var dpiProperty = typeof(SystemParameters).GetProperty("Dpi", BindingFlags.NonPublic | BindingFlags.Static);
var dpi = (int)dpiProperty.GetValue(null, null);
var pixelSize = 96.0 / dpi;

foreach (var dataGridColumn in this.DataGrid.Columns)
{
    var actualColumnWidth = dataGridColumn.Width.DisplayValue + (pixelSize / 2);
    var div = (actualColumnWidth * 1000) / (pixelSize * 1000);
    actualColumnWidth = (int)div * pixelSize;

    dataGridColumn.Width = new DataGridLength(actualColumnWidth, DataGridLengthUnitType.Pixel);
}

这篇关于中(125％)显示的WPF DataGrid中缺少边框线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！