Fuse comes with a set of primitive elements which are the basic building blocks of more complex visual elements. These primitives includes Text, Rectangle, Circle, Image and Video.
The two most used shapes in apps are rectangles and circles. They each have their own type in Fuse:
<Panel> <Circle Color="#bbfdff" /> <Rectangle Color="#ff6eb4" /> </Panel>
Check out the full documentation for Rectangle and Circle.
All visual elements in Fuse have a
Color property. This property maps to what would intuitively be considered the main color of the element in question.
For shapes, like rectangle and circle, one expects the
Color property to translate to a SolidColor brush of that color. This means that the following sample:
<Rectangle Color="#f0f" />
is actually turned into
<Rectangle Fill="#f0f" />
Fill property is of the Brush type, the
Fill="#f0f part is actually expanded even further into the following equivalent:
<Rectangle> <SolidColor Color="#f0f" /> </Rectangle>
Where the SolidColor is "auto-bound" to the rectangles
Brushes and Strokes
Colors in Fuse are represented as Brushes. To get a normal solid color, we can use the SolidColor brush. All shapes has a
Fill property, which is of the
Brush type. Because setting solid colors on shapes is so common, there exist a special
The Text class is the basic primitive to display static text.
Here is an overview of the difference between the different text-related controls:
Text - Displays non-interactable text which can wrap over multiple lines.
TextInput - Single-line user-interactable text control.
- Text only - has no special decoration
- Has a DockLayout, which mean we can place children using the
- bool IsPassword
- TextInputActionHandler ActionTriggered
TextBox - Like TextInput, but has basic decoration so it is easier to when empty (e.g. for prototyping)
- Multiline TextInput
- cannot be password
- cannot have special action
Basic.TextInput - A decorated TextInput from the Fuse.BasicTheme package.
Image / Video
We can easily include images and videos by using the Image and Video elements:
<Image File="someImage.jpg" /> <Video File="someVideo.mp4" />
Both Image and Video also supports getting a url instead of a local file:
<Image Url="http://www.some.com/image.jpg" /> <Video Url="http://www.some.com/video.mp4" />
Check out Image and Video documentation detailed documentation.