avalonia-graphics-animation

Avalonia Graphics & Animation

Overview

Avalonia renders via Skia (default) or Impeller. All visual effects are cross-platform. Animations use keyframe Animation class or property Transitions.

Brushes

Brush	XAML	Use
SolidColorBrush	"#FF5722" or "Red"	Solid fill/stroke
LinearGradientBrush	<LinearGradientBrush>	Linear gradient
RadialGradientBrush	<RadialGradientBrush>	Radial gradient
ConicGradientBrush	<ConicGradientBrush>	Conic gradient
ImageBrush	<ImageBrush>	Tiled/stretched image fill
VisualBrush	<VisualBrush>	Render control as brush

<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
            <GradientStop Color="#FF5722" Offset="0"/>
            <GradientStop Color="#9C27B0" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="50%,50%" Radius="50%">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Red" Offset="1"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Opacity shorthand: Opacity="0.5" on any control (applies to whole subtree).

Transforms

<Rectangle RenderTransform="rotate(45)" Width="100" Height="100"/>

<Rectangle>
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="45"/>
            <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
            <TranslateTransform X="20" Y="10"/>
            <SkewTransform AngleX="10"/>
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

RenderTransformOrigin="0.5,0.5" — pivot point (0–1 relative to control bounds).

String shorthand syntax: rotate(deg), scale(x,y), translate(x,y), skew(x,y), matrix(a,b,c,d,e,f).

Geometry / Shapes

Shapes (draw themselves): Rectangle, Ellipse, Line, Polyline, Polygon, Path