Brushes describe how an area is painted in Avalonia UI. The framework provides several brush types for solid colors, gradients, images, and more.
IBrush Interface
Base interface for all brushes.
Properties
Gets the opacity of the brush. Values range from 0.0 (fully transparent) to 1.0 (fully opaque).
Gets the transform applied to the brush. Can be used to rotate, scale, or translate the brush pattern.
Gets the origin point for the brush transform, specified as a relative point (e.g., center, top-left).
SolidColorBrush
Fills an area with a solid color.
Properties
Gets or sets the color of the brush.
Constructors
// Default constructor
var brush = new SolidColorBrush();
// From Color with optional opacity
var brush = new SolidColorBrush(Colors.Blue, 0.5);
// From uint color value
var brush = new SolidColorBrush(0xFF0000FF); // ARGB format
Methods
Parses a color string and returns a mutable SolidColorBrush.var brush = SolidColorBrush.Parse("#FF0000");
var brush2 = SolidColorBrush.Parse("Red");
Usage Examples
// Create solid color brushes
var redBrush = new SolidColorBrush(Colors.Red);
var semiTransparentBlue = new SolidColorBrush(Colors.Blue, 0.5);
var customColor = new SolidColorBrush(Color.FromRgb(120, 200, 80));
// Use in XAML
<Border Background="Red" />
<Border Background="#FF0000" />
<Border>
<Border.Background>
<SolidColorBrush Color="Blue" Opacity="0.5" />
</Border.Background>
</Border>
LinearGradientBrush
Draws with a linear gradient that transitions between colors along a line.
Properties
Gets or sets the start point for the gradient. Default is RelativePoint.TopLeft (0,0).
Gets or sets the end point for the gradient. Default is RelativePoint.BottomRight (1,1).
Gets or sets the collection of gradient stops that define the colors and positions in the gradient.
Gets or sets how the gradient fills space outside the gradient vector. Values: Pad (default), Reflect, Repeat.
Usage Examples
// Create a horizontal gradient from red to blue
var gradient = new LinearGradientBrush
{
StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
EndPoint = new RelativePoint(1, 0, RelativeUnit.Relative),
GradientStops =
{
new GradientStop { Color = Colors.Red, Offset = 0 },
new GradientStop { Color = Colors.Blue, Offset = 1 }
}
};
<!-- Vertical gradient -->
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Orange" />
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- Diagonal gradient with multiple stops -->
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.5" Color="Yellow" />
<GradientStop Offset="1" Color="Green" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
RadialGradientBrush
Paints an area with a radial gradient that radiates from a center point.
Properties
Gets or sets the center point of the gradient. Default is RelativePoint.Center (0.5, 0.5).
Gets or sets the location of the focal point that defines the beginning of the gradient. Default is RelativePoint.Center.
Gets or sets the horizontal radius of the outermost circle. Default is 0.5 (50%).
Gets or sets the vertical radius of the outermost circle. Default is 0.5 (50%).
Gets or sets the gradient stops.
Usage Examples
// Create a radial gradient from white center to blue edge
var radialGradient = new RadialGradientBrush
{
Center = RelativePoint.Center,
GradientOrigin = RelativePoint.Center,
RadiusX = RelativeScalar.Middle,
RadiusY = RelativeScalar.Middle,
GradientStops =
{
new GradientStop { Color = Colors.White, Offset = 0 },
new GradientStop { Color = Colors.Blue, Offset = 1 }
}
};
<!-- Radial gradient spotlight effect -->
<Ellipse>
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="30%,30%" Center="50%,50%">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="0.5" Color="LightBlue" />
<GradientStop Offset="1" Color="DarkBlue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
ConicGradientBrush
Creates a gradient that sweeps around a center point.
Properties
Gets or sets the center point of the conic gradient.
Gets or sets the starting angle in degrees.
Usage Examples
<!-- Color wheel effect -->
<Ellipse>
<Ellipse.Fill>
<ConicGradientBrush Center="50%,50%">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.17" Color="Yellow" />
<GradientStop Offset="0.33" Color="Green" />
<GradientStop Offset="0.5" Color="Cyan" />
<GradientStop Offset="0.67" Color="Blue" />
<GradientStop Offset="0.83" Color="Magenta" />
<GradientStop Offset="1" Color="Red" />
</ConicGradientBrush>
</Ellipse.Fill>
</Ellipse>
ImageBrush
Paints an area with an image.
Properties
Gets or sets the image to draw. Can be a Bitmap or other image source.
Gets or sets how the image is stretched to fill the area. Values: None, Fill, Uniform, UniformToFill.
Gets or sets how the image is tiled. Values: None, Tile, FlipX, FlipY, FlipXY.
Gets or sets the horizontal alignment. Values: Left, Center, Right.
Gets or sets the vertical alignment. Values: Top, Center, Bottom.
Usage Examples
var imageBrush = new ImageBrush(new Bitmap("pattern.png"))
{
Stretch = Stretch.Uniform,
TileMode = TileMode.Tile
};
<Border>
<Border.Background>
<ImageBrush Source="/Assets/background.png"
Stretch="UniformToFill" />
</Border.Background>
</Border>
<!-- Tiled pattern -->
<Rectangle>
<Rectangle.Fill>
<ImageBrush Source="/Assets/pattern.png"
TileMode="Tile"
Stretch="None" />
</Rectangle.Fill>
</Rectangle>
VisualBrush
Paints an area with a visual element.
Properties
Gets or sets the visual element to use as the brush content.
Usage Examples
<!-- Mirror effect -->
<StackPanel>
<Border x:Name="Original" Background="LightBlue" Padding="20">
<TextBlock>Original Content</TextBlock>
</Border>
<Border Height="100">
<Border.Background>
<VisualBrush Visual="{Binding #Original}"
Stretch="Uniform" />
</Border.Background>
</Border>
</StackPanel>
Predefined Brushes
The Brushes class provides predefined solid color brushes:
var red = Brushes.Red;
var blue = Brushes.Blue;
var transparent = Brushes.Transparent;
var white = Brushes.White;
var black = Brushes.Black;
// ... and many more standard colors
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
<LinearGradientBrush.Transform>
<RotateTransform Angle="45" />
</LinearGradientBrush.Transform>
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="1" Color="Blue" />
</LinearGradientBrush>
</Border.Background>
</Border>
Best Practices
- Use Immutable Brushes: For better performance, use immutable brushes from
Brushes class when possible
- Reuse Brush Instances: Create brush instances once and reuse them across multiple elements
- Resource Brushes: Define commonly used brushes in resource dictionaries
- Gradient Performance: Complex gradients with many stops can impact performance
- Image Brush Optimization: Use appropriately sized images for
ImageBrush to avoid memory overhead
- Opacity vs Alpha: Use brush
Opacity property for animations, alpha channel in Color for static transparency