【译】Fuse入门（三）

作者: 赵赵811 | 来源:发表于2015-12-21 00:44 被阅读0次

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属性的情况下，多多少少会发生图片四边形与显示后四边形大小不符的情况，那我们提供如下对齐选项：

Default
Left
HorizontalCenter
Right
Top
VerticalCenter
Bottom
TopLeft
TopCenter
TopRight
CenterLeft
Center
CenterRight
BottomLeft
BottomCenter
BottomRight

图片来源

图片来源可以直接在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的布局是基于网上图片的大小时，你要格外小心。