Fuse短板之如何实现各类表单元素及组件（三）

这里我们带来的是另一种表单Checkbox元素的实现方式。

这里是效果图：

Checkbox

我们需要一张选择按钮的图片20x20像素透明PNG格式，然后，可以为True和False状态设置回调函数动作。

同时，如果把他添加到一个状态组StateGroup的话，上面这种实现方式也可以很容易地转换为单选按钮radio的形式。

主体代码如下：

<pre>

<ToggleControl ux:Class="CheckboxToggle" Margin="2" Width="26" Height="26" ux:Name="_switch" Value="false" IsEnabled="true">
<Clicked>
<Toggle Target="_switch" />
</Clicked>
<Panel Layer="Background">
<Rectangle Alignment="Center">
<Rectangle Width="26" Height="26" Layer="Background" Alignment="Center" ux:Name="_toggleStateIndicator">
<SolidColor Color="#FFF0" ux:Name="_toggleModeIndicatorColor" />
<Stroke Width="1">
<SolidColor Color="#FFF" />
</Stroke>
</Rectangle>

<Image File="Assets/b.png" ux:Name="_toggleStateImage" Width="20" Height="20" />

</Rectangle>
</Panel>
<WhileTrue>
<Scale Factor="1.1" Duration="0.1" DurationBack="0.1" />
<Change _toggleStateImage.Color="#00A196" Duration="0.1" DurationBack="0.1" />
<Change _toggleModeIndicatorColor.Color="#BEFAEE" Duration="0.1" DurationBack="0.5" />
<Scale Target="_toggleStateIndicator" Factor="1.2" Duration="0.5" DurationBack="0.2" Easing="ElasticOut" EasingBack="CubicIn" />
<Callback Handler="{yourToggleOnFunction}" />
</WhileTrue>
<WhileFalse>
<Callback Handler="{yourToggleOffFunction}" />
</WhileFalse>
</ToggleControl>


<StackPanel>
<CheckboxToggle />
<CheckboxToggle />
</StackPanel>

</pre>

Tag：Fuse表单组件
发布时间：2016年05月24日
博客被黑，挪窝简书安家……