【译】Fuse入门（五）

*** 本节还属于UI组件一章，讲了Brushes、Button、Switch和Slider。***

官网原文：https://www.fusetools.com/learn/fuse#brushes

笔刷 Brushes

Fuse用于给图形填充和描边的笔刷有几种不同的类型。

单色 SolidColor

一个简单的连续色，就用SolidColor:

<SolidColor Color="#00f" />

任何支持笔刷的地方都能应用这类笔刷，比如一个矩形：

<Rectangle>
    <SolidColor Color="#00f" />
</Rectangle>

注意上么这么写与下面一样：

<Rectangle Fill="#00f" />

图片填充 ImageFill

用图片来填充图形，使用ImageJill:

<Circle Width="160" Height="160">
    <ImageFill File="Portrait.png" />
</Circle>

ImageFill可以设置StretchMode属性, 具体参见上面的Image标记一节。

线性渐变 LinearGradient

使用LinearGraient和GradientStop这两种标记来定义一个渐变，比如创建一个上白下黑的渐变：

<LinearGradient StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#fff" />
    <GradientStop Offset="1" Color="#000" />
</LinearGradient>

StartPoint和EndPoint是笔刷所应用于的图形的X、Y轴位移值，所以用StartPoint="0,0" EndPoint="1,1"的设定就可以定义一条对角线。

或者，除了StarPoint和EndPoint外，你也可以定义一个角，用Angle属性指定弧度，或用AngleDegrees指定角的度数。

<LinearGradient Angle="2.4" />

或

<LinearGradient AngleDegrees="45" />

按钮 Button

按钮属于可点击的控制，它们的外观是在主题里描述的。

<App Theme="Basic">
    <Button Text="Click me!" ux:Name="button1">
        <Clicked>
            <Set button1.Text="Clicked!" />
        </Clicked>
    </Button>
</App>

上例的代码会创建一个满屏的按钮，点击它，按钮上的文字会由Click me!变成Clicked。

在Fuse中，不光是Button，其它相当多的元素也可以设置“鼠标点击”或“触摸点击”，这样，任何组件都可以用来自定义外观的按钮。

<App>
    <Rectangle Fill="#309">
        <Clicked>
            <DebugAction Message="Rectangle got clicked" />
        </Clicked>
    </Rectangle>
</App>

上例，当点击矩形后，你可以在预览的输出端看到Debug信息。

事件触发器 Event triggers

Button组件也可以将Clicked属性作为一个事件的触发器。

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            buttonClick: function (args) { console.log("Button was clicked"); }
        }
    </JavaScript>
    <Button Text="Click me!" Clicked="{buttonClick}" />
</App>

当你用事件来驱动业务逻辑时，该触发器用起来会很顺手。

开关 Switch

Fuse有一个Switch控制，用于开/关样式的输入：

<Switch />

然后，使用WhileTrue触发器使它做出“开”的反应：

<App Theme="Basic">
    <StackPanel>
        <Switch>
            <WhileTrue>
                <Change rectangle.Width="160" Duration="0.5"
                    Easing="CircularInOut" />
            </WhileTrue>
        </Switch>
        <Rectangle ux:Name="rectangle" Width="70" Height="70" Fill="#909" />
    </StackPanel>
</App>

当然，相反的“关”是用WhileFale或WhileTrue Invert="true"标记来定义的。

如果想要Switch一开始就处于激活状态，可以这样：

<Switch Value="true" />

由Switch触发的事件也可以用JavaScript来操控：

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            switchChanged: function (args) {
                console.log("Switch value is: " + args.value);
            }
        };
    </JavaScript>
    <StackPanel>
        <Switch Value="true" ValueChanged="{switchChanged}" />
    </StackPanel>
</App>

数据绑定开关

Switch可以用Value属性来做数据绑定，如下所示：

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var switchValue = Observable(false);

        module.exports = {
            switchValue: switchValue,
            enableSwitch: function () { switchValue.value = true; },
            disableSwitch: function () { switchValue.value = false; },
            switchChanged: function (args) {
                console.log("Switch value is: " + args.value);
            }
        };
    </JavaScript>
    <StackPanel>
        <Switch Value="{switchValue}" ValueChanged="{switchChanged}" />
        <Grid ColumnCount="2">
            <Button Text="Disable" Clicked="{disableSwitch}" />
            <Button Text="Enable" Clicked="{enableSwitch}" />
        </Grid>
    </StackPanel>
</App>

滑动条 Slider

显示一个滑动条：

<Slider />

然后用ProgressAnimation来定义滑动时的样式，下面代码的滑动条控制了一个可以从0度到90度旋转的矩形：

<StackPanel>
    <Slider>
        <ProgressAnimation>
            <Rotate Target="rectangle" Degrees="90" />
        </ProgressAnimation>
    </Slider>
    <Rectangle ux:Name="rectangle" Width="100" Height="100" Fill="#808" />
</StackPanel>

使用ValueChanged属性时，滑动条还能用来做事件监听：

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            sliderValueChanged: function (args)
            {
                console.log("Value: " + args.value);
            }
        };
    </JavaScript>
    <Slider ValueChanged="{sliderValueChanged}" />
</App>

Slider有Minimum和Maximum属性，缺省值表示的是：从滑动条的最左端滑到最右端，控制台输出的是0到100的浮点数。要修改的话，可以这样：

<Slider Minimum="4" Maximum="42" />

数据绑定滑动条

和上面的Switch一样，Slider滑动时的位置也可以做数据绑定，如下所示：

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var sliderValue = Observable(42);
        var sliderLabel = sliderValue.map(function (val) {
            return "Current position: " + val;
        });

        module.exports = {
            sliderValue: sliderValue,
            sliderLabel: sliderLabel
        };
    </JavaScript>
    <StackPanel>
        <Slider Value="{sliderValue}" />
        <Text TextAlignment="Center" Value="{sliderLabel}" />
    </StackPanel>
</App>