Kuler Touch progress and animating your UI / Rob Crocombe

It’s been a while now since I announced Kuler Touch and a lot of changes have been made so I thought it was time for an update. I’ve implemented almost all the features now. You can view all the highest rated, most popular and most recent themes and view random ones too. Comments appear if any have been posted and Windows search and share charms are also in there. You can search when the app isn’t running too which is quite useful. I’ve also implemented a favourites list so you can keep track of the themes you like.

I’m very happy with the app so far but it still needs quite a bit of polish. I’ve also incorporated a lot of animations using XAML storyboards. Storyboards are sections of code that allow your XAML UI elements to move around. They can be quite simple once you learn how to use them and can make your app look really fluid. Here’s an example of how to make a storyboard.

<Page.Resources>
<Storyboard x:Name="commentEntrance">
<PopInThemeAnimation Storyboard.TargetName="commentGrid" SpeedRatio="0.20" FromVerticalOffset="100" FromHorizontalOffset="0"/>
<DoubleAnimation Storyboard.TargetName="commentGrid" Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.02"/>
</Storyboard>
</Page.Resources>

XAML storyboards are located in your page resources. You can also programmatically write them in C# if you want to do it that way, for example if you really need control over the animation at runtime. This code should work in Windows 8 and Windows Phone, I’m not sure about other platforms like WPF. The above code is for Kuler Touch’s comments. ‘PopInThemeAnimation’ is predefined to make an element slide in from an offset. Double Animations are really useful as they can change any number based property, like opacity or position, over time, and without hand-made key frames.

Storyboards are started using the C# command Begin(), for example ‘commentEntrance.Begin();’

A good way of having an element move around the screen is to use a translate transform and a double animation. For example:

<Grid.RenderTransform>
<TranslateTransform x:Name="position"/>
</Grid.RenderTransform>

The above will be nested into the element you want to move.

<Storyboard x:Name="menuMove">
<DoubleAnimation Storyboard.TargetName="position" Storyboard.TargetProperty="X" To="380" SpeedRatio="1.7">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storybaord>

Then a storyboard is made. You can see the ‘To’ field is set to 380. This is the number of pixels I want to move the element by on the X axis. There is also an easing function nested in the animation element. This means the animation will accelerate at the start and decelerate to zero at the end. It makes the animation look more natural. There are quite a few different algorithms available to choose from, and the resulting animations are different. I suggest using one of the functions beginning with ‘q’ like quadratic or quartic ease. Use Intellisense to find them all.

One more thing you can do is add children transitions to your page. Adding an entrance transition can make UI elements appear into the app more fluidly and it’s really easy to implement.

<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="80"/>
</TransitionCollection>
</Grid.ChildrenTransitions>

You can add this code to something like a grid and it will make all child elements inside transition in from the side. You can set custom offsets yourself. The animation will only play when the elements are created when the page is opened.

I hope this has been helpful. Check Intellisense for more animations and properties.