本节结束UI组件一章，讲了Elements、Controls和Effects。
官网原文：https://www.fusetools.com/learn/fuse#element
元素 Element
元素类型的UI组件有一些通用的属性，这里列举一些：
点击测试模式 HitTestMode
设计交互时，有时我们需要选出可以交互的元素并知道如何交互，这一般被称为“hit testing”。在Fuse里，用户的输入与元素的交互可以用HitTestMode属性来进行设置。
看一下这段代码：
<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>
左右两个矩形都设置了Clicked触发器，只有左边的矩形会在点击后做出动作，右边的矩形被明确关闭了点击测试。有时元素有相互遮盖情况，就可以设置HitTestMode只对下面的元素做测试。
HitTestMode的有效值包括：
-
None- 该元素不对点击测试做出反应 -
LocalBounds- 根据该元素的大小做点击测试 -
LocalVisual- 根据该元素的可视面做点击测试 -
LocalBoundsAndChildren- 根据元素及其子元素的大小做点击测试 -
LocalVisualAndChildren- 根据元素及其子元素的可视面做点击测试
ClipToBounds
正常情况时，一个元素嵌套在另一个元素内，里面的元素并不受外面的元素限制，比如下例：
<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>
现在图片就不会溢出Panel的显示范围了。
不透明度 Opacity
一个对象的透明度可以用Opacity属性来设置。
<Panel Opacity="0.5"/>
Opacity为0时，元素完全透明并且不再对点击测试做出反应。当Opacity为1.0时，元素为缺省状态。
层 Layers
有时重新定义已有控件的外观是需要的。元素嵌套进容器时可以指定不同的“层”，比如你想让一个按钮多一个红色背景，只需给它嵌入一个背景层的元素即可：
<Button Text="Hello!">
<Rectangle Fill="#931" Layer="Background" />
</Button>
这样，按钮原先的布局与行为特性不会改变，但外观变了。
Layer的有效值是：
BackgroundLayoutOverlay
关于控制器 About Controls
在Fuse里，一个有其语义功能的UI组件我们叫做控制器或控件（Control），它们外观上大相径庭。
举例来说，Button 按钮特有一些属性和相关事件，比如“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>
还能加上些艺术效果，比如外发光：
<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- 阴影扩散的方式，数值越接近0，阴影的消散就越线性，数值最好在1.0以下，不然就容易失真。 - 颜色
Color- 定义阴影的颜色，注意该属性支持带有Alpha通道值的色值，可以调节透明度（Alpha值是Hex色值的第四位，如#FFF0到#FFFF）。
模糊 Blur
给一个元素加模糊：
<Text Value="Hello there!">
<Blur Radius="0.9" />
</Text>
注意像其它大部分属性一样，Radius也可以做动画效果，但是这里有可能造成大量资源消耗，所以最好用的时候在设备上测试一下。
去饱和度 Desaturate
给一个元素去饱和度, 全部或部分：
<Image File="Pictures/Picture1.jpg">
<Desaturate Amount="0.4" />
</Image>
1.0为满值，意思是全部去饱和。
中间色 Halftone
经典的中间色特效：
<Image File="Pictures/Picture1.jpg">
<Halftone />
</Image>
Halftone的属性有：
-
Spacing- 点距（浮点数，缺省值0.5） -
Smoothness- 点的边缘可以从柔和到生硬（浮点数，缺省值2） -
Intensity- 密度（浮点数，缺省值1） -
DotTint- 着色点的数量（浮点数，缺省值0.5） -
PaperTint- 纸着色的数量（浮点数，缺省值0.2)
蒙板 Mask
Fuse允许你用一个图片（或ImageSource）给一个元素设置蒙板：
<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是一个结果。
蒙板永远会自我拉伸到与元素同样的大小。
网友评论