Paged onboarding
In this example we show how you can use the PageControl
in combination with a Timeline
to create an animated on-boarding experience. We got inspired by this design by Sumit Chakraborty.
The PageControl
We first set up a PageControl
with five child panels to represent the five pages. The PageControl
considers all direct children to be pages.
Each page has some textual content with the same styling. Instead of copying things like Color
, FontSize
and Margin
to all the pages, we create a reusable class:
<Grid ux:Class="PageContent" Padding="45,0" MinHeight="100">
<string ux:Property="Title" />
<string ux:Property="Content" />
<Grid Rows="2*,3*">
<Text Alignment="Top" Value="{ReadProperty this.Title}" FontSize="20" Color="#000" TextAlignment="Center" TextWrapping="Wrap" Margin="20,0" />
<Text Alignment="Top" Value="{ReadProperty this.Content}" FontSize="16" Color="#777" TextAlignment="Center" TextWrapping="Wrap"/>
</Grid>
</Grid>
We can then use this class in each of our pages like so:
<PageContent ux:Name="page1Content" Alignment="Top" Row="1"
Title="Discover places"
Content="Find out about new cool places that value your feedback by using our Nearby venues feature." >
The icons
We also make classes for all the icons we need and put them in their own file called Resources.ux.
<Image ux:Class="Chat" File="Assets/chat.png"/>
<Image ux:Class="Feed" File="Assets/feed.png"/>
<Image ux:Class="Marker" File="Assets/marker.png"/>
<Image ux:Class="Mountain" File="Assets/mountain.png"/>
<Image ux:Class="MountainFill" File="Assets/mountainFill.png" />
<Image ux:Class="Phone" File="Assets/phone.png"/>
<Image ux:Class="PhoneHands" File="Assets/phoneHands.png"/>
<Image ux:Class="Tags" File="Assets/tags.png"/>
<Image ux:Class="Map" File="Assets/map.png" />
Animating the mountain
Since the mountain moves independently of all the pages, we put it in a layer of its own outside the PageControl
.
<Grid ux:Name="mountainsGrid" Rows="3*,1*">
<Panel ux:Name="mountains" Width="70%" HitTestMode="None" Alignment="Center">
<MountainFill ux:Name="mountainFill" Width="50%" Alignment="Bottom" Offset="-4.0%,-0.5%"/>
<Mountain/>
<AddingAnimation>
<Move Y="-2" RelativeTo="Size" Duration="0.6" Easing="QuinticIn" />
<Change mountains.Opacity="0" Duration="0.6" Easing="QuinticIn" />
</AddingAnimation>
</Panel>
</Grid>
As our app loads, we want this to animate slightly from the bottom of the screen. We achieve this with an AddingAnimation
. AddingAnimation
is triggered as an element is rooted to the visual tree. In this case, that happens as soon as the app loads.
The Timeline
We animate the whole thing using a Timeline
. A Timeline
acts as a normal Trigger
, except that we can manually set a progress for it. The progress should be a value between 0 and 1. Since we want the page progress of our PageControl
to make our Timeline
progress, we put an ActivatingAnimation
on the first child of out PageControl
. We also set the Scale
property to be 0.25, since we want this trigger to activate over all the five pages. The scale of 0.25 gives us the following progression values for the five pages: 0, 0.25, 0.5, 0.75 and 1.0. You can see these values more or less represented in the following code, with just a few tweaks.
<Timeline ux:Name="timeline" TargetProgress="1">
<Move Target="mountains" RelativeTo="Size">
<Keyframe Y="-0.38" Time="0.25"/>
<Keyframe Y="-0.2" Time="0.5"/>
<Keyframe X="-0.3" Y="-0" Time="0.75"/>
<Keyframe X="0.2" Y="-0.2" Time="0.98"/>
<Keyframe X="0.08" Y="-0.2" Time="1.0"/>
</Move>
<Scale Target="mountains">
<Keyframe Value="1" Time="0.25"/>
<Keyframe Value="0.65" Time="0.5"/>
<Keyframe Value="0.2" Time="0.75"/>
<Keyframe Value="0.45" Time="0.98"/>
</Scale>
<Change Target="mountainFill.Opacity">
<Keyframe Value="0.7" Time="0.0"/>
<Keyframe Value="0" Time="0.25"/>
<Keyframe Value="0.7" Time="0.5"/>
<Keyframe Value="0.7" Time="0.75"/>
<Keyframe Value="0" Time="1.0"/>
</Change>
<Change Target="mountains.Opacity">
<Keyframe Value="0.25" Time="0.25"/>
<Keyframe Value="1" Time="0.5"/>
<Keyframe Value="0" Time="0.65"/>
<Keyframe Value="0" Time="0.85"/>
<Keyframe Value="1" Time="1.0"/>
</Change>
</Timeline>
That’s it! Feel free to download and play around with the example code.