c# - WPF 像素网格线

Question

我正在尝试在我的 Canvas 上绘制一个网格，其中:

1. 线条总是一个像素粗
2. 方形图 block 的大小以像素表示，换句话说，每条水平线和垂直线之间的距离以像素为单位，并且可能绑定(bind)到后面的代码，以便我可以在运行时更改它。

这是我的第一次尝试，但可能我使用了错误的控件。

<Canvas  Panel.ZIndex="0"  x:Name="TileCanvas">
    <Grid Panel.ZIndex="5">
        <Rectangle Width="{Binding ElementName=TileCanvas, Path=ActualWidth}" Height="{Binding ElementName=TileCanvas, Path=ActualHeight}" 
            Stroke="Black" StrokeThickness="0"> 

            <Rectangle.Fill>
                <DrawingBrush ViewportUnits="Absolute" TileMode="Tile">
                    <DrawingBrush.Viewport>
                        <MultiBinding Converter="{StaticResource RectConverter}">
                            <...>
                        </MultiBinding>
                    </DrawingBrush.Viewport>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                            <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                    <DrawingBrush.Transform>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                    </DrawingBrush.Transform>
                </DrawingBrush>

            </Rectangle.Fill>

        </Rectangle>
    </Grid>

此解决方案允许我改变每个图 block 的大小，但是:

1. 我没有找到将线宽固定为一个像素的方法
2. 当我使用转换器更改 DrawingBrush.Viewport 时，我确实放大了图 block (太棒了!)但线条粗细增加了(嘘)。

Answer 1

我有一个非常相似的问题。您可以使用单个几何体，如果您想避免厚度增加\减少，您必须通过像厚度 = 1/tileWidth 这样的比率来表示瓷砖宽度的厚度。如果您使用 WPF 控件更改图 block 的大小，则可以使用转换器相应地更新厚度。

<GeometryDrawing Geometry="M10,0 L10,10 0,10 10,10 10,0Z"  Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
    <GeometryDrawing.Pen>
        <Pen Thickness="{Binding ElementName=[TILE SIZE CONTROL VAL], Converter={StaticResource RatioConverter}}"/>
    </GeometryDrawing.Pen>
</GeometryDrawing>

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return (1 / (double)value);
}