.XAML File Format – Brushes, shapes, transforms and animation

Colours and brushes

A Color is written in the formats of the syntax page. A property of type Brush accepts a colour as text (it makes a SolidColorBrush), or a brush element:

The named colours are the names of the web’s colour table (AliceBlue to YellowGreen) and Transparent, listed in Colors and Brushes. UWP and WinUI add AcrylicBrush, RevealBorderBrush and XamlCompositionBrushBase; Silverlight has no VisualBrush or DrawingBrush. Avalonia also has ConicGradientBrush.

Shapes

Geometry and the path mini-language

Path.Data and other Geometry properties take either geometry elements or a string of commands. The elements: LineGeometry, RectangleGeometry (Rect, RadiusX, RadiusY), EllipseGeometry (Center, RadiusX, RadiusY), PathGeometry (Figures, FillRule) holding PathFigure (StartPoint, IsClosed, IsFilled) with segments LineSegment, PolyLineSegment, BezierSegment, PolyBezierSegment, QuadraticBezierSegment, PolyQuadraticBezierSegment, ArcSegment (Point, Size, RotationAngle, IsLargeArc, SweepDirection) and StreamGeometry, and GeometryGroup and CombinedGeometry (GeometryCombineMode: Union, Intersect, Xor, Exclude).

The string form is a sequence of commands, each a letter (upper case: absolute coordinates; lower case: relative to the current point) and its numbers, separated by commas or spaces:

Example: Data="M 0,0 L 100,0 100,50 Q 50,80 0,50 Z". It is close to the language of the d attribute of an SVG path; the fill-rule prefix F0/F1 is XAML’s. A Geometry with a Transform is moved or scaled before it is drawn.

Transforms and effects

Animation

An animation changes a property over time. It is described in markup as a Storyboard that contains animation objects, each naming a target and a property:

<Button Content="Hover">
  <Button.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:0.3"
                           AutoReverse="True" RepeatBehavior="2x"/>
          <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
            <LinearColorKeyFrame KeyTime="0:0:0" Value="Red"/>
            <EasingColorKeyFrame KeyTime="0:0:1" Value="Blue"><EasingColorKeyFrame.EasingFunction><CubicEase/></EasingColorKeyFrame.EasingFunction></EasingColorKeyFrame>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Not described

Known, not yet covered

• Reference: 3D (Viewport3D, models, lights, cameras), Drawing types (GeometryDrawing, DrawingGroup, GlyphRunDrawing), media timelines and MediaTimeline are named, not described.
• Reference: the composition-layer animations of UWP and WinUI (implicit animations, Compositor) are code, not markup, and are not described.

Unknown

• Reference: whether the colour names are the same set in every framework was not tested.