UI 控件

Fuse 自带了一些可以用来构建用户界面的 UI 控件。在 UX 文档中，你可以用添加包围的标记来添加 UI 控件。

<Image File="MyImage.png" />
<Rectangle Width="50" Height="50" Fill="#888" />
<Text>Hello world!</Text>

注意就算是有些标签是封闭的，不代表他就一定是一个 UI 控件。UX 文档将标签同样用在其他内容上，比如触发条件和动作

文本

如下是一个渲染文本的小应用：

<App>
  <Text>Hello, world!</Text>
</App>

这样挺好的，不过当你想要渲染一长段文本，比如 Loerm lpsum 那么你很可能想要文本换行。在 Fuse 中文本控件的 TextWrapping 属性已经实现了：

<Text TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>

如果你还是发现换行之后的文本依然很难在你的控件里展示完全，你可能需要考虑把内容展示在滚动视图中，或者修改一下字体大小。TextWrapping 可以设置 Wrap 或者 NoWrap（默认值）。

字体

你可以从包含 TrueType 字体的 ttf 文件中导入字体。因为一种字体通常会在一个应用中一直使用，那么最好用全局资源来创建它。

<App>
  <Font File="Roboto-Medium.ttf" ux:Global="Medium" />
  <Font File="Roboto-Light.ttf" ux:Global="Light" />
  <StackPanel>
    <Text Font="Light">Roboto Light</Text>
    <Text Font="Medium">Roboto Medium</Text>
    <Text Font="Light">Roboto Light agian</Text>
  </StackPanel>
</App>

在这个例子中，字体文件存放在相关的 UX 文件同一个目录中。这种引入字体的方法可以保证字体只载入一次在整个应用中都可以用。

iOS 和 Android 都支持多字节字符集的渲染，这表示 emoji 可以很好地在设备上渲染。

注意！ 当前桌面预览中渲染多字节字符集存在一些问题。当你发现设备上渲染的字符和桌面预览上的不完全一样的情况时不要太惊讶。这是一个已知的问题。

文本属性

如果你想要对文本渲染更多地控制，你可以设置 TextAlignment,TextColor,FontSize和LineSpacing：

<Text TextColor="#999">Left</Text>
<Text TextAlignment="Center">Center</Text>
<Text FontSize="24" TextAlignment="Right">Right</Text>
<Text LineSpacing="10">
  Multiple
  Lines
</Text>

在这个例子中，第一行文本是左对齐的，他是默认的，文本的颜色是中度灰。第二行文本是居中对齐的，第三行文本是右对齐，而且字体比较大。第四行文本分为两行，且行间距是10 个像素点。 TextAlignment 的默认值是Left，其他还有Right和Center。

数字

虽然大部分情况下文本就已经适用了，你依然可以使用Number来显示格式化的数值。可以用Format来定制格式，需要遵循标准数值格式字符标准。

当前Number仅支持的格式是F，把当前的字符裁剪到特定的小数点位数。

以下的代码将渲染成3.141:

<Number Value="3.14159265359" Format="F03" />

图像

Fuse 支持显示 PNG 和 JPEG 文件，展示图像文件方式如下：

<App>
  <Image File="FuseLogo.png" />
</App>

这段代码假设FuseLog.png文件和UX文件在同一个目录下。如果你想要载入Internet上的图像文件，很简单：

<Image Url="http://图片地址" />

注意！ 如果你的背景是Web开发者，那么你应该习惯于把URL指派给 src 属性。当图片有一个Source的属性，通常会被指派给图像的 Resource。在这个语境下，这个Resource是一个HttpImageSource，但是这自动地帮你处理好了，所以可以坚持用Url属性来载入网路上的内容。

来自资源中的图像内容

举一个载入图像数据的小例子，这个例子也用了 Javascript 来做数据绑定：

<FileImageSource ux:Key="pic2" File="Images/Image2.jpg" />
<StackPanel>
  <Javascript>
    module.exports = {
        imageResource: "pic2",
        url: "http://somewhereontheinternet/Cute-cat.jpg"
    }
  </Javascript>
  <Image File="Images/Image1.jpg" />
  <Image Source="{DataToResource imageResource}" />
  <Image Url="{url}" />
</StackPanel>

这段代码可以展示三张图像从上到下地堆叠。最上面的一张图像从作为项目文件的一部分载入图像。在上面我们通过创建一个FileImageSource引用了一个文件绑定到DataToResource。这将会从Javascript中得到的值去资源文件夹中查找。我们同样还从网路上的URL获取一个图像，绑定给一个带有URL属性的图像。如果这个看起来太复杂了，不要着急：我们会在后续的数据绑定和Javascript的章节中再仔细介绍。

图像颜色