Images and icons

Five icons: a check mark and four chevrons

An Icon draws a small vector glyph, such as a check mark or an arrow, at any size and in any color. An Image shows a picture: a texture loaded through your engine.

Markup

<!-- Icon draws a small vector glyph; Image shows a texture (see the page for loading one). -->
<StackPanel Orientation="Horizontal">
  <Icon Kind="Checkmark" Width="24" Height="24" Margin="0,0,12,0" />
  <Icon Kind="ChevronLeft" Width="24" Height="24" Margin="0,0,12,0" />
  <Icon Kind="ChevronRight" Width="24" Height="24" Margin="0,0,12,0" />
  <Icon Kind="ChevronUp" Width="24" Height="24" Margin="0,0,12,0" />
  <Icon Kind="ChevronDown" Width="24" Height="24" />
</StackPanel>

Key properties

Property	Description
Kind	Which glyph: `Checkmark`, `ChevronUp`, `ChevronDown`, `ChevronLeft` or `ChevronRight` (IconKind).
Stroke	The glyph's line color.
StrokeThickness	The glyph's line width.
Source	The picture to show.

An icon scales its glyph to its own size, so give it a Width and Height.

Events and commands

Neither raises events of its own. To make an icon clickable, put it inside a button.

Styling

Icons and images have no template or visual states; set their properties directly or in a Style.

Keyboard, gamepad and touch

Neither takes focus or input.

Icon

The five glyphs are drawn as strokes, so they stay sharp at any size and scale.

Image

Shows its Source, an image loaded through the configuration's assets (the engine integrations import textures).

Table of Contents