可能是一个微不足道的问题:我需要填充一个带有棋盘图案的矩形,其中每个单元的大小为1x1像素。如何在XAML中为此模式创建矢量几何?我没有使用Blend我正在手工制作矢量图形。
感谢 康斯坦丁
答案 0 :(得分:17)
您将从以下XAML获得以下内容:
。 。
这是XAML的长版本,拼写出正在创建的几何体。 RectangleGeometry 元素的 Rect 属性采用 left,top,width,height 序列。
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="250">
<Canvas>
<Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
<Rectangle.Fill>
<DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">
<!-- a drawing of 4 checkerboard tiles -->
<DrawingBrush.Drawing>
<DrawingGroup>
<!-- checkerboard background -->
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,2,2" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<!-- two checkerboard foreground tiles -->
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,1,1" />
<RectangleGeometry Rect="1,1,1,1" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Window>
以下较短版本渲染完全相同的图像,但对几何图形使用简写表示法。棋盘图块呈现为路径。
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="250">
<Canvas>
<Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
<Rectangle.Fill>
<DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z" Brush="White"/>
<GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" Brush="Black"/>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Window>
警告:当矩形位于整数坐标上时,这很有效。如果它位于小数坐标上(例如Canvas.Left =“10.5”而不是“10”),则刷子将被消除锯齿并且将失去清晰图案。 SnapToDevicePixels 无济于事。只要矩形的位置已知,就可以设置 DrawingBrush 的RelativeTransform来偏移小数分量,以避免消除锯齿。
答案 1 :(得分:4)
在Oren的回答之上,这是一个紧凑的版本,可以在颜色选择器和其他地方看到漂亮的方格灰色背景:
<DrawingBrush TileMode="Tile" Viewport="0,0,32,32" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing Geometry="M0,0 H1 V1 H2 V2 H1 V1 H0Z" Brush="LightGray"/>
</DrawingBrush.Drawing>
</DrawingBrush>