How can I create a brush (DrawingBrush) for stripes as shown in the blog:
I can't use it because it uses scale transform, which means if the UI element is small, the stripes are pretty much not visible or too close together.
I can't use image brush because I need to bind the colors.
2 Answers
Just use MappingMode="Absolute":
<LinearGradientBrush MappingMode="Absolute" x:Key="HatchBrush" StartPoint="0,0" EndPoint="4,4" SpreadMethod="Repeat"> <GradientStop Offset="0" Color="LightCoral"/> <GradientStop Offset="0.75" Color="LightCoral"/> <GradientStop Offset="0.75" Color="Gray"/> <GradientStop Offset="1" Color="Gray"/> </LinearGradientBrush> Creates downward 45 degree angle stripe pattern. Alter viewport to change size of stripes
<DrawingBrush Stretch="UniformToFill" ViewportUnits="Absolute" Viewport="0,0,10,10" TileMode="Tile"> <DrawingBrush.Drawing> <DrawingGroup> <DrawingGroup.Children> <GeometryDrawing Brush="Black"> <GeometryDrawing.Geometry> <GeometryGroup FillRule="Nonzero"> <PathGeometry> <PathFigure StartPoint="0,0"> <LineSegment Point="100,0"/> <LineSegment Point="100,100"/> <LineSegment Point="0,100"/> </PathFigure> </PathGeometry> </GeometryGroup> </GeometryDrawing.Geometry> </GeometryDrawing> <GeometryDrawing Brush="#FF404040"> <GeometryDrawing.Geometry> <GeometryGroup FillRule="Nonzero"> <PathGeometry> <PathFigure StartPoint="0,0"> <LineSegment Point="25,0"/> <LineSegment Point="100,75"/> <LineSegment Point="100,100"/> <LineSegment Point="75,100"/> <LineSegment Point="0,25"/> <LineSegment Point="0,0"/> </PathFigure> <PathFigure StartPoint="75,0"> <LineSegment Point="100,25"/> <LineSegment Point="100,0"/> </PathFigure> <PathFigure StartPoint="0,75"> <LineSegment Point="25,100"/> <LineSegment Point="0,100"/> </PathFigure> </PathGeometry> </GeometryGroup> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingGroup.Children> </DrawingGroup> </DrawingBrush.Drawing> </DrawingBrush> Alternatively you could bind the scale transform to the height and width of the control using multibinding. Then with a converter, you alter the scale to the max of height or width, then the stripes will remain the same size.
