创建自定义风格的开关控件Custom switch

Fuse拥有一个很强大和灵活的系统来帮助你设计你自有的控件，让我们一起看一下设计一个ToggleControl控件是如何操作的。

contact2

在这个示例中我们将用到：

• 构建我们自己的控件用的是ToggleControl的子类，拥有多种状态(�此例中是on和off)；
• 一个时间轴Timeline允许基于同样的参数进行多重交互，在此例中的开关拨弄switch thumb便是；allow multiple interactions to work on the same parameter seamlessly。
• 充许用户基于控件来滑动拇指，使用的是手势SwipeGesture或者点击控件来开关状态；

设计一个样式开关，我们定位到的最主要的事情如下：

• 控制器需要有一个边界，当开关为On变白的时候；The control should have a border that turns white when it is On
• 当控件转到On的时候，轨迹形状的背景应该是透明的；The background of the track should turn transparent as the control is turned On

在这里我们简要回顾下ux:Name和ux:Class及内联类�等章节：

• ux:Name
• 如何在Fuse中建立自定义的UI组件

定制开关switch的代码很简单：

<pre>
<ToggleControl ux:Class="MySwitch" Margin="4,4,4,4" Width="80" Height="48" Focus.IsFocusable="true" ux:Name="_switch">
<Clicked>
<ToggleSwipeActive Target="swipe" />
</Clicked>

<SwipeGesture Direction="Right" Length="38" Type="Active" ux:Name="swipe" />

<WhileSwipeActive Source="swipe">
    <Change Target="_switch.Value" Value="true" />
</WhileSwipeActive>
<SwipingAnimation Source="swipe">
    <Change enabledTimeline.TargetProgress="1" />
</SwipingAnimation>

<Panel Layer="Background">
    <Circle Alignment="CenterLeft"  Width="34" Height="34" Margin="4,0,14,0">
        <SolidColor ux:Name="thumbFill" Color="#fafafaff" />
        <DropShadow Angle="90" Distance="0" Size="2" Spread="0.05" />
        <Timeline ux:Name="enabledTimeline">
            <Move X="38" Duration="0.25" Easing="QuadraticInOut" />
        </Timeline>
    </Circle>

    <Rectangle CornerRadius="23" Width="80" Height="40" Alignment="Center">
        <SolidColor ux:Name="trackFill" Color="#e7e7e7" />
        <Stroke>
            <SolidColor ux:Name="strokeColor" Color="#ffffff00" />
        </Stroke>
    </Rectangle>
</Panel>

<WhileDisabled>
    <Change thumbFill.Color="#bdbdbdff" Easing="QuadraticInOut" Duration="0.25" />
    <Change trackFill.Color="#0000001e" Easing="QuadraticInOut" Duration="0.25" />
</WhileDisabled>

<WhileTrue>
    <Change thumbFill.Color="#fff" Easing="QuadraticInOut" Duration="0.25" />
    <Change trackFill.Color="#ffffff00" Easing="QuadraticInOut" Duration="0.25" />
    <Change strokeColor.Color="#ffffffff" Easing="QuadraticInOut" Duration="0.25" />
    <Change enabledTimeline.TargetProgress="1" DelayBack="0" />
</WhileTrue>

</ToggleControl>
</pre>

这对于设计一个开关控件ToggleControl来说不过是最基本的事情了，先完成静止状态的效果绘制，然后当我们响应ToggleControl控件的状态改变的时候，让我们一起来看看一些有意思的地方。

<pre>
<Clicked>
<ToggleSwipeActive Target="swipe" />
</Clicked>
</pre>

如你所见，我们改变滑动手势的状态，用来直接代替ToggleControl的状态改变，这使得我们对保持不同的交互同时步发生时变得非常简单。 we change the state of the swipe gesture. This makes it easier for us to keep the different interactions in sync.

<pre>
<SwipeGesture Direction="Right" Length="38" Type="Active" ux:Name="swipe" />

<WhileSwipeActive Source="swipe">
<Change Target="_switch.Value" Value="true" />
</WhileSwipeActive>
<SwipingAnimation Source="swipe">
<Change enabledTimeline.TargetProgress="1" />
</SwipingAnimation>
</pre>

当开关被触动的过程当中，我们首先使用相同的�长度length添加到滑动手势SwipeGesture中。
然后，我们改变ToggleControl的值Value，作为SwipeGesture处于活跃状态Active-state时的一个结果。
最终，我们引用到触动时的时间轴timeline来按比例地移动他，这里的时间轴Timeline是定义在双向开关switch内部的。

<pre>
<Circle
Alignment="CenterLeft"
Width="34"
Height="34"
Margin="4,0,14,0">
<SolidColor ux:Name="thumbFill" Color="#fafafaff" />
<DropShadow Angle="90" Distance="0" Size="2" Spread="0.05" />
<Timeline ux:Name="enabledTimeline">
<Move X="38" Duration="0.25" Easing="QuadraticInOut" />
</Timeline>
</Circle>
</pre>

我们接着来改变这里的时间轴，在ToggleControl是启用状态的时候：

<pre>
<WhileTrue>
<Change thumbFill.Color="#fff" Easing="QuadraticInOut" Duration="0.25" />
<Change trackFill.Color="#ffffff00" Easing="QuadraticInOut" Duration="0.25" />
<Change strokeColor.Color="#ffffffff" Easing="QuadraticInOut" Duration="0.25" />
<Change enabledTimeline.TargetProgress="1" DelayBack="0" />
</WhileTrue>
</pre>

The surrounding areas

In the areas surrounding the switch, we want to:

Create a Circle that expands and contracts as the switch is toggled
Subtly change the colors of the icons
Change the TextColor of the Header (inline class)
Change the SolidColor in the background when the Circle has expanded to its maximum value
Make sure the expanding Circle never extends outside its containing DockPanel, this is achieved using ClipToBounds="true"
Slightly move the Circle as the switch changes state, so it expands from and contracts to slightly different locations

代码区

我们使用的是内联类inline classes（注：这里的的内联类跟新建类时的内部类ux:InnerClass是两回事哦！
<pre>
<Text ux:Class="Header" FontSize="24" TextColor="#11abfe" TextAlignment="Center" Margin="0,35,0,5" />
<Text ux:Class="Description" TextWrapping="Wrap" FontSize="14" TextAlignment="Center" Margin="35,10,35,5" />
<Image ux:Class="Icon" Alignment="VerticalCenter" Height="80" Width="80" Color="#dedede" />
</pre>

然后，配置入口就只有一点点事情了：
<pre>
<DockPanel ClipToBounds="true">
<Rectangle Layer="Background">
<SolidColor ux:Name="secondBackgroundColor" Color="#fff" />
</Rectangle>
<Header Dock="Top" ux:Name="secondHeader">Automatic synchronization</Header>
<Description Dock="Top">Synchronize all contact information when connecting using USB.</Description>
<StackPanel Orientation="Horizontal" Alignment="Center">
<Icon Height="80" File="Assets/Connect.png" ux:Name="connect" />
<Panel Margin="35,0,0,0">
<MySwitch Alignment="VerticalCenter">
<WhileTrue>
<Change greenScaling.Factor="7" Duration="0.25" Easing="QuadraticOut" Delay="0.20" />
<Change secondHeader.TextColor="#fff" Duration="0.25" Delay="0.20" />
<Change connect.Color="#fff" Duration="0.25" Delay="0.35" />
<Change greenColor.Color="#8cb542" Duration="0.25" Easing="QuadraticOut" Delay="0.20" />
<Change secondBackgroundColor.Color="#8cb542" Duration="0.05" Delay="0.35" />
<Change greenCircleTranslation.X="19" Duration="0" DurationBack="0" Delay="0.25" Easing="QuadraticInOut"/>
</WhileTrue>
</MySwitch>
<Circle>
<Translation ux:Name="greenCircleTranslation" X="-19" />
<SolidColor ux:Name="greenColor" Color="#ffffffff" />
<Scaling ux:Name="greenScaling" Factor="0" />
</Circle>
</Panel>
</StackPanel>
</DockPanel>
</pre>

Tag：Fuse, Fuseapp, Fusetools, native app
发布时间：2016年05月08日
博客被黑，挪窝简书安家……