Corrado's Blog 2.0

Online thoughts of a technology funatic

Lottie animations in UWP

Lottie is a library created by Airbnb team that parses animation created using Adobe’s After Effects and exported as json file using Bodymovin plugin.
The library was targeting iOS ,Android and React native initially, but thanks to the hard work of community developers a version for Xamarin and UWP is now also available.

If you don’t have any ready-made animation you can get some (and contribute as well) from LottieFiles large repository.

Note: LottieUWP supports Windows Build 10586+ (November Update) and above

Showing a ‘Lottie’ animation in a UWP application is fairly easy.

-Create a blank UWP application

-Include LottieUWP nuget package (don’t forget to check Include prerelease flag to see it) 

Capture1

-Include one or more .json file (your own or one downloaded from LottieFiles) representing the animations you want to play and, important, change Build Action to Content

Capture

-Add a LottieAnimationView control where you want the animation to appear, as example inside MainPage.Xaml

If you run the app you will see your animation playing endlessly Smile

lottie1

You can load an animation programmatically using different options, the most common one is probably via the SetAnimationAsync method that also allows you to provide a caching strategy optimization parameter that allows parsed and loaded animation to be cached for reuse.

Adding these lines into MainPage.xaml.cs constructor generates this output

lottie2

If you want to have even more control, you can subscribe AnimatorUpdated event and inside event handler control the entire animation, in this example I make the animation play faster in the seconf half.

lottie3

Cool isn’t it? Winking smile

There’s not to much interesting to say about it, if you want more details you can check these links:

-LottieUWP github repository

-#ifDef LottieUWP video on channel 9

Go animating!

How to get Skype ‘classic’ on Windows 10

skype_PNG31

If you navigate to Skype website from a Windows 10 machine look like there’s not way to download the so called “classic” version, you are redirected to the Windows Store.
I still prefer the classic one so I’ve found the direct link to the ‘classic’ version http://bit.ly/skypeclassic but if then you the run the installer you will get this sad message:

image

To, solve it, right click the installer file and select Properties, navigate to Compatibility tab, select Windows 8 and click Apply

image

And you’re done Smile

image

Happy ‘classic’ Skyping Winking smile

Get unique Device Id and Application Id in UWP applications

Sometime you need to get a unique application identifier for your app together with a unique device id for internal processing.

Here’s the code you need:

A note regarding device identifier

As you might see from the involved API name SystemIdentification.GetSystemIdForPublisher() the returned value is unique for the same app publisher, if publisher changes the value changes as well.

Here are the Device Id characteristics

  • -Unique for each system
  • -On any particular system, all apps by the same publisher will get the same value for this ID (for all users). Conversely, apps by different publishers on the same system will obtain different IDs.
  • -Can be created offline
  • -Persists across restarts, reinstalls and upgrades of Windows, including clean installs (please see below for exceptions)
  • -Persists across most hardware modifications
  • -Available in OneCore

Playing with ParallaxView

Those of you who have some Windows Phone development experience will remember the Panorama control for sure.
Control had a nice effect where background content was moving slowly below foreground, this effects is named Parallax and you’ll be glad to know that, starting from Fall Creators Update you can have this effects easily back into your own UWP applications, thanks to ParallaxView parte of the new Fluid Design System.

Let’s see it in action:

Create a new UWP application targeting Fall Creators Update (unfortunately ParallaxView is not available on older platforms)

image_thumb1

let’s now add the ParallaxView to MainPage.Xaml

ParallaxView has a Child property that is used to represent the content that is scrolled slowly, in this case I defined it directly inside the ParallaxView.
The key property is Source that you can bind to an element that can be a ScrollViewer or an element that contains a ScrollViewer like a ListView or a RichTextBox. (Note: I tried to nest ListView definition directly inside ParallaxView but seems not to work)
Nothing special to mention about ListBox apart tha:

  1. -I used the ‘new’ PersonPicture control
  2. -The ListView must be placed after the ParallaxView definition, otherwise it wont work

Codebehind is quite straighforward:

The control supports both Verticaland and Horizontal scrolling and the most important property is probably Vertical/HorizontalShift that govers ‘how fast’ background scrolls, chose the one the best fits for you.
Using Vertical/HorizontalStartOffset it is possible to fine tune background scrolling behavior (play with them…)

Here’s final result, what do you think? Smile

parallax