本節(jié)結(jié)束UI組件一章，講了Elements、Controls和Effects。
官網(wǎng)原文：https://www.fusetools.com/learn/fuse#element
元素 Element
元素類型的UI組件有一些通用的屬性，這里列舉一些：
點(diǎn)擊測(cè)試模式 HitTestMode
設(shè)計(jì)交互時(shí)，有時(shí)我們需要選出可以交互的元素并知道如何交互，這一般被稱為“hit testing”。在Fuse里，用戶的輸入與元素的交互可以用HitTestMode屬性來進(jìn)行設(shè)置。
看一下這段代碼：
<Grid ColumnCount="2">
<Rectangle Width="100" Height="100" Fill="#808" >
<Clicked>
<DebugAction Message="Clicked left" />
</Clicked>
</Rectangle>
<Rectangle Width="100" Height="100" Fill="#808" HitTestMode="None" >
<Clicked>
<DebugAction Message="Clicked right" />
</Clicked>
</Rectangle>
</Grid>
左右兩個(gè)矩形都設(shè)置了Clicked觸發(fā)器，只有左邊的矩形會(huì)在點(diǎn)擊后做出動(dòng)作，右邊的矩形被明確關(guān)閉了點(diǎn)擊測(cè)試。有時(shí)元素有相互遮蓋情況，就可以設(shè)置HitTestMode只對(duì)下面的元素做測(cè)試。
HitTestMode的有效值包括：
-
None- 該元素不對(duì)點(diǎn)擊測(cè)試做出反應(yīng) -
LocalBounds- 根據(jù)該元素的大小做點(diǎn)擊測(cè)試 -
LocalVisual- 根據(jù)該元素的可視面做點(diǎn)擊測(cè)試 -
LocalBoundsAndChildren- 根據(jù)元素及其子元素的大小做點(diǎn)擊測(cè)試 -
LocalVisualAndChildren- 根據(jù)元素及其子元素的可視面做點(diǎn)擊測(cè)試
ClipToBounds
正常情況時(shí)，一個(gè)元素嵌套在另一個(gè)元素內(nèi)，里面的元素并不受外面的元素限制，比如下例：
<Panel Width="100" Height="100">
<Image Margin="-100" File="Pictures/Picture1.jpg"
StretchMode="UniformToFill" />
</Panel>
例子中的圖片元素的寬和高會(huì)顯示為300pt，而比圖片小的Panel元素并未切剪圖片來適應(yīng)其范圍。
如果你要特意切剪圖片去適應(yīng)父元素的大小，給Panel加上ClipToBounds屬性即可：
<Panel Width="100" Height="100" ClipToBounds="true">
<Image Margin="-100" File="Pictures/Picture1.jpg"
StretchMode="UniformToFill" />
</Panel>
現(xiàn)在圖片就不會(huì)溢出Panel的顯示范圍了。
不透明度 Opacity
一個(gè)對(duì)象的透明度可以用Opacity屬性來設(shè)置。
<Panel Opacity="0.5"/>
Opacity為0時(shí)，元素完全透明并且不再對(duì)點(diǎn)擊測(cè)試做出反應(yīng)。當(dāng)Opacity為1.0時(shí)，元素為缺省狀態(tài)。
層 Layers
有時(shí)重新定義已有控件的外觀是需要的。元素嵌套進(jìn)容器時(shí)可以指定不同的“層”，比如你想讓一個(gè)按鈕多一個(gè)紅色背景，只需給它嵌入一個(gè)背景層的元素即可：
<Button Text="Hello!">
<Rectangle Fill="#931" Layer="Background" />
</Button>
這樣，按鈕原先的布局與行為特性不會(huì)改變，但外觀變了。
Layer的有效值是：
BackgroundLayoutOverlay
關(guān)于控制器 About Controls
在Fuse里，一個(gè)有其語義功能的UI組件我們叫做控制器或控件（Control），它們外觀上大相徑庭。
舉例來說，Button 按鈕特有一些屬性和相關(guān)事件，比如“Clicked”，但是一個(gè)按鈕的外表在不同的主題或樣式里卻大為不同。
特效 Effects
Fuse可以渲染一套視覺效果，大部分控件里都能用得上。但是要用上這些視效，最好在Graphics mode模式下，如在原生主題下使用，會(huì)有很大的限制。
DropShadow
給一個(gè)元素加陰影：
<Rectangle Width="50" Height="50" Fill="#808">
<DropShadow />
</Rectangle>
柔化一個(gè)陰影，角度垂直向下：
<Rectangle Width="50" Height="50" Fill="#808">
<DropShadow Angle="90" Distance="12" Size="20" Spread="0.1" />
</Rectangle>
還能加上些藝術(shù)效果，比如外發(fā)光：
<Panel Background="#000">
<Circle Width="50" Height="50" Fill="#808">
<DropShadow Distance="0" Size="50" Spread="0.2" Color="#ff06" />
</Circle>
</Panel>
DropShadow的屬性有：
- 角度
Angle- 模擬光源來的方向- 0 - 右
- 90 - 上
- 180 - 左
- 270 - 下
- 距離
Distance- 元素到其陰影的距離，單位為點(diǎn)。 - 大小
Size- 陰影的大小 - 擴(kuò)散
Spread- 陰影擴(kuò)散的方式，數(shù)值越接近0，陰影的消散就越線性，數(shù)值最好在1.0以下，不然就容易失真。 - 顏色
Color- 定義陰影的顏色，注意該屬性支持帶有Alpha通道值的色值，可以調(diào)節(jié)透明度（Alpha值是Hex色值的第四位，如#FFF0到#FFFF）。
模糊 Blur
給一個(gè)元素加模糊：
<Text Value="Hello there!">
<Blur Radius="0.9" />
</Text>
注意像其它大部分屬性一樣，Radius也可以做動(dòng)畫效果，但是這里有可能造成大量資源消耗，所以最好用的時(shí)候在設(shè)備上測(cè)試一下。
去飽和度 Desaturate
給一個(gè)元素去飽和度, 全部或部分：
<Image File="Pictures/Picture1.jpg">
<Desaturate Amount="0.4" />
</Image>
1.0為滿值，意思是全部去飽和。
中間色 Halftone
經(jīng)典的中間色特效：
<Image File="Pictures/Picture1.jpg">
<Halftone />
</Image>
Halftone的屬性有：
-
Spacing- 點(diǎn)距（浮點(diǎn)數(shù)，缺省值0.5） -
Smoothness- 點(diǎn)的邊緣可以從柔和到生硬（浮點(diǎn)數(shù)，缺省值2） -
Intensity- 密度（浮點(diǎn)數(shù)，缺省值1） -
DotTint- 著色點(diǎn)的數(shù)量（浮點(diǎn)數(shù)，缺省值0.5） -
PaperTint- 紙著色的數(shù)量（浮點(diǎn)數(shù)，缺省值0.2)
蒙板 Mask
Fuse允許你用一個(gè)圖片（或ImageSource）給一個(gè)元素設(shè)置蒙板：
<Rectangle Width="50" Height="50">
<Mask File="Masks/Flower.png" />
</Rectangle>
Mask有如下屬性：
-
Mode- 模式，指如何應(yīng)用圖片-
RGBA- 缺省值，源圖的Alpha通道作為蒙板，并且源圖的RGB值與元素的RGB值做“multiply”的層疊加。 -
Alpha- 只用源圖的Alpha通道作為蒙板，不去動(dòng)元素的RGB值 -
Greyscale- 用灰度蒙板的色彩組件作為要素與原始的Alpha值疊加
-
-
File- 本地項(xiàng)目目錄里選圖 -
Source- 非本地的圖片源，比如HttpImageSource
如果用的是一張帶Alpha通道的純白圖片，RGBA和Alpha是一個(gè)結(jié)果。
蒙板永遠(yuǎn)會(huì)自我拉伸到與元素同樣的大小。
