Day-night switch

In this example we'll implement a custom switch control by using the ToggleControl, with separate forward and backward animations. The design was inspired by this awesome piece by Ramakrishna V (which was later animated by Tsuriel).

In this example, we will:

  • Define our own ToggleControl with our own custom animation
  • Utilize the BackwardAnimation attribute on TriggerAnimation in order to get separate activating and deactivating animations
  • Have animations with several steps, using Keyframe

The classes

We create clases for the different elements of the switch. The following is the class used for stars:

<Circle ux:Class="Star" Height="5" Width="5" Alignment="Center" Color="#fff" />

We define our moon craters in the same way:

<Circle ux:Class="MoonDot" Color="#fff">
    <Stroke Width="5" Color="#e3e7c7" />

The following is how the background of the switch is made. Note how Offset is used to offset the position of the stars.

<Panel Layer="Background">
    <Star ux:Name="star1" Offset="-5,-20" />
    <Star ux:Name="star2" Offset="5,20" />
    <Star ux:Name="star3" Offset="15,-10" />
    <Star ux:Name="star4" Offset="27,8" />
    <Star ux:Name="star5" Offset="38,-23" />
    <Star ux:Name="star6" Offset="48,0" />
    <Star ux:Name="star7" Offset="45,15" />
    <Rectangle ux:Name="background" CornerRadius="75" Color="#3c4145">
        <Stroke ux:Name="backgroundBorder" Color="#1c1c1c" Width="5" />

The switch thumb is defined as follows:

<Panel ux:Name="thumb" Alignment="CenterLeft" Margin="10,0,0,0" Width="50" Height="50">
    <MoonDot ux:Name="moonDot1" Width="17" Height="17" Alignment="TopRight" Offset="-7,3" />
    <MoonDot ux:Name="moonDot2" Width="11" Height="11" Alignment="TopLeft" Offset="13,8" />
    <MoonDot ux:Name="moonDot3" Width="12" Height="12" Alignment="BottomRight" Offset="-12,-6" />

    <Circle Color="#fff" ux:Name="thumbCircle">
        <Stroke ux:Name="thumbBorder" Width="3" Color="#e3e7c7" />
<Panel ux:Name="thumbFollow" Alignment="CenterLeft" Margin="10,0,0,0" Width="50" Height="50">
    <Circle ux:Name="thumbFollowFill" Color="#fff" />

The rest of the UX are mostly animations. As mentioned, this example uses separate forward and backward animations (to give the stars a "bounce" effect when animating backward). It is also used to animate the colors at different speeds depending on the direction of the animation.

Like so:

<SwipingAnimation Source="swipe">
    ...forward animations go here...
    <TriggerAnimation ux:Binding="BackwardAnimation">
        ...and backward animations go here...

It is important to note that when you bind BackwardAnimation to an animation, all the animators lose their default backward animations. This means that they have to be explicitly re-defined in the bound BackwardAnimation.