Question

我正在尝试在画布上绘制一个网格：

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

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

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

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

我没有找到将线条粗细修复为一个像素的方法
当我用转换器更改DrawingBrush.Viewport时，我会放大图块（太棒了！）但是线条的粗细增加了（嘘）。

Answer 1

我有一个非常类似的问题。您可以使用单个几何体，如果要避免厚度增加\减少，则必须使用厚度= 1 / tileWidth之类的比率以平铺宽度表示厚度。如果使用WPF控件更改拼贴的大小，则可以使用转换器相应地更新厚度。

<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);
}

WPF像素网格线

1 个答案: