UI 组件
Fuse里有大量现成的UI组件可以用来构建用户界面（User interface)。 在UX文件里，添加UI组件很容易，只需要标签化它们即可，像这样：
<Image File="MyImage.png" />
<Rectangle Width="50" Height="50" Fill="#888" />
<Text>Hello world!</Text>
注意并不是括在标签内就都是UI组件，还有的是触发器（Triggers）和动作（Actions）。
文本 Text
先来个渲染文本的小App：
<App>
<Text>Hello, world!</Text>
</App>
简单搞定是不是？ 但是当有大段文字需要显示时，最好开启文本包TextWrapping属性：
<Text TextWrapping="Wrap">Lorem Ipsum(...)</Text>
如果文字太多，TextWrapping也搞不定，那你就得考虑把内容放进ScrollView滚动视图中，或者是改变字体大小。TextWrapping有两个设定值，缺省是“NoWrap”，另一个是“Wrap”。
字体 Fonts
你可以导入ttf字库文件，就是TrueType fonts。字体被指定后，一般都会在App里自始至终的使用，所以最好给它创建一个全局源：
<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 again</Text>
</StackPanel>
</App>
在上面这个例子里，字库文件和相关的UX文件被放在同一目录里，这样可以保证整个项目都可以使用该字库，而且只需加载一次。
iOS和安卓都支持用多字节字符集（Multibyte character sets）来渲染文字，这表示在设备上能正常渲染表情符号（emojis）。
备注：目前在桌面的预览窗口里渲染多字节字符集还有些问题，所以遇上桌面预览与设备上的预览不尽相同的情况，别意外，我们正在解决。
文本属性 Text properties
如需对文字渲染有更多控制，你可以设置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>
逐条解释一下上面这个例子，第一行文字元素缺省是左对齐，文字颜色设为浅灰色。第二行文字是居中对齐。第三行文字是右对齐并字号设为较大的24号。第四行代码是两行文字，行间距被设为10点。TextAlignment的有效设定值有Left(默认)、Right和Center。
数字 Number
虽然大部分情况是处理文字，但有时也需要对数字进行格式化，这就得用到Format属性，具体这些格式参见微软网站上的这张表。
目前Fuse只支持F格式（Fixed-Point）, 就是指定数字精确到小数点后几位数。
下面代码会显示为3.141：
<Number Value="3.14159265359" Format="F03" />
图像 Image
显示一个图片：
<App>
<Image File="FuseLogo.png" />
</App>
上面的代码假设FuseLoge.png文件与UX文件在同一目录，如果要从互联网上加载图片，如下所示：
<Image Url="http://path_to_image" />
备注：如果你做网页开发多年，习惯使用src设定URL地址，需要注意这里，虽然Image有一个Source属性，用来设定一个图片的来源，这个Resource就是HttpImageSource，但是那是Fuse在背后来创建的，所以你要记住的是，坚持使用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>
上面的代码将三张图片上下排列。最上面的图片就是简单的取自项目中的一个文件(Image1.jpg)。第二张图片，首先在第一行代码中使用 FileImageSource来引用了一个文件(Image2.jpg)，然后用DataToResource来做数据绑定，这会从JavaScript代码中找出并取出一个键值作为来源。最后，我们取得一个网上图片的URL网址并使用Url属性与另一个Image绑定。如果这些代码看起来有些复杂，不要紧，我们在后面详细说说数据绑定Data Binding, 还有JavaScript。
图片上色
给一个Image染个色是可以的，使用Color属性即可。注意，此法主要作用于图片中最接近白色的部分，所以想好了效果再用，看下面的例子：
<Image File="WhiteIcon.png" Color="#f00" />
这行代码将一个白色图标变成了红色。
拉伸模式 StretchMode
当一个Image被置入一个容器(container), 它默认会尽可能的占用最大显示面积，但如果图片的宽高比与容器的不一样，那么容器会有部分留白。
通过给Image设置不同的StretchMode属性，我们可以用多种不同方式来处理这个问题，如下所示：
-
Fill- 填充全部容器空间，不管宽高比了。 -
PixelPrecise- 以图片的像素为单元，确保图片在所有设备上都保持晰利，这意味着在不同分辨率的设备上，图片的显示大小会不一样。该选项会忽略容器的大小。 -
PointPrecise- 以点位单位保持图片的大小，以保证图片在所有设备上显示的都一样，一般会忽略掉容器大小，举例说，64 X 64像素大小的图片，在设备上就精确控制在64 X 64 点的大小。 -
PointPrefer- 综合了PointPrecise与PixelPrecise模式，该模式优先用PointPrecise使图片保持正确的大小，在PixelPrecise大约能创建大小合适的“on screen”图像的情况下，则该模式会使用PixelPrecise来提升图片的显示清晰度。 -
Scale9- 该模式根据的是图片的Scale9Margin设定来拉伸显示图片，该设定决定哪些像素被拉伸及拉伸多少。Scale9Margin将图片分为9部分，四角部分会保持原始的宽高比，剩下的部分会根据图片所需显示的大小而进行拉伸。 -
Uniform- 此模式是在保持图片原始宽高比不变的情况下，最大化地显示图片，这经常会没法是图片覆盖整个容器。 -
UniformToFill- 保持图片的宽高比的情况下，显示覆盖整个容器，这通常会发生容器裁掉部分图片的情况。
拉伸方向 StretchDirection
你可以通过StretchDirection属性来设置拉伸方向：
-
Both- 同时上下拉伸 -
UpOnly- 只能上拉伸 -
DownOnly- 只能下拉伸
内容对齐 ContentAlignment
在使用StretchMode和StretchDirection属性的情况下，多多少少会发生图片四边形与显示后四边形大小不符的情况，那我们提供如下对齐选项：
DefaultLeftHorizontalCenterRightTopVerticalCenterBottomTopLeftTopCenterTopRightCenterLeftCenterCenterRightBottomLeftBottomCenterBottomRight
图片来源
图片来源可以直接在Image中用File或Url属性来标明，这么做，在图片生命时间的多个方面会少了一些控制。
换个方式，使用ImageSource对象，你可以只在一个地方给一个图片文件命名，把它当作资源，然后在项目的任何地方复用，这样就不会搞得到处是相同的路径和元数据这类信息。
下面的代码声明了一个图片为一个资源:
<FileImageSource ux:Global="CloseIcon" File="close.png" Density="2" />
然后你就可以在项目的任何地方，使用这个名为CloseIcon的资源了：
<Image Source="CloseIcon" />
Fuse目前支持如下图片源类型：
-
FileImageSource- 指定一个本地图片，并可以设定其密度值。 -
HttpImageSource- 从一个URL网址指定一个图片，并可以设定其密度值。 -
MultiDesityImageSource- 同一个图像内容，给不同DPI的设备屏幕指定不同的分辨率的版本。
另外，下面的类可以让你更进一步配置图片来源：
MemoryPolicy - 当显示完图片后，不在用它时，该类可以让你控制图片数据在内存里的保留时间。
MultiDensityImageSource
现在市面上有非常广泛不同规格的手持设备，有很多不同DPI的屏幕，Fuse可以让你在一个Image标签里指定不同密度的图片文件：
<Image StretchMode="PointPrefer">
<MultiDensityImageSource>
<FileImageSource File="Icon.png" Density="1"/>
<FileImageSource File="Icon.png@2x.png" Density="2"/>
</MultiDensityImageSource>
</Image>
然后Fuse会为不同DPI的屏幕自动适配图片源，并且会兼顾到图片的拉伸模式设定。
HttpImageSource
HttpImageSource - 可以让你指定一个从网上用HTTP取来的图片文件，并会异步显示。
<Image>
<MultiDensityImageSource>
<HttpImageSource Url="{image_url_1x}" Density="1"/>
<HttpImageSource Url="{image_url_2x}" Density="2"/>
</MultiDensityImageSource>
</Image>
或者，你想用一个固定密度的图片，代码就少了很多：
<Image Url="{image_url}" />
注意：从网上用HTTP取图片需要些时间才会加载，在加载前，Fuse根本不知道图片的尺寸，因此，当App的布局是基于网上图片的大小时，你要格外小心。
网友评论