UI 組件
Fuse里有大量現(xiàn)成的UI組件可以用來構(gòu)建用戶界面（User interface)。 在UX文件里，添加UI組件很容易，只需要標(biāo)簽化它們即可，像這樣：
<Image File="MyImage.png" />
<Rectangle Width="50" Height="50" Fill="#888" />
<Text>Hello world!</Text>
注意并不是括在標(biāo)簽內(nèi)就都是UI組件，還有的是觸發(fā)器（Triggers）和動(dòng)作（Actions）。
文本 Text
先來個(gè)渲染文本的小App：
<App>
<Text>Hello, world!</Text>
</App>
簡單搞定是不是？ 但是當(dāng)有大段文字需要顯示時(shí)，最好開啟文本包TextWrapping屬性：
<Text TextWrapping="Wrap">Lorem Ipsum(...)</Text>
如果文字太多，TextWrapping也搞不定，那你就得考慮把內(nèi)容放進(jìn)ScrollView滾動(dòng)視圖中，或者是改變字體大小。TextWrapping有兩個(gè)設(shè)定值，缺省是“NoWrap”，另一個(gè)是“Wrap”。
字體 Fonts
你可以導(dǎo)入ttf字庫文件，就是TrueType fonts。字體被指定后，一般都會(huì)在App里自始至終的使用，所以最好給它創(chuàng)建一個(gè)全局源：
<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>
在上面這個(gè)例子里，字庫文件和相關(guān)的UX文件被放在同一目錄里，這樣可以保證整個(gè)項(xiàng)目都可以使用該字庫，而且只需加載一次。
iOS和安卓都支持用多字節(jié)字符集（Multibyte character sets）來渲染文字，這表示在設(shè)備上能正常渲染表情符號(hào)（emojis）。
備注：目前在桌面的預(yù)覽窗口里渲染多字節(jié)字符集還有些問題，所以遇上桌面預(yù)覽與設(shè)備上的預(yù)覽不盡相同的情況，別意外，我們正在解決。
文本屬性 Text properties
如需對(duì)文字渲染有更多控制，你可以設(shè)置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>
逐條解釋一下上面這個(gè)例子，第一行文字元素缺省是左對(duì)齊，文字顏色設(shè)為淺灰色。第二行文字是居中對(duì)齊。第三行文字是右對(duì)齊并字號(hào)設(shè)為較大的24號(hào)。第四行代碼是兩行文字，行間距被設(shè)為10點(diǎn)。TextAlignment的有效設(shè)定值有Left(默認(rèn))、Right和Center。
數(shù)字 Number
雖然大部分情況是處理文字，但有時(shí)也需要對(duì)數(shù)字進(jìn)行格式化，這就得用到Format屬性，具體這些格式參見微軟網(wǎng)站上的這張表。
目前Fuse只支持F格式（Fixed-Point）, 就是指定數(shù)字精確到小數(shù)點(diǎn)后幾位數(shù)。
下面代碼會(huì)顯示為3.141：
<Number Value="3.14159265359" Format="F03" />
圖像 Image
顯示一個(gè)圖片：
<App>
<Image File="FuseLogo.png" />
</App>
上面的代碼假設(shè)FuseLoge.png文件與UX文件在同一目錄，如果要從互聯(lián)網(wǎng)上加載圖片，如下所示：
<Image Url="http://path_to_image" />
備注：如果你做網(wǎng)頁開發(fā)多年，習(xí)慣使用src設(shè)定URL地址，需要注意這里，雖然Image有一個(gè)Source屬性，用來設(shè)定一個(gè)圖片的來源，這個(gè)Resource就是HttpImageSource，但是那是Fuse在背后來創(chuàng)建的，所以你要記住的是，堅(jiān)持使用Url來加載網(wǎng)絡(luò)圖片。
指定圖像源的幾種方法
還有其它的加載圖像數(shù)據(jù)的方法，這里是一個(gè)用到JavaScript做數(shù)據(jù)綁定的例子：
<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>
上面的代碼將三張圖片上下排列。最上面的圖片就是簡單的取自項(xiàng)目中的一個(gè)文件(Image1.jpg)。第二張圖片，首先在第一行代碼中使用 FileImageSource來引用了一個(gè)文件(Image2.jpg)，然后用DataToResource來做數(shù)據(jù)綁定，這會(huì)從JavaScript代碼中找出并取出一個(gè)鍵值作為來源。最后，我們?nèi)〉靡粋€(gè)網(wǎng)上圖片的URL網(wǎng)址并使用Url屬性與另一個(gè)Image綁定。如果這些代碼看起來有些復(fù)雜，不要緊，我們?cè)诤竺嬖敿?xì)說說數(shù)據(jù)綁定Data Binding, 還有JavaScript。
圖片上色
給一個(gè)Image染個(gè)色是可以的，使用Color屬性即可。注意，此法主要作用于圖片中最接近白色的部分，所以想好了效果再用，看下面的例子：
<Image File="WhiteIcon.png" Color="#f00" />
這行代碼將一個(gè)白色圖標(biāo)變成了紅色。
拉伸模式 StretchMode
當(dāng)一個(gè)Image被置入一個(gè)容器(container), 它默認(rèn)會(huì)盡可能的占用最大顯示面積，但如果圖片的寬高比與容器的不一樣，那么容器會(huì)有部分留白。
通過給Image設(shè)置不同的StretchMode屬性，我們可以用多種不同方式來處理這個(gè)問題，如下所示：
-
Fill- 填充全部容器空間，不管寬高比了。 -
PixelPrecise- 以圖片的像素為單元，確保圖片在所有設(shè)備上都保持晰利，這意味著在不同分辨率的設(shè)備上，圖片的顯示大小會(huì)不一樣。該選項(xiàng)會(huì)忽略容器的大小。 -
PointPrecise- 以點(diǎn)位單位保持圖片的大小，以保證圖片在所有設(shè)備上顯示的都一樣，一般會(huì)忽略掉容器大小，舉例說，64 X 64像素大小的圖片，在設(shè)備上就精確控制在64 X 64 點(diǎn)的大小。 -
PointPrefer- 綜合了PointPrecise與PixelPrecise模式，該模式優(yōu)先用PointPrecise使圖片保持正確的大小，在PixelPrecise大約能創(chuàng)建大小合適的“on screen”圖像的情況下，則該模式會(huì)使用PixelPrecise來提升圖片的顯示清晰度。 -
Scale9- 該模式根據(jù)的是圖片的Scale9Margin設(shè)定來拉伸顯示圖片，該設(shè)定決定哪些像素被拉伸及拉伸多少。Scale9Margin將圖片分為9部分，四角部分會(huì)保持原始的寬高比，剩下的部分會(huì)根據(jù)圖片所需顯示的大小而進(jìn)行拉伸。 -
Uniform- 此模式是在保持圖片原始寬高比不變的情況下，最大化地顯示圖片，這經(jīng)常會(huì)沒法是圖片覆蓋整個(gè)容器。 -
UniformToFill- 保持圖片的寬高比的情況下，顯示覆蓋整個(gè)容器，這通常會(huì)發(fā)生容器裁掉部分圖片的情況。
拉伸方向 StretchDirection
你可以通過StretchDirection屬性來設(shè)置拉伸方向：
-
Both- 同時(shí)上下拉伸 -
UpOnly- 只能上拉伸 -
DownOnly- 只能下拉伸
內(nèi)容對(duì)齊 ContentAlignment
在使用StretchMode和StretchDirection屬性的情況下，多多少少會(huì)發(fā)生圖片四邊形與顯示后四邊形大小不符的情況，那我們提供如下對(duì)齊選項(xiàng)：
DefaultLeftHorizontalCenterRightTopVerticalCenterBottomTopLeftTopCenterTopRightCenterLeftCenterCenterRightBottomLeftBottomCenterBottomRight
圖片來源
圖片來源可以直接在Image中用File或Url屬性來標(biāo)明，這么做，在圖片生命時(shí)間的多個(gè)方面會(huì)少了一些控制。
換個(gè)方式，使用ImageSource對(duì)象，你可以只在一個(gè)地方給一個(gè)圖片文件命名，把它當(dāng)作資源，然后在項(xiàng)目的任何地方復(fù)用，這樣就不會(huì)搞得到處是相同的路徑和元數(shù)據(jù)這類信息。
下面的代碼聲明了一個(gè)圖片為一個(gè)資源:
<FileImageSource ux:Global="CloseIcon" File="close.png" Density="2" />
然后你就可以在項(xiàng)目的任何地方，使用這個(gè)名為CloseIcon的資源了：
<Image Source="CloseIcon" />
Fuse目前支持如下圖片源類型：
-
FileImageSource- 指定一個(gè)本地圖片，并可以設(shè)定其密度值。 -
HttpImageSource- 從一個(gè)URL網(wǎng)址指定一個(gè)圖片，并可以設(shè)定其密度值。 -
MultiDesityImageSource- 同一個(gè)圖像內(nèi)容，給不同DPI的設(shè)備屏幕指定不同的分辨率的版本。
另外，下面的類可以讓你更進(jìn)一步配置圖片來源：
MemoryPolicy - 當(dāng)顯示完圖片后，不在用它時(shí)，該類可以讓你控制圖片數(shù)據(jù)在內(nèi)存里的保留時(shí)間。
MultiDensityImageSource
現(xiàn)在市面上有非常廣泛不同規(guī)格的手持設(shè)備，有很多不同DPI的屏幕，F(xiàn)use可以讓你在一個(gè)Image標(biāo)簽里指定不同密度的圖片文件：
<Image StretchMode="PointPrefer">
<MultiDensityImageSource>
<FileImageSource File="Icon.png" Density="1"/>
<FileImageSource File="Icon.png@2x.png" Density="2"/>
</MultiDensityImageSource>
</Image>
然后Fuse會(huì)為不同DPI的屏幕自動(dòng)適配圖片源，并且會(huì)兼顧到圖片的拉伸模式設(shè)定。
HttpImageSource
HttpImageSource - 可以讓你指定一個(gè)從網(wǎng)上用HTTP取來的圖片文件，并會(huì)異步顯示。
<Image>
<MultiDensityImageSource>
<HttpImageSource Url="{image_url_1x}" Density="1"/>
<HttpImageSource Url="{image_url_2x}" Density="2"/>
</MultiDensityImageSource>
</Image>
或者，你想用一個(gè)固定密度的圖片，代碼就少了很多：
<Image Url="{image_url}" />
注意：從網(wǎng)上用HTTP取圖片需要些時(shí)間才會(huì)加載，在加載前，F(xiàn)use根本不知道圖片的尺寸，因此，當(dāng)App的布局是基于網(wǎng)上圖片的大小時(shí)，你要格外小心。
