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>
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
<Image File="someImage.jpg" /> <Video File="someVideo.mp4" />
<Image Url="http://www.some.com/image.jpg" /> <Video Url="http://www.some.com/video.mp4" />