这里我们带来的是另一种表单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日
博客被黑,挪窝简书安家……