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日
博客被黑，挪窩簡書安家……