本節(jié)結(jié)束UI組件一章趾撵，講了Elements椅寺、Controls和Effects梯影。
官網(wǎng)原文：https://www.fusetools.com/learn/fuse#element
元素 Element
元素類型的UI組件有一些通用的屬性，這里列舉一些：
點擊測試模式 HitTestMode
設(shè)計交互時，有時我們需要選出可以交互的元素并知道如何交互四敞，這一般被稱為“hit testing”泛源。在Fuse里，用戶的輸入與元素的交互可以用HitTestMode屬性來進行設(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>
左右兩個矩形都設(shè)置了Clicked觸發(fā)器达箍，只有左邊的矩形會在點擊后做出動作，右邊的矩形被明確關(guān)閉了點擊測試铺厨。有時元素有相互遮蓋情況缎玫，就可以設(shè)置HitTestMode只對下面的元素做測試。
HitTestMode的有效值包括：
-
None- 該元素不對點擊測試做出反應 -
LocalBounds- 根據(jù)該元素的大小做點擊測試 -
LocalVisual- 根據(jù)該元素的可視面做點擊測試 -
LocalBoundsAndChildren- 根據(jù)元素及其子元素的大小做點擊測試 -
LocalVisualAndChildren- 根據(jù)元素及其子元素的可視面做點擊測試
ClipToBounds
正常情況時解滓，一個元素嵌套在另一個元素內(nèi)赃磨，里面的元素并不受外面的元素限制，比如下例：
<Panel Width="100" Height="100">
<Image Margin="-100" File="Pictures/Picture1.jpg"
StretchMode="UniformToFill" />
</Panel>
例子中的圖片元素的寬和高會顯示為300pt洼裤，而比圖片小的Panel元素并未切剪圖片來適應其范圍邻辉。
如果你要特意切剪圖片去適應父元素的大小，給Panel加上ClipToBounds屬性即可：
<Panel Width="100" Height="100" ClipToBounds="true">
<Image Margin="-100" File="Pictures/Picture1.jpg"
StretchMode="UniformToFill" />
</Panel>
現(xiàn)在圖片就不會溢出Panel的顯示范圍了腮鞍。
不透明度 Opacity
一個對象的透明度可以用Opacity屬性來設(shè)置值骇。
<Panel Opacity="0.5"/>
Opacity為0時，元素完全透明并且不再對點擊測試做出反應移国。當Opacity為1.0時吱瘩，元素為缺省狀態(tài)。
層 Layers
有時重新定義已有控件的外觀是需要的桥狡。元素嵌套進容器時可以指定不同的“層”搅裙，比如你想讓一個按鈕多一個紅色背景皱卓，只需給它嵌入一個背景層的元素即可：
<Button Text="Hello!">
<Rectangle Fill="#931" Layer="Background" />
</Button>
這樣裹芝，按鈕原先的布局與行為特性不會改變，但外觀變了娜汁。
Layer的有效值是：
BackgroundLayoutOverlay
關(guān)于控制器 About Controls
在Fuse里嫂易，一個有其語義功能的UI組件我們叫做控制器或控件（Control），它們外觀上大相徑庭掐禁。
舉例來說怜械，Button 按鈕特有一些屬性和相關(guān)事件，比如“Clicked”傅事，但是一個按鈕的外表在不同的主題或樣式里卻大為不同缕允。
特效 Effects
Fuse可以渲染一套視覺效果，大部分控件里都能用得上蹭越。但是要用上這些視效障本，最好在Graphics mode模式下，如在原生主題下使用，會有很大的限制驾霜。
DropShadow
給一個元素加陰影：
<Rectangle Width="50" Height="50" Fill="#808">
<DropShadow />
</Rectangle>
柔化一個陰影案训，角度垂直向下：
<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- 元素到其陰影的距離粪糙，單位為點强霎。 - 大小
Size- 陰影的大小 - 擴散
Spread- 陰影擴散的方式，數(shù)值越接近0蓉冈，陰影的消散就越線性城舞，數(shù)值最好在1.0以下，不然就容易失真洒擦。 - 顏色
Color- 定義陰影的顏色椿争，注意該屬性支持帶有Alpha通道值的色值，可以調(diào)節(jié)透明度（Alpha值是Hex色值的第四位熟嫩，如#FFF0到#FFFF）秦踪。
模糊 Blur
給一個元素加模糊：
<Text Value="Hello there!">
<Blur Radius="0.9" />
</Text>
注意像其它大部分屬性一樣，Radius也可以做動畫效果掸茅，但是這里有可能造成大量資源消耗椅邓，所以最好用的時候在設(shè)備上測試一下。
去飽和度 Desaturate
給一個元素去飽和度, 全部或部分：
<Image File="Pictures/Picture1.jpg">
<Desaturate Amount="0.4" />
</Image>
1.0為滿值昧狮，意思是全部去飽和景馁。
中間色 Halftone
經(jīng)典的中間色特效：
<Image File="Pictures/Picture1.jpg">
<Halftone />
</Image>
Halftone的屬性有：
-
Spacing- 點距（浮點數(shù)，缺省值0.5） -
Smoothness- 點的邊緣可以從柔和到生硬（浮點數(shù)逗鸣，缺省值2） -
Intensity- 密度（浮點數(shù)合住，缺省值1） -
DotTint- 著色點的數(shù)量（浮點數(shù)，缺省值0.5） -
PaperTint- 紙著色的數(shù)量（浮點數(shù)撒璧，缺省值0.2)
蒙板 Mask
Fuse允許你用一個圖片（或ImageSource）給一個元素設(shè)置蒙板：
<Rectangle Width="50" Height="50">
<Mask File="Masks/Flower.png" />
</Rectangle>
Mask有如下屬性：
-
Mode- 模式透葛，指如何應用圖片-
RGBA- 缺省值，源圖的Alpha通道作為蒙板卿樱，并且源圖的RGB值與元素的RGB值做“multiply”的層疊加僚害。 -
Alpha- 只用源圖的Alpha通道作為蒙板，不去動元素的RGB值 -
Greyscale- 用灰度蒙板的色彩組件作為要素與原始的Alpha值疊加
-
-
File- 本地項目目錄里選圖 -
Source- 非本地的圖片源繁调，比如HttpImageSource
如果用的是一張帶Alpha通道的純白圖片萨蚕，RGBA和Alpha是一個結(jié)果。
蒙板永遠會自我拉伸到與元素同樣的大小蹄胰。
