WPF Brush Patterns

WPF Brush Patterns

Brush types for filling shapes and backgrounds in WPF.

1. Brush Hierarchy

Brush (abstract)
├── SolidColorBrush      ← Single color
├── GradientBrush
│   ├── LinearGradientBrush  ← Linear gradient
│   └── RadialGradientBrush  ← Radial gradient
├── TileBrush
│   ├── ImageBrush       ← Image fill
│   ├── DrawingBrush     ← Drawing fill
│   └── VisualBrush      ← Visual element fill
└── BitmapCacheBrush     ← Cached visual

---

2. SolidColorBrush

<!-- Inline color name -->
<Rectangle Fill="Blue"/>

<!-- Hex color -->
<Rectangle Fill="#FF2196F3"/>

<!-- With opacity -->
<Rectangle>
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5"/>
    </Rectangle.Fill>
</Rectangle>

// Code creation
var brush = new SolidColorBrush(Colors.Blue);
brush.Opacity = 0.5;
brush.Freeze(); // Performance optimization

---

3. LinearGradientBrush

<!-- Horizontal gradient (default) -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#2196F3" Offset="0"/>
            <GradientStop Color="#FF9800" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<!-- Diagonal gradient -->
<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#2196F3" Offset="0"/>
        <GradientStop Color="#4CAF50" Offset="0.5"/>
        <GradientStop Color="#FF9800" Offset="1"/>
    </LinearGradientBrush>
</Rectangle.Fill>

<!-- Vertical gradient -->
<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="Black" Offset="1"/>
    </LinearGradientBrush>
</Rectangle.Fill>

StartPoint/EndPoint: Relative coordinates (0-1)

---

4. RadialGradientBrush

<!-- Basic radial -->
<Ellipse Width="200" Height="200">
    <Ellipse.Fill>
        <RadialGradientBrush>
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

<!-- Off-center highlight (3D sphere effect) -->
<Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.3,0.3"
                         Center="0.5,0.5"
                         RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="Blue" Offset="1"/>
    </RadialGradientBrush>
</Ellipse.Fill>

GradientOrigin: Light source position (0-1)

---

5. ImageBrush

<!-- Basic image fill -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Assets/texture.png"/>
    </Rectangle.Fill>
</Rectangle>

<!-- Tiled pattern -->
<Rectangle.Fill>
    <ImageBrush ImageSource="/Assets/pattern.png"
                TileMode="Tile"
                Viewport="0,0,0.25,0.25"
                ViewportUnits="RelativeToBoundingBox"/>
</Rectangle.Fill>

<!-- Stretched (default) -->
<Rectangle.Fill>
    <ImageBrush ImageSource="/Assets/background.jpg"
                Stretch="UniformToFill"/>
</Rectangle.Fill>

TileMode: None, Tile, FlipX, FlipY, FlipXY Stretch: None, Fill, Uniform, UniformToFill

---

6. VisualBrush

<!-- Tile visual elements -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <VisualBrush TileMode="Tile"
                     Viewport="0,0,0.25,0.25"
                     ViewportUnits="RelativeToBoundingBox">
            <VisualBrush.Visual>
                <Grid Width="50" Height="50">
                    <Ellipse Width="20" Height="20" Fill="Red"
                             HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <Ellipse Width="20" Height="20" Fill="Blue"
                             HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Rectangle.Fill>
</Rectangle>

<!-- Reflection effect -->
<VisualBrush Visual="{Binding ElementName=SourceElement}">
    <VisualBrush.RelativeTransform>
        <ScaleTransform ScaleY="-1" CenterY="0.5"/>
    </VisualBrush.RelativeTransform>
</VisualBrush>

---

7. DrawingBrush

<!-- Checkered pattern -->
<Rectangle.Fill>
    <DrawingBrush TileMode="Tile"
                  Viewport="0,0,20,20"
                  ViewportUnits="Absolute">
        <DrawingBrush.Drawing>
            <GeometryDrawing Brush="Gray">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="0,0,10,10"/>
                        <RectangleGeometry Rect="10,10,10,10"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</Rectangle.Fill>

---

8. Performance Tips

// Always Freeze brushes for performance
var brush = new SolidColorBrush(Colors.Blue);
brush.Freeze();

var gradient = new LinearGradientBrush(Colors.Red, Colors.Blue, 0);
gradient.Freeze();

Freeze(): Makes brush immutable, enables cross-thread sharing, improves rendering performance.

---

9. References

• Painting with Brushes - Microsoft Docs
• TileBrush Overview - Microsoft Docs